How can I add custom metabox in document tab in gutenberg?

There is documentation about adding plugin sidebar here, but I'm looking for adding custom metabox in existing document tab.

How can I add custom metabox in document tab in gutenberg?

There is documentation about adding plugin sidebar here, but I'm looking for adding custom metabox in existing document tab.

• custom-field
• metabox
• block-editor

3 Answers 3

Here is the solution. Hope it will help you

const { registerPlugin } = wp.plugins;
const { PluginDocumentSettingPanel } = wp.editPost;

const MyDocumentSettingTest = () => (
        <PluginDocumentSettingPanel className="my-document-setting-plugin" title="My Panel">
            <p>My Document Setting Panel</p>
        </PluginDocumentSettingPanel>
    );

registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );

https://github/WordPress/gutenberg/blob/master/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js#L86

I took a look at Richard Tape's article which required you create your own Gutenberg React component (which is likely the best, most customisable way to do it). But I also have Advanced Custom Fields Pro installed (it has to be version 5.8.0-beta3). That provides a much easier method to add a custom meta field to the Gutenberg sidebar.

Create a new field in ACF Pro and in the Field group settings, ensure you have the following settings configured:

1. Style: Standard (WP Metabox)
2. Position: Side

This has worked for me ( added a Reading time field). Hope this helps.

https://wordpress/gutenberg/handbook/designers-developers/developers/backward-compatibility/meta-box/ and https://developer.wordpress/reference/functions/add_meta_box/

use $context = 'side'

Example:

add_meta_box( 'my-meta-box', 'My Meta Box', 'my_meta_box_callback',
    null, 'side', 'high',
    array(
        '__back_compat_meta_box' => true,
    )
);