WordPress：如何在文档侧边栏的模板面板中添加新组件？

当然可以！WordPress块编辑器的SlotFill系统支持在模板面板内添加TextControl或其他自定义元素，下面是具体实现方法：

核心思路 #

利用PluginDocumentSettingPanel这个SlotFill组件，它可以用来向文档设置区域（包括模板面板所在的侧边栏）插入自定义面板和控件。

代码示例 #

import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { TextControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

// 定义自定义控件组件
const TemplateCustomControl = () => {
    const [customText, setCustomText] = useState('');

    return (
        <PluginDocumentSettingPanel
            name="template-custom-control"
            title="自定义模板设置"
            className="template-custom-control-panel"
        >
            <TextControl
                label="自定义文本输入"
                value={customText}
                onChange={setCustomText}
                help="在这里输入和模板相关的自定义内容"
            />
        </PluginDocumentSettingPanel>
    );
};

// 注册为编辑器插件
registerPlugin('template-custom-control-plugin', {
    render: TemplateCustomControl,
});

关键说明 #

• PluginDocumentSettingPanel是官方提供的SlotFill组件，专门用于扩展文档设置侧边栏的面板
• 通过name属性设置唯一标识，title定义面板标题，自定义面板会出现在模板面板所在的侧边栏区域
• 面板内部可以嵌套任何WordPress官方组件，比如TextControl、下拉选择器、开关按钮等，满足不同需求
• 若想直接插入到现有模板面板内部，需要查看核心代码中对应面板的SlotFill名称，但更稳妥的方式是新增自定义面板，避免影响原有功能

内容的提问来源于stack exchange，提问作者Emily