# PluginDocumentSettingPanel

此插槽填充允许注册用于编辑文档设置的用户界面。

## 可用属性

-   **name** `string`: 用于识别面板的字符串
-   **className** `string`: 可选类名，将添加到侧边栏主体
-   **title** `string`: 显示在侧边栏顶部的标题
-   **icon** `(string|Element)`: [Dashicon](https://developer.wordpress.org/resource/dashicons/) 图标标识字符串或SVG WP元素

## 示例

```js
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/editor';

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

## 以编程方式访问面板

核心面板和自定义面板可以使用其面板名称以编程方式访问。核心面板名称为：

-   摘要面板: `post-status`
-   分类目录面板: `taxonomy-panel-category`
-   标签面板: `taxonomy-panel-post_tag`
-   特色图片面板: `featured-image`
-   摘要面板: `post-excerpt`
-   讨论面板: `discussion-panel`

自定义面板使用传递给 `registerPlugin` 的插件名称进行命名空间划分。
为了使用 `toggleEditorPanelOpened` 或 `toggleEditorPanelEnabled` 等函数访问面板，请确保添加命名空间前缀。

要以编程方式切换面板，请使用以下代码：

```js
import { useDispatch } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';

const Example = () => {
	const { toggleEditorPanelOpened } = useDispatch( editorStore );
	return (
		<Button
			variant="primary"
			onClick={ () => {
				// 切换摘要面板
				toggleEditorPanelOpened( 'post-status' );

				// 切换上面示例中引入的自定义面板
				toggleEditorPanelOpened(
					'plugin-document-setting-panel-demo/custom-panel'
				);
			} }
		>
			切换面板
		</Button>
	);
};
```

也可以通过传递已注册面板的名称，使用 `removeEditorPanel` 函数从管理界面移除面板。

```js
import { useDispatch } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';

const Example = () => {
	const { removeEditorPanel } = useDispatch( editorStore );
	return (
		<Button
			variant="primary"
			onClick={ () => {
				// 移除特色图片面板
				removeEditorPanel( 'featured-image' );

				// 移除上面示例中引入的自定义面板
				removeEditorPanel(
					'plugin-document-setting-panel-demo/custom-panel'
				);
			} }
		>
			切换面板
		</Button>
	);
};
```