Are you looking to add a new panel in the block editor sidebar as shown in the screenshot below?
The old style meta box with add_meta_box works fine in the block editor as well. However, since it’s a typical metabox, it’s sortable, draggable, and looks quite ugly in the block editor. We should adapt to the new approach of adding panels in the block editor using react JS.
PluginDocumentSettingPanel
PluginDocumentSettingPanel is used to add a new panel right there. Assuming you already have created a block or are familiar with the approach of using react JS in block editor. Let’s add the following code to the existing index.js
import { registerPlugin } from '@wordpress/plugins';
import Fields from './fields';
registerPlugin( 'my-plugin', {
render() {
return( <Fields /> );
}
} );
....
Other codes in index.js such as We’re going to create fields.js
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { TextControl } from '@wordpress/components';
export default function Fields () {
return ( <PluginDocumentSettingPanel title='My Plugin Settings' initialOpen="true">
<TextControl
label='Input Box'
value=''
help='Custom input box help text.'
/>
</PluginDocumentSettingPanel>
)
}This will create a new sidebar with the Input Box in there.
To change the default plugin icon shown in the screenshot above, you can simply pass the icon attribute to registerPlugin() the method above. The dash icons are supported and you can also insert your own custom icon as an SVG WP Element.
Note that the values in the newly created Input Box aren’t automaically saved. To save the values, we’ll need to modify fields.js to:
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { TextControl } from '@wordpress/components';
const Fields = ( { postType, postMeta, setPostMeta } ) => {
return ( <PluginDocumentSettingPanel title='My Plugin Settings' initialOpen="true">
<TextControl
label='Input Box'
value={ postMeta.my_input_box}
onChange={ ( value ) => setPostMeta( { my_input_box: value } ) }
help='Custom input box help text.'
/>
</PluginDocumentSettingPanel>
)
}
export default compose( [
withSelect( ( select ) => {
return {
postMeta: select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
postType: select( 'core/editor' ).getCurrentPostType(),
};
} ),
withDispatch( ( dispatch ) => {
return {
setPostMeta( newMeta ) {
dispatch( 'core/editor' ).editPost( { meta: newMeta } );
}
};
} )
] )( Fields );withSelect and withDispatch are the higher order components used to retrieve the post meta values and update the post meta values respectively. We’re saving our inputbox as a my_input_box postmeta.
We’ll also need to register the post meta via PHP file and it should have “show_in_rest” parameter true. This is because we’re getting and saving the post meta value ( the value of the input box) via the REST API.
register_post_meta(
'',
'my_input_box',
array(
'type' => 'string',
'single' => true,
'default' => '',
'show_in_rest' => true,
)
);That’s all. You can now add a new post meta in the block editor and save its value.
Limitation of PluginDocumentSettingPanel
The panels in the block editor are hard-coded. So, you can’t really move the newly created panel at the bottom or anywhere. It will always appear between Template and Last Revision panels if exists or between Status & Visibility and Permalinks panels.
I hope you liked this 🙂 Are you looking to create a a Custom Post Type with Gutenberg and REST API
Nice tutorial….
At the start of this you say. “Assuming you already have created a block or are familiar with the approach of using react JS in block editor. Let’s add the following code to the existing index.js”
What if we are not familiar, where does the index.js file go and does it need enqueue ing or anything else.
Probably the shortest, best explained article on the topic.
Thanks