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(
PluginSidebar,
{
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:
<?php
/*
Plugin Name: Sidebar plugin
*/
function sidebar_plugin_register() {
wp_register_script(
'plugin-sidebar-js',
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:
