Attivare Javascript al salvataggio in Gutenberg (Block Editor)

Non sono sicuro se esiste un modo migliore, ma sto ascoltando subscribe invece di aggiungere un event listener al pulsante:

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

  if (isSavingPost && !isAutosavingPost) {
    // Qui va il tuo codice AJAX ......

  }
})

Documentazione ufficiale dei dati dell'Editor di Post: https://wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-editor/

Se qualcuno è ancora interessato, ho trovato un modo semplice per eseguire qualcosa subito DOPO che l'editor a blocchi (Gutenberg) completa la pubblicazione/aggiornamento di un articolo:

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

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

    return savePost(options)
        .then(() => {
            // Fai qualcosa dopo che l'articolo è stato effettivamente salvato in modo asincrono.
            console.log('L\'articolo è stato salvato.')

            if (!options.isAutosave) {
               // Questo non è un salvataggio automatico.
            }
        })
}

In sostanza, lo snippet sopra sovrascrive la funzione nativa savePost().
Quindi la si sovrascrive con una propria funzione, si richiama savePost() al suo interno e si sfrutta la promise restituita semplicemente utilizzando then.

Per attivare l'azione (in questo caso una richiesta Ajax) DOPO che il salvataggio del post è COMPLETATO, puoi utilizzare un intervallo per attendere finché isSavingPost non restituisce nuovamente false.

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);
        }
    }
});

È necessario raccogliere la funzione unsubscribe dalla sottoscrizione e chiamarla per evitare chiamate 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();


                // il tuo AJAX QUI();

            }
        });

Ho scritto un articolo sul blog riguardo questo - https://thewpvoyage.com/how-to-detect-when-a-post-is-done-saving-in-wordpress-gutenberg/

Puoi utilizzare il seguente hook:

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

/**
 * Restituisce `true` se il post è stato salvato, `false` altrimenti.
 *
 * @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 ) {
            // Codice da eseguire dopo che il post è stato salvato.
            setIsPostSaved( true );
            isPostSavingInProgress.current = false;
        }
    }, [ isSavingPost, isAutosavingPost ] );

    return isPostSaved;
};

/**
 * La funzione di modifica di un blocco di esempio.
 *
 * @return {WPElement} Elemento da renderizzare.
 */
export default function Edit() {
    const isAfterSave = useAfterSave();

    useEffect( () => {
        if ( isAfterSave ) {
            // Aggiungi qui il tuo codice che deve essere eseguito dopo il salvataggio del post.
            console.log( '...salvataggio completato...' )
        }
    }, [ isAfterSave ] );

    return (
        <p { ...useBlockProps() }>
            { __( 'Lista delle cose da fare – ciao dall\'editor!', 'todo-list' ) }
        </p>
    );
}