此 SlotFill 允许注册用于编辑文档设置的 UI。

可用属性

  • name string: 用于标识面板的字符串。
  • className string: 可选，添加到侧边栏主体的类名。
  • title string: 显示在侧边栏顶部的标题。
  • icon (string|Element): Dashicon 图标 slug 字符串，或 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>
    );
};