Gutenberg上的触发器脚本(块编辑器)保存

时间：2018-11-13 作者：majick

因此，我有一个metabox，我想在保存帖子时触发一些Javascript（在本用例中刷新页面）

在Classic Editor中，这可以通过连接到save_post （具有高优先级）

但由于Gutenberg现在将现有元数据库的保存过程转换为单独的AJAX调用，因此需要使用javascript，因此我应该如何：

侦听所有保存过程都已完成的事件，然后触发javascript？如果是这样，这个事件叫什么？是否有提及这些事件的地方？OR

在metabox保存AJAX过程中触发javascript，然后该过程可以在继续之前检查父页面保存过程的状态？

4 个回复

最合适的回答,由SO网友: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 根据需要匹配。：-）

SO网友:tomyam

不确定是否有更好的方法，但我正在听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/

SO网友:andergmartins

为了在post保存完成后触发操作（在本例中是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);
        }
    }
});

SO网友:Phillip Kamikaze

你需要付费unsubscribe 函数from subscribe and call toavoid multiples time call.

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


                // your AJAX HERE();

            }
        });

结束

小码农CODE

Gutenberg上的触发器脚本(块编辑器)保存

相关推荐

JavaScript in a PHP plugin