PluginSidebarMoreMenuItem

In this article

This slot is used to allow the opening of a <PluginSidebar /> panel from the Options dropdown.
When a <PluginSidebar /> is registered, a <PluginSidebarMoreMenuItem /> is automatically registered using the title prop from the <PluginSidebar /> and so it’s not required to use this slot to create the menu item.

Example

This example shows how customize the text for the menu item instead of using the default text provided by the <PluginSidebar /> title.

import { __ } from '@wordpress/i18n';
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';
import {
    PanelBody,
    Button,
    TextControl,
    SelectControl,
} from '@wordpress/components';
import { registerPlugin } from '@wordpress/plugins';
import { useState } from '@wordpress/element';
import { image } from '@wordpress/icons';

const PluginSidebarMoreMenuItemTest = () => {
    const [ text, setText ] = useState( '' );
    const [ select, setSelect ] = useState( 'a' );
    return (
        <>
            <PluginSidebarMoreMenuItem target="sidebar-name" icon={ image }>
                { __( 'Custom Menu Item Text' ) }
            </PluginSidebarMoreMenuItem>
            <PluginSidebar
                name="sidebar-name"
                icon={ image }
                title="My Sidebar"
            >
                <PanelBody>
                    <h2>
                        { __(
                            'This is a heading for the PluginSidebar example.'
                        ) }
                    </h2>
                    <p>
                        { __(
                            'This is some example text for the PluginSidebar example.'
                        ) }
                    </p>
                    <TextControl
                        __nextHasNoMarginBottom
                        __next40pxDefaultSize
                        label={ __( 'Text Control' ) }
                        value={ text }
                        onChange={ ( newText ) => setText( newText ) }
                    />
                    <SelectControl
                        label={ __( 'Select Control' ) }
                        value={ select }
                        options={ [
                            { value: 'a', label: __( 'Option A' ) },
                            { value: 'b', label: __( 'Option B' ) },
                            { value: 'c', label: __( 'Option C' ) },
                        ] }
                        onChange={ ( newSelect ) => setSelect( newSelect ) }
                    />
                    <Button variant="primary">
                        { __( 'Primary Button' ) }{ ' ' }
                    </Button>
                </PanelBody>
            </PluginSidebar>
        </>
    );
};

registerPlugin( 'plugin-sidebar-more-menu-item-example', {
    render: PluginSidebarMoreMenuItemTest,
} );

Location

Interaction