通过插件将按钮添加到Wordpress中 gutenberg 编辑器的页眉

7cjasjjr  于 2022-11-02  发布在  WordPress
关注(0)|答案(2)|浏览(152)

我正在开发一个插件的WordPress,我想添加到 gutenberg 编辑器的标题按钮,就像一个由Elementor插件添加“编辑与Elementor”

有谁能指导我该怎么做才能做到这一点...提前感谢

zd287kbt

zd287kbt1#

我已经检查了标题工具栏上的Gutenberg源代码,不幸的是,现在还没有一个完美的解决方案。你可以有'自定义'按钮,但他们只能通过调用registerPluginPluginSidebar组件,这将创建侧边栏和按钮出现在右侧的钉\星侧边栏(像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处检查它的代码

qni6mghb

qni6mghb2#

现在有一个主 Jmeter 板按钮的插槽,您可以使用该按钮

import { registerPlugin } from '@wordpress/plugins';
import {
    __experimentalFullscreenModeClose as FullscreenModeClose,
    __experimentalMainDashboardButton as MainDashboardButton,
} from '@wordpress/edit-post';
import { close,image } from '@wordpress/icons';

const MainDashboardButtonIconTest = () => (
    <MainDashboardButton>
        <FullscreenModeClose icon={ close } href="http://wordpress.org" />

          <Button variant="primary" icon={image}>
                My Button
          </Button>

    </MainDashboardButton>
);

registerPlugin( 'main-dashboard-button-icon-test', {
    render: MainDashboardButtonIconTest,
} );

参考:https://developer.wordpress.org/block-editor/reference-guides/slotfills/main-dashboard-button/

相关问题