PluginSidebar

此插槽允许向文章编辑器或站点编辑器屏幕的工具栏添加项目。 使用此插槽将在工具栏中添加一个图标，点击该图标会打开一个面板，其中包含包裹在 <PluginSidebar /> 组件中的项目。 此外，它还会创建一个 <PluginSidebarMoreMenuItem />，点击时可以从选项面板打开该面板。

示例

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

const PluginSidebarExample = () => {
	const [ text, setText ] = useState( '' );
	const [ select, setSelect ] = useState( 'a' );

	return (
		<PluginSidebar
			name="plugin-sidebar-example"
			title={ __( 'My PluginSidebar' ) }
			icon={ 'smiley' }
		>
			<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-example', { render: PluginSidebarExample } );

位置