Creating WordPress Block Editor Sidebar Plugins With Plugin Machine

Create and extend sidebar panel’s in WordPress’ block editor. All of the React build tools will be configured for you and documented in the plugin’s README.

A great use for these types of plugins is for storing information about the post that doesn’t belong in the content using custom fields.

Creating Block Editor Plugins With Plugin Machine

When you create a new plugin with Plugin Machine, make sure to enable the “Block Plugin” feature. You should also, enable “Actions and Filters,” which will help you register a meta field.

The form for adding features to plugins.

Once you have done that, you will see a “Block Plugins” option in “Manage Features” screen. Click the “Edit” button to go to the settings for the block plugins.

A screenshot of the Block Plugins list, when there are none. A "New Block Plugin" button is there.

Click the “New Block” button. Give the block a slug-cased name and then click “create” to go to the block plugin editor screen. These are the settings on that screen:

  • Name: The slug-case identifier for block plugin.
  • Title: The human readable label for panel.
  • Type: What type of plugin. There is only one option right now:
    • “Sidebar” : Adds a plugin sidebar
  • Meta key: The name of custom field to store value in.
  • Setting Label: Human readable label for meta key setting.
Screenshot of creating WordPress block plugin with Plugin Machine UI.

Click “Save” to save your block plugin. If you wish to, you can view or modify the code that will be generated for the block plugin by using the “Show Files” button:

Code for a WordPress block plugin, shown in Plugin Machine UI.

Once you are happy with your block, use the back button to get back to the feature manager. Click the “Edit” button next to “Actions and Filters” and create a new hook. Make sure to choose “Core: Register Meta Fields”.

Adding an action and filter in Plugin Machine UI. Choose "Core: Register Meta Fields"

Once you click “Save” you will see all of the options for the meta field. These are the settings for the meta field:

  • Meta Key: The name of custom field to store value in.
  • Object Type: Whether this is post, user, term or other meta data. Use “post” for post meta fields.
  • Type: What data type WordPress should expect for meta key
    • Important: To use with the block plugin, use the same value as “meta_key” in your block plugin.
  • Show In REST: Exposes to REST API. Allows editing in block editor.
    • Important: You must enable this option for your block plugin to read and write the meta key.
  • Single: To allow one value per post, or many.
    • Important: You must enable this option for your block plugin to read and write the meta key properly.
Editing a meta field with Plugin Machine UI.

Click save and then finish creating your plugin. Download the development ZIP file and open it in your IDE.

Working With Your Block Plugins

The code for the blocks is inside the “blocks” directory. This is the same directory as block types go. There is one sub-directory per block. The block plugins use the WordPress scripts package for compilation.

The files added for the block are a basic start point for blocks.

These are the files you will find in each block directory:

  • init.php – This file registers the JavaScript and CSS for your block plugin. You can put other PHP code related to the block here.
  • index.js This file is used to create the block UI.

The index.js file has one setting, which should edit the value of the meta key that you chose.

The created code for a WordPress block editor sidebar.