How to add new panels to the existing gutenberg document sidebar?

Question

I try to add two new panels to the existing gutenberg document sidebar. One should contain a radio-button menu to set the height of the header image, and the other one a text-field to enter a subtitle for the page.

But because I do not want to use the outdated meta boxes technologie, there aren't hardly any tutorials how to accomplish this. I only found the following piece of code, but I have no idea how to shape it to my needs and where to put it ;) - My knowledge of coding is just not good enough, but I still need to implement this feature in my theme.

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

const PluginDocumentSettingPanelDemo = () => (
    <PluginDocumentSettingPanel
        name="custom-panel"
        title="Custom Panel"
        className="custom-panel"
    >
        Custom Panel Contents
    </PluginDocumentSettingPanel>
)
registerPlugin('plugin-document-setting-panel-demo', {
    render: PluginDocumentSettingPanelDemo
})

Do you maybe have a guess how to achieve my idea? Thanks for you support, and greetings from Austria! Samuel

Answer 1

First of all, register the meta fields, so you have where to save the values. This goes in your plugin file or functions.php.

register_post_meta('post', 'customname_meta_subtitle', array(
    'show_in_rest' => true,
    'type' => 'string',
    'single' => true
));

register_post_meta('post', 'customname_meta_header_height', array(
    'show_in_rest' => true,
    'type' => 'string',
    'single' => true
));

You can check the documentation. We are telling WordPress to create 2 new post meta fields, with keys customname_meta_subtitle and customname_meta_header_height, which we will use in the Gutenberg part.

For the ES code, you will need the following:

const { registerPlugin } = wp.plugins
const { PluginDocumentSettingPanel } = wp.editPost
const { RadioControl, TextControl } = wp.components
const { withState } = wp.compose
const { withSelect, withDispatch } = wp.data

let SubtitleControl = ({ subtitle, handleSubtitleChange }) => (
    <TextControl
        label="Set subtitle"
        value={subtitle}
        onChange={subtitle => handleSubtitleChange(subtitle)}
    />
);

SubtitleControl = withSelect(
    (select) => {
        return {
            subtitle: select('core/editor').getEditedPostAttribute('meta')['customname_meta_subtitle']
        }
    }
)(SubtitleControl);

SubtitleControl = withDispatch(
    (dispatch) => {
        return {
            handleSubtitleChange: (value) => {
                dispatch('core/editor').editPost({ meta: { customname_meta_subtitle: value } })
            }
        }
    }
)(SubtitleControl);

let HeaderImageHeightControl = ({ height, handleHeightChange }) => (
    <RadioControl
        label="Set image height"
        help="Set the height of the header image"
        selected={height}
        options={[
            { label: '100', value: '1' },
            { label: '200', value: '2' },
        ]}
        onChange={handleHeightChange}
    />
);

HeaderImageHeightControl = withSelect(
    (select) => {
        return {
            height: select('core/editor').getEditedPostAttribute('meta')['customname_meta_header_height']
        }
    }
)(HeaderImageHeightControl);

HeaderImageHeightControl = withDispatch(
    (dispatch) => {
        return {
            handleHeightChange: value => {
                dispatch('core/editor').editPost({ meta: { customname_meta_header_height: value } })
            }
        }
    }
)(HeaderImageHeightControl);

const PluginDocumentSettingPanelDemo = () => (
    <PluginDocumentSettingPanel
        name="custom-panel"
        title="Custom Panel"
        className="custom-panel"
    >
        <SubtitleControl />
        <HeaderImageHeightControl />
    </PluginDocumentSettingPanel>
)
registerPlugin('plugin-document-setting-panel-demo', {
    render: PluginDocumentSettingPanelDemo
})

Most of this code is described in the official WP tutorial, but feel free to ask if anything is unclear.

Finally, to use the new values, you can do something like this:

<h1><?php echo get_post_meta(get_the_ID(), 'customname_meta_subtitle')[0]; ?></h1>
<h1><?php echo get_post_meta(get_the_ID(), 'customname_meta_header_height')[0]; ?></h1>

This is to be used in the post template file, for the front-end visualization of the meta field info.

I hope this helps!