# PluginSidebar

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

## 示例

```jsx
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={ __( '我的 PluginSidebar' ) }
			icon={ 'smiley' }
		>
			<PanelBody>
				<h2>
					{ __( '这是 PluginSidebar 示例的标题。' ) }
				</h2>
				<p>
					{ __(
						'这是 PluginSidebar 示例的一些示例文本。'
					) }
				</p>
				<TextControl
					__nextHasNoMarginBottom
					__next40pxDefaultSize
					label={ __( '文本控件' ) }
					value={ text }
					onChange={ ( newText ) => setText( newText ) }
				/>
				<SelectControl
					label={ __( '选择控件' ) }
					value={ select }
					options={ [
						{ value: 'a', label: '选项 A' },
						{ value: 'b', label: '选项 B' },
						{ value: 'c', label: '选项 C' },
					] }
					onChange={ ( newSelect ) => setSelect( newSelect ) }
				/>
				<Button variant="primary">{ __( '主要按钮' ) } </Button>
			</PanelBody>
		</PluginSidebar>
	);
};

// 注册插件。
registerPlugin( 'plugin-sidebar-example', { render: PluginSidebarExample } );
```

## 位置

![PluginSidebar 示例展开图](https://developer.wordpress.org/files/2024/08/plugin-sidebar-example.png)