Disparar JavaScript al guardar en Gutenberg (Editor de Bloques)

No estoy seguro si hay una mejor manera, pero estoy escuchando subscribe en lugar de agregar un event listener al botón:

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

  if (isSavingPost && !isAutosavingPost) {
    // Aquí va tu código AJAX ......

  }
})

Documentación oficial de los datos del Editor de Entradas: https://wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-editor/

Si alguien todavía está interesado, encontré una forma simple de ejecutar algo justo DESPUÉS de que el editor de bloques (Gutenberg) termine de publicar/actualizar una entrada:

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

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

    return savePost(options)
        .then(() => {
            // Hacer algo después de que la entrada se guarde de forma asíncrona.
            console.log('La entrada fue guardada.')

            if (!options.isAutosave) {
               // Esto no es un guardado automático.
            }
        })
}

Básicamente, el fragmento de código anterior sobrescribe la función nativa savePost().
Así que la sobrescribes con tu propia función, llamas a savePost() nuevamente dentro de ella y aprovechas la promesa devuelta simplemente usando then.

Para activar la acción (en este caso una solicitud Ajax) DESPUÉS de que el guardado del post esté COMPLETO, puedes usar un intervalo para esperar hasta que isSavingPost devuelva false nuevamente.

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

Necesitas recoger la función unsubscribe de la suscripción y llamarla para evitar llamadas múltiples.

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


                // tu AJAX AQUÍ();

            }
        });

Escribí una publicación en mi blog sobre esto - https://thewpvoyage.com/how-to-detect-when-a-post-is-done-saving-in-wordpress-gutenberg/

Puedes usar el siguiente hook:

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

/**
 * Retorna `true` si el post ha terminado de guardarse, `false` en caso contrario.
 *
 * @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 ) {
            // Código a ejecutar después de que el post se haya guardado.
            setIsPostSaved( true );
            isPostSavingInProgress.current = false;
        }
    }, [ isSavingPost, isAutosavingPost ] );

    return isPostSaved;
};

/**
 * Función de edición de un bloque de ejemplo.
 *
 * @return {WPElement} Elemento a renderizar.
 */
export default function Edit() {
    const isAfterSave = useAfterSave();

    useEffect( () => {
        if ( isAfterSave ) {
            // Agrega aquí tu código que debe ejecutarse después de guardar el post.
            console.log( '...guardado completado...' )
        }
    }, [ isAfterSave ] );

    return (
        <p { ...useBlockProps() }>
            { __( 'Lista de Tareas – ¡hola desde el editor!', 'todo-list' ) }
        </p>
    );
}