PluginDocumentSettingPanel

This SlotFill allows registering a UI to edit Document settings.

Available Props

• name string: A string identifying the panel.
• className string: An optional class name added to the sidebar body.
• title string: Title displayed at the top of the sidebar.
• icon (string|Element): The Dashicon icon slug string, or an SVG WP element.

Example

import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/editor';

const PluginDocumentSettingPanelDemo = () => (
    <PluginDocumentSettingPanel
        name="custom-panel"
        title="Custom Panel"
        className="custom-panel"
    >
        Custom Panel Contents
    </PluginDocumentSettingPanel>
);

registerPlugin( 'plugin-document-setting-panel-demo', {
    render: PluginDocumentSettingPanelDemo,
    icon: 'palmtree',
} );

Accessing a panel programmatically

Core and custom panels can be accessed programmatically using their panel name. The core panel names are:

• Summary Panel: post-status
• Categories Panel: taxonomy-panel-category
• Tags Panel: taxonomy-panel-post_tag
• Featured Image Panel: featured-image
• Excerpt Panel: post-excerpt
• DiscussionPanel: discussion-panel

Custom panels are namespaced with the plugin name that was passed to registerPlugin.
In order to access the panels using function such as toggleEditorPanelOpened or toggleEditorPanelEnabled be sure to prepend the namespace.

To programmatically toggle panels, use the following:

import { useDispatch } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';

const Example = () => {
    const { toggleEditorPanelOpened } = useDispatch( editorStore );
    return (
        <Button
            variant="primary"
            onClick={ () => {
                // Toggle the Summary panel
                toggleEditorPanelOpened( 'post-status' );

                // Toggle the Custom Panel introduced in the example above.
                toggleEditorPanelOpened(
                    'plugin-document-setting-panel-demo/custom-panel'
                );
            } }
        >
            Toggle Panels
        </Button>
    );
};

It is also possible to remove panels from the admin using the removeEditorPanel function by passing the name of the registered panel.

import { useDispatch } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';

const Example = () => {
    const { removeEditorPanel } = useDispatch( editorStore );
    return (
        <Button
            variant="primary"
            onClick={ () => {
                // Remove the Featured Image panel.
                removeEditorPanel( 'featured-image' );

                // Remove the Custom Panel introduced in the example above.
                removeEditorPanel(
                    'plugin-document-setting-panel-demo/custom-panel'
                );
            } }
        >
            Toggle Panels
        </Button>
    );
};