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
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.
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.
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:
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”.
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.
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:
- 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.