Browse: Home / Block Editor Handbook / How-to Guides / Plugin Sidebar

Plugin Sidebar Edit

How to add a sidebar to your plugin. A sidebar is the region to the far right of the editor. Your plugin can add an additional icon next to the InspectorControls (gear icon) that can be expanded.

Example sidebar

Prerequisite:: The tutorial assumes you have an existing plugin setup and ready to add PHP and JavaScript code. Please, refer to Getting started with JavaScript tutorial for an introduction to WordPress plugins and how to use JavaScript to extend the block editor.

In the next sections, you’re going to create a custom sidebar for a plugin that contains a text control so the user can update a value that is stored in the post_meta table.

  1. Get a sidebar up and running
  2. Tweak the sidebar style and add controls
  3. Register a new meta field
  4. Initialize the input control with the meta field value
  5. Update the meta field value when input’s content changes