Elementor – Adding button to header of Gutenberg editor in WordPress through plugin

I’ve checked Guternberg source code on header toolbar and unfortunately right now there’s only not a beautiful solution possible. You can have ‘custom’ buttons but they are only done through calling registerPlugin with PluginSidebar component which creates sidebar and button appears on right side for pinnedstarred sidebars (like Yoast SEO does).

Elementor does it this way: it subscribes to wp.data store changes and whenever something happens it injects it’s button if it’s not yet injected. Just because React rerenders DOM it may eventually wipe button out, so subscribing to changes is important so if it wipes out custom button js code just reinjects it.

Below is simplified ES5 code to inject a custom linkbutton or really any custom HTML into it (just as Elementor does).

// 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 )

So create a js file in your theme or plugin and then link it this way:

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

Again this solution isn’t perfect because we just inject our custom HTML into DOM which is managed by Gutenberg(React) but at this point it seems like the only way to achieve it, may be in future we’ll have something like filters or hooks which will allow us to inject our custom components being rendered in toolbar but not yet.

Still Elementor does it this way. you can check it’s code at
https://github.com/elementor/elementor/blob/master/assets/dev/js/admin/gutenberg.js