Declanșare Javascript la Salvare în Gutenberg (Block Editor)

Nu sunt sigur dacă există o metodă mai bună, dar ascult evenimentul subscribe în loc să adaug un event listener la buton:

wp.data.subscribe(function () {
  var isSavingPost = wp.data.select('core/editor').isSavingPost();
  var isAutosavingPost = wp.data.select('core/editor').isAutosavingPost();

  if (isSavingPost && !isAutosavingPost) {
    // Aici vine codul tău AJAX ......

  }
})

Documentația oficială a datelor Editorului de Postări: https://wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-editor/

Dacă cineva este încă interesat, am găsit o metodă simplă pentru a executa ceva imediat DUPA ce editorul de blocuri (Gutenberg) finalizează publicarea/actualizarea unui articol:

const editor = window.wp.data.dispatch('core/editor')
const savePost = editor.savePost

editor.savePost = function (options) {
    options = options || {}

    return savePost(options)
        .then(() => {
            // Faceți ceva după ce articolul a fost salvat efectiv în mod asincron.
            console.log('Articolul a fost salvat.')

            if (!options.isAutosave) {
               // Acesta nu este un salvare automată.
            }
        })
}

Practic, fragmentul de cod de mai suprascrie funcția nativă savePost().
Deci o suprascrieți cu propria funcție, apelați din nou savePost() în interiorul ei și profitați de promisiunea returnată folosind then.

Pentru a declanșa acțiunea (în acest caz o cerere Ajax) DUPA ce salvarea postării este COMPLETĂ, poți folosi un interval pentru a aștepta până când isSavingPost returnează false din nou.

let intervalCheckPostIsSaved;
let ajaxRequest;

wp.data.subscribe(function () {
    let editor = wp.data.select('core/editor');

    if (editor.isSavingPost()
         && !editor.isAutosavingPost()
         && editor.didPostSaveRequestSucceed()) {

        if (!intervalCheckPostIsSaved) {
            intervalCheckPostIsSaved = setInterval(function () {
                if (!wp.data.select('core/editor').isSavingPost()) {
                    if (ajaxRequest) {
                        ajaxRequest.abort();
                    }

                    ajaxRequest = $.ajax({
                        url: ajaxurl,
                        type: 'POST',
                        data: {},
                        success: function (data) {
                            ajaxRequest = null;
                        }
                    });

                    clearInterval(intervalCheckPostIsSaved);
                    intervalCheckPostIsSaved = null;
                }
            }, 800);
        }
    }
});

Trebuie să colectezi funcția unsubscribe din abonare și să o apelezi pentru a evita apeluri multiple.

const unsubscribe = wp.data.subscribe(function () {
            let select = wp.data.select('core/editor');
            var isSavingPost = select.isSavingPost();
            var isAutosavingPost = select.isAutosavingPost();
            var didPostSaveRequestSucceed = select.didPostSaveRequestSucceed();
            if (isSavingPost && !isAutosavingPost && didPostSaveRequestSucceed) {
                console.log("isSavingPost && !isAutosavingPost && didPostSaveRequestSucceed");
                unsubscribe();


                // AJAX-ul tău AICI();

            }
        });

Am scris un articol pe blog despre acest subiect - https://thewpvoyage.com/how-to-detect-when-a-post-is-done-saving-in-wordpress-gutenberg/

Poți folosi următorul hook:

import { useBlockProps } from '@wordpress/block-editor';
import { useRef, useState, useEffect } from '@wordpress/element';
import { useSelect } from '@wordpress/data';

/**
 * Returnează `true` dacă postarea a fost salvată, `false` în caz contrar.
 *
 * @returns {Boolean}
 */
const useAfterSave = () => {
    const [ isPostSaved, setIsPostSaved ] = useState( false );
    const isPostSavingInProgress = useRef( false );
    const { isSavingPost, isAutosavingPost } = useSelect( ( __select ) => {
        return {
            isSavingPost: __select( 'core/editor' ).isSavingPost(),
            isAutosavingPost: __select( 'core/editor' ).isAutosavingPost(),
        }
    } );

    useEffect( () => {
        if ( ( isSavingPost || isAutosavingPost ) && ! isPostSavingInProgress.current ) {
            setIsPostSaved( false );
            isPostSavingInProgress.current = true;
        }
        if ( ! ( isSavingPost || isAutosavingPost ) && isPostSavingInProgress.current ) {
            // Codul care rulează după ce postarea a fost salvată.
            setIsPostSaved( true );
            isPostSavingInProgress.current = false;
        }
    }, [ isSavingPost, isAutosavingPost ] );

    return isPostSaved;
};

/**
 * Funcția de editare a unui bloc exemplu.
 *
 * @return {WPElement} Elementul de randat.
 */
export default function Edit() {
    const isAfterSave = useAfterSave();

    useEffect( () => {
        if ( isAfterSave ) {
            // Adaugă aici codul care trebuie să ruleze după salvarea postării.
            console.log( '...salvare finalizată...' )
        }
    }, [ isAfterSave ] );

    return (
        <p { ...useBlockProps() }>
            { __( 'Listă de Sarcini – salut de la editor!', 'todo-list' ) }
        </p>
    );
}