在Gutenberg上触发Javascript（块编辑器）保存

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

在经典编辑器中，这可以通过挂钩到save_post（具有较高优先级）的简单重定向来完成

但是由于Gutenberg现在将现有元框的保存过程转换为单个AJAX调用，因此它需要使用javascript，所以我该怎么做：

监听所有保存过程都已完成的事件，然后触发javascript吗？如果是这样，此事件称为什么？是否在任何地方都提到了这些事件？要么
触发metabox保存AJAX流程内部的javascript，然后可以在继续之前检查父页面保存流程的状态？

javascript metabox block-editor

— 马吉克
source

使古滕贝格重装只是你metabox也是一个潜在的解决方案，将实现在JS的metabox UI并依托wp.data数据存储

— 汤姆Ĵ诺埃尔

@TomJNowell我找到了可以用来检查某些状态的参考，但不确定如何访问它们：wordpress.org/gutenberg/handbook/data/data-core-editor

— majick

到目前为止，我有：例如。wp.data.select('core/editor').isSavingPost()...这种访问方式在我能看到的任何地方都没有记录...并且似乎也不可靠，因为false在首次保存帖子（在未定义之前）之后，无论编辑器是否仍在保存，它都会返回。facepalm

— majick

您也可以在gutenberg存储库中提出问题以寻求支持，这是这里的话题，但是您可能会得到更多知识渊博的人的答复。同样，JS WP挂钩系统也有可能，但这只是一个猜测

— Tom J Nowell

疯狂地，像这样的简单事情已经被要求并且不被支持：github.com/WordPress/gutenberg/issues/10044 ...因此，我正在尝试自己寻找一种方法。

— majick

Answers:

不知道是否有更好的方法，但是我正在听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 ......

  }
})

帖子编辑器数据的官方文档：https : //wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-editor/

— 托马姆
source

这看起来更干净，只是好奇该subscribe方法从何而来？它是wp.data功能的一部分吗？我没有在文档中看到它。

— majick

是的，subscribe是wp.data模块的方法。使用Gutenberg编辑帖子时打开控制台，然后运行wp.data。这列出了所有可用的数据模块方法。

— tomyam

找到这个做得好！不幸的是gutenberg文档的布局如此晦涩，没有足够的示例。加上开发人员会知道和/或想要学习React方法的期望真的太多了……我敢肯定，如果您已经知道它的话，可能会节省很多时间，但是如果您不知道，那将是一个浪费时间的事实-我花几个小时来研究如何访问wp.data模型中有用的任何内容。对我来说，它又回到了PHP（和经典编辑器）。

— 马吉克

感谢您分享！如何根据条件拦截和停止更新/发布帖子。

— Mohammad AlBanna '19

当用户单击“移至垃圾箱”按钮时，此方法也会触发代码（发布状态更改为“垃圾箱”，isSavingPost值为“ true”，无论如何）。另外，在我的案例中，一次“更新”点击触发了3次订阅代码。最后，我听了单击.editor-post-publish-button，.editor-post-save-draft和.editor-post-preview的单击。

— Oksana Romaniv

好的，这样的方式比我想要的更棘手的解决方案，但是让它工作了...

这是从我的代码中进行稍微简化和抽象的方式，以防万一有人需要做同样的事情（我相信不久的将来还会有更多的插件）。

    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匹配即可。:-)

— 马吉克
source

这很有用，我可以找到访问gutenberg javascript模块层次结构的唯一参考示例：github.com/front/gutenberg-js

— majick

您需要从订阅和调用中收集取消订阅功能，以避免多次调用。

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

            }
        });

— 菲利普·卡米卡兹（Phillip Kamikaze）
source