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.


Panel Sidebar

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

How to add a new panel in the WordPress block editor sidebar
Tagged on:

Sanjeev Aryal

Don't bury your thoughts, put your vision into reality ~ Bob Marley.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest