PluginDocumentSettingPanel Edit

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.

Top ↑

Example

import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';

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',
} );

Top ↑

Accessing a panel programmatically

Custom panels are namespaced with the plugin name that was passed to registerPlugin.
In order to access the panels using function such as wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelOpened or wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelEnabled be sure to prepend the namespace.

To programmatically toggle the custom panel added in the example above, use the following:

wp.data
    .dispatch( 'core/edit-post' )
    .toggleEditorPanelOpened(
        'plugin-document-setting-panel-demo/custom-panel'
    );