web-dev-qa-db-ja.com

グーテンベルクでJavaScriptをトリガーする（ブロックエディタ）保存

そのため、投稿が保存されたときにJavascriptを起動したいメタボックスがあります（このユースケースではページを更新します）。

Classic Editorでは、これは（優先度の高い）save_postにフックされた単純なリダイレクトを介して行うことができます。

しかし、グーテンベルクは現在、既存のメタボックスの保存プロセスを個々のAJAX呼び出しに変換しているので、JavaScriptである必要があります。

  • すべての保存プロセスが完了してからJavaScriptをトリガーするイベントを聞いてください。もしそうなら、このイベントは何と呼ばれますか？これらのイベントへの参照はまだありますか？ _または_

  • メタボックス保存AJAXプロセス内でJavaScriptを起動します。続行する前に、親ページ保存プロセスの状態を確認できますか。

javascriptmetaboxblock-editor
7
majick

さて、それで私が望んでいたよりもっとずっとハッキーな解決策が、うまくいった….

これは、誰かが同じことをする必要がある場合に備えて、私のコードからそれを行うためのわずかに単純化され抽象化された方法です。

    var reload_check = false; var publish_button_click = false;
    jQuery(document).ready(function($) {
        add_publish_button_click = setInterval(function() {
            $publish_button = jQuery('.edit-post-header__settings .editor-post-publish-button');
            if ($publish_button && !publish_button_click) {
                publish_button_click = true;
                $publish_button.on('click', function() {
                    var reloader = setInterval(function() {
                        if (reload_check) {return;} else {reload_check = true;}
                        postsaving = wp.data.select('core/editor').isSavingPost();
                        autosaving = wp.data.select('core/editor').isAutosavingPost();
                        success = wp.data.select('core/editor').didPostSaveRequestSucceed();
                        console.log('Saving: '+postsaving+' - Autosaving: '+autosaving+' - Success: '+success);
                        if (postsaving || autosaving || !success) {classic_reload_check = false; return;}
                        clearInterval(reloader);

                        value = document.getElementById('metabox_input_id').value;
                        if (value == 'trigger_value') {
                            if (confirm('Page reload required. Refresh the page now?')) {
                                window.location.href = window.location.href+'&refreshed=1';
                            }
                        }
                    }, 1000);
                });
            }
        }, 500);
    });

...必要に応じてmetabox_input_idとtrigger_valueを一致するように変更するだけです。 :-)

2
majick

より良い方法があるかどうかはわかりませんが、ボタンにイベントリスナーを追加するのではなく、subscribeを聴いています。

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

  if (isSavingPost && !isAutosavingPost) {
    // Here goes your AJAX code ......

  }
})

Post Editorデータの公式文書： https://wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-editor/

4
tomyam