通过插件在 Wordpress 中的 Gutenberg 编辑器的标题中添加按钮答案

【问题标题】：Adding button to header of Gutenberg editor in Wordpress through plugin通过插件在 Wordpress 中的 Gutenberg 编辑器的标题中添加按钮
【发布时间】：2020-09-18 04:19:29
【问题描述】：

我正在为 wordpress 开发一个插件，我想将按钮添加到古腾堡编辑器的标题中，就像 Elementor 插件“使用 Elementor 编辑”添加的按钮一样

谁能指导我该怎么做才能实现这一目标...在此先感谢

【问题讨论】：

标签： wordpress wordpress-gutenberg

【解决方案1】：

我已经检查了标题工具栏上的 Guternberg 源代码，不幸的是现在没有一个漂亮的解决方案。您可以拥有“自定义”按钮，但它们只能通过调用 registerPlugin 和 PluginSidebar 组件来完成，该组件创建侧边栏并且按钮出现在右侧用于固定\加星标的侧边栏（就像 Yoast SEO 一样）。

Elementor 这样做：它订阅wp.data 存储更改，并且每当发生某些事情时，如果尚未注入，它就会注入它的按钮。仅仅因为 React 重新渲染 DOM，它最终可能会清除按钮，所以订阅更改很重要，所以如果它清除自定义按钮，js 代码只需重新注入它。

下面是简化的 ES5 代码，用于将自定义链接\按钮或任何自定义 HTML 注入其中（就像 Elementor 所做的那样）。

// custom-link-in-toolbar.js
// wrapped into IIFE - to leave global space clean.
( function( window, wp ){

    // just to keep it cleaner - we refer to our link by id for speed of lookup on DOM.
    var link_id = 'Your_Super_Custom_Link';

    // prepare our custom link's html.
    var link_html = '<a id="' + link_id + '" class="components-button" href="#" >Custom Link</a>';

    // check if gutenberg's editor root element is present.
    var editorEl = document.getElementById( 'editor' );
    if( !editorEl ){ // do nothing if there's no gutenberg root element on page.
        return;
    }

    var unsubscribe = wp.data.subscribe( function () {
        setTimeout( function () {
            if ( !document.getElementById( link_id ) ) {
                var toolbalEl = editorEl.querySelector( '.edit-post-header__toolbar' );
                if( toolbalEl instanceof HTMLElement ){
                    toolbalEl.insertAdjacentHTML( 'beforeend', link_html );
                }
            }
        }, 1 )
    } );
    // unsubscribe is a function - it's not used right now 
    // but in case you'll need to stop this link from being reappeared at any point you can just call unsubscribe();

} )( window, wp )

所以在你的主题或插件中创建一个 js 文件，然后以这种方式链接它：

add_action( 'enqueue_block_editor_assets', 'custom_link_injection_to_gutenberg_toolbar' );
 
function custom_link_injection_to_gutenberg_toolbar(){
   // Here you can also check several conditions,
   // for example if you want to add this link only on CPT  you can
   $screen= get_current_screen();
   // and then
   if ( 'cpt-name' === $screen->post_type ){
      wp_enqueue_script( 'custom-link-in-toolbar', get_template_directory_uri() . '/assets/js/custom-link-in-toolbar.js', array(), '1.0', true );   
   }
   
}

同样，这个解决方案并不完美，因为我们只是将自定义 HTML 注入到由 Gutenberg(React) 管理的 DOM 中，但在这一点上，它似乎是实现它的唯一方法，可能在未来我们会有一些东西比如过滤器或钩子，它们将允许我们注入我们在工具栏中呈现但尚未呈现的自定义组件。

仍然 Elementor 这样做。你可以检查它的代码 https://github.com/elementor/elementor/blob/master/assets/dev/js/admin/gutenberg.js

【讨论】：