gutenbergdocs/reference-guides/slotfills/plugin-document-setting-panel.md

PluginDocumentSettingPanel

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

可用属性

• name string: 用于识别面板的字符串
• className string: 可选类名，将添加到侧边栏主体
• title string: 显示在侧边栏顶部的标题
• icon (string|Element): Dashicon 图标标识字符串或SVG WP元素

示例

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 等函数访问面板，请确保添加命名空间前缀。

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

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 函数从管理界面移除面板。

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