有没有办法在 WordPress 古腾堡编辑器中添加新选项卡

Question

我对古腾堡完全陌生，我需要在设置部分添加一个新选项卡请检查此屏幕截图

我已经为古腾堡创建了一些块，但没有这方面的经验。我试过这段代码

import { TabPanel } from '@wordpress/components';

    const onSelect = ( tabName ) => {
        console.log( 'Selecting tab', tabName );
    };

    const MyTabPanel = () => (
        <TabPanel className="my-tab-panel"
            activeClass="active-tab"
            onSelect={ onSelect }
            tabs={ [
                {
                    name: 'tab1',
                    title: 'Tab 1',
                    className: 'tab-one',
                },
                {
                    name: 'tab2',
                    title: 'Tab 2',
                    className: 'tab-two',
                },
            ] }>
            {
                ( tab ) => <p>{ tab.title }</p>
            }
        </TabPanel>
    );

但没有帮助我。这里有人请帮助我。提前致谢

Answer 1

在您提供的屏幕截图中，您尝试添加选项卡的位置是设置标题（gutenberg/packages/edit-post/src/components/sidebar/settings-header），古腾堡中当前没有该插槽从中扩展的 API（尽管这可能可以完成，但最好不要干扰核心 UI）。

添加到管理 UI 的首选方法是使用提供的SlotFill来自定义内容，目前有：

• 插件块设置菜单项
• 插件文档设置面板
• 插件更多菜单项
• 插件发布发布面板
• 插件发布状态信息
• 插件预发布面板
• 插件侧边栏
• 插件侧边栏更多菜单项

PluginSidebar插槽对于添加特定于您的插件/块目的的自定义内容非常有用。要考虑的要点是您要添加的内容是否仅适用于您的块、帖子/页面作为一个整体，还是与插件有关的其他“全局”设置。

如果您的内容适用于整个帖子/页面，则PluginPostStatusInfo 插槽可能是添加到的好位置。您还可以添加出现在“文档”选项卡下方的您自己的面板。

如果内容是特定于块的，则您可以使用在“块”选项卡下添加自定义控件，这些控件会在选择块时根据上下文显示。这也是放置特定于块的元字段值或与块相关的颜色/显示选项的自定义控件的好地方。

WordPress 古腾堡官方文档还提供了有关块控件：块工具栏和设置侧栏的教程，其中介绍了在块中添加您自己的设置的一些常见场景。