Show missing Sidebar from Gutenberg admin area

No code changes are necessary, it can be done entirely in the UI. Sidebars appear in the 3 dot drop down menu, the star is just a way to add a shortcut to the top toolbar, e.g. here are the Yoast and Jetpack sidebars listed:

enter image description here

Clicking on those options brings up their sidebars, as well as the unchecked star that can be used to re-add them to the top toolbar. In the image above, I had unchecked the star on the yoast sidebar, just as you had with your own sidebar

edit

On further investigation, I’ve replicated the issue and raised a bug on the Gutenberg repo

I also notice that there’s what appears to be a more complete example here:

https://wordpress.org/gutenberg/handbook/designers-developers/developers/packages/packages-plugins/

So it appears that the handbooks code example is incomplete, and that you need to specify a component of type PluginSidebarMoreMenuItem in addition to the sidebar itself in order for it to show up as I described above

// Using ES5 syntax
var el = wp.element.createElement;
var Fragment = wp.element.Fragment;
var PluginSidebar = wp.editPost.PluginSidebar;
var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
var registerPlugin = wp.plugins.registerPlugin;

function Component() {
    return el(
        Fragment,
        {},
        el(
            PluginSidebarMoreMenuItem,
            {
                target: 'sidebar-name',
            },
            'My Sidebar'
        ),
        el(
            PluginSidebar,
            {
                name: 'sidebar-name',
                title: 'My Sidebar',
            },
            'Content of the sidebar'
        )
    );
}
registerPlugin( 'plugin-name', {
    icon: 'smiley',
    render: Component,
} );

Leave a Comment