// 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 );
}
}
2条答案
按热度按时间zd287kbt1#
我已经检查了标题工具栏上的Gutenberg源代码,不幸的是,现在还没有一个完美的解决方案。你可以有'自定义'按钮,但他们只能通过调用
registerPlugin
与PluginSidebar
组件,这将创建侧边栏和按钮出现在右侧的钉\星侧边栏(像Yoast SEO做的)。Elementor是这样做的:它订阅
wp.data
存储更改,并且每当发生某些事情时,它都会注入它的按钮(如果尚未注入)。仅仅因为React重新呈现DOM,它可能最终会清除按钮,所以订阅更改很重要,因此如果它清除了自定义按钮js代码,只需重新注入它。以下是简化的ES5代码,用于向其中注入自定义链接\按钮或任何自定义HTML(就像Elementor所做的那样)。
因此,在您的主题或插件中创建一个js文件,然后按以下方式链接它:
同样,这个解决方案并不完美,因为我们只是将我们的自定义HTML注入到由 gutenberg (React)管理的DOM中,但在这一点上,这似乎是实现它的唯一方法,可能在未来,我们将有类似过滤器或挂钩的东西,这将允许我们将我们的自定义组件注入到工具栏中呈现,但还没有。
但是Elementor仍然是这样做的。您可以在https://github.com/elementor/elementor/blob/master/assets/dev/js/admin/gutenberg.js处检查它的代码
qni6mghb2#
现在有一个主 Jmeter 板按钮的插槽,您可以使用该按钮
参考:https://developer.wordpress.org/block-editor/reference-guides/slotfills/main-dashboard-button/