How to add new panel under “document” in Gutenberg

Question

I am trying to add a new component panel under document tab, like categories, featured image etc.

Answer 1

add_meta_box will do the trick, but only if you add the context-argument with a value of 'side':

add_meta_box(
    'box-id-here',
    'Box Title Here',
    'createBoxHtml',
    'post',
    'side' ); // <-- this is important

Arrrh, two days for nothing!

---

Old answer

According to this tutorial, we can add our custom sidebar and fill it with customized form inputs.

Here is a working example in a React JSX version. This adds a meta field country:

const { registerPlugin } = wp.plugins;
const { PluginSidebar } = wp.editPost;
const { TextControl } = wp.components;
const { withSelect, withDispatch } = wp.data;

// Customized TextControl
const CustomMetaField = withDispatch( ( dispatch, props ) => {
    return {
        updateMetaValue: ( v ) => {
            dispatch( 'core/editor' ).editPost( {
                meta: {
                    [ props.metaFieldName ]: v
                }
            });
        }
    };
})( withSelect( ( select, props ) => {
    return {
        [ props.metaFieldName ]: select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ props.metaFieldName ]
    };
} )( ( props ) => (
     {
            props.updateMetaValue( v );
        }}
    /> )
) );


// Our custom sidebar
registerPlugin( 'custom-sidebar', {
    render() {
        return (
            
                

                    
                
            
        );
    },
} );

And in PHP, register the meta field in the init-hook:

register_meta( 'post', 'country', [
    'show_in_rest' => TRUE,
    'single' => TRUE,
    'type' => 'string'
] );

I know:

This is still not the required solution, but nearly.