Add metabox to document tab in gutenberg

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Here is the solution. Hope it will help you

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

const MyDocumentSettingTest = () => (
        &ltPluginDocumentSettingPanel className="my-document-setting-plugin" title="My Panel"&gt
            &ltp>My Document Setting Panel&lt/p>
        &lt/PluginDocumentSettingPanel>
    );

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

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

Method 2

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.

Method 3

https://wordpress.org/gutenberg/handbook/designers-developers/developers/backward-compatibility/meta-box/
and
https://developer.wordpress.org/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,
    )
);

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0