Запуск JavaScript при сохранении в Gutenberg (Блочный редактор)

Не уверен, есть ли лучший способ, но я использую subscribe вместо добавления обработчика событий к кнопке:

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

  if (isSavingPost && !isAutosavingPost) {
    // Здесь ваш AJAX код ......

  }
})

Официальная документация данных редактора записей: https://wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-editor/

Если кому-то еще интересно, я придумал простой способ выполнить какой-то код сразу ПОСЛЕ того, как редактор блоков (Gutenberg) завершит публикацию/обновление записи:

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

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

    return savePost(options)
        .then(() => {
            // Выполнить что-то после фактического асинхронного сохранения записи.
            console.log('Запись была сохранена.')

            if (!options.isAutosave) {
               // Это не автосохранение.
            }
        })
}

По сути, приведенный выше сниппет переопределяет нативную функцию savePost().
Таким образом, вы переопределяете её своей собственной функцией, вызываете savePost() внутри неё и используете преимущество возвращаемого промиса через then.

Чтобы выполнить действие (в данном случае Ajax-запрос) ПОСЛЕ того, как сохранение записи будет ЗАВЕРШЕНО, можно использовать интервал для ожидания, пока isSavingPost снова вернет 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);
        }
    }
});

Вам необходимо собрать функцию отписки от подписки и вызвать её, чтобы избежать многократных вызовов.

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 ЗДЕСЬ();

            }
        });

Я написал статью в блоге на эту тему — https://thewpvoyage.com/how-to-detect-when-a-post-is-done-saving-in-wordpress-gutenberg/

Вы можете использовать следующий хук:

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

/**
 * Возвращает `true`, если запись завершила сохранение, иначе `false`.
 *
 * @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 ) {
            // Код, выполняемый после завершения сохранения записи.
            setIsPostSaved( true );
            isPostSavingInProgress.current = false;
        }
    }, [ isSavingPost, isAutosavingPost ] );

    return isPostSaved;
};

/**
 * Функция редактирования примера блока.
 *
 * @return {WPElement} Элемент для рендеринга.
 */
export default function Edit() {
    const isAfterSave = useAfterSave();

    useEffect( () => {
        if ( isAfterSave ) {
            // Добавьте здесь ваш код, который должен выполниться после сохранения записи.
            console.log( '...сохранение завершено...' )
        }
    }, [ isAfterSave ] );

    return (
        <p { ...useBlockProps() }>
            { __( 'Список дел — привет из редактора!', 'todo-list' ) }
        </p>
    );
}