Get a Sidebar up and Running Edit

Note: this tutorial covers a custom sidebar, Adding controls to the sidebar is covered in Block Toolbar and Settings Sidebar

The first step in the journey is to tell the editor that there is a new plugin that will have its own sidebar. You can do so by using the registerPlugin, PluginSidebar, and createElement utilities provided by WordPress, to be found in the @wordpress/plugins, @wordpress/edit-post, and @wordpress/element packages, respectively.

Add the following code to a JavaScript file called plugin-sidebar.js and save it within your plugin’s directory:

( function ( wp ) {
    var registerPlugin = wp.plugins.registerPlugin;
    var PluginSidebar = wp.editPost.PluginSidebar;
    var el = wp.element.createElement;

    registerPlugin( 'my-plugin-sidebar', {
        render: function () {
            return el(
                    name: 'my-plugin-sidebar',
                    icon: 'admin-post',
                    title: 'My plugin sidebar',
                'Meta field'
    } );
} )( window.wp );

For this code to work, those utilities need to be available in the browser, so you tell WordPress to enqueue the packages that include them by introducing wp-plugins, wp-edit-post, and wp-element as dependencies of your script.

Copy this code to a PHP file within your plugin’s directory:


Plugin Name: Sidebar plugin

function sidebar_plugin_register() {
        plugins_url( 'plugin-sidebar.js', __FILE__ ),
        array( 'wp-plugins', 'wp-edit-post', 'wp-element' )
add_action( 'init', 'sidebar_plugin_register' );

function sidebar_plugin_script_enqueue() {
    wp_enqueue_script( 'plugin-sidebar-js' );
add_action( 'enqueue_block_editor_assets', 'sidebar_plugin_script_enqueue' );

After installing and activating this plugin, there is a new icon resembling a tack in the top-right of the editor. Upon clicking it, the plugin’s sidebar will be opened:

Sidebar Up and Running