PluginSidebarMoreMenuItem

此插槽用于允许从选项下拉菜单中打开 <PluginSidebar /> 面板。 当注册 <PluginSidebar /> 时，系统会自动使用 <PluginSidebar /> 的 title 属性注册一个 <PluginSidebarMoreMenuItem />，因此无需使用此插槽来创建菜单项。

示例

此示例展示如何自定义菜单项的文本，而不是使用 <PluginSidebar /> 标题提供的默认文本。

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

位置