reactjs - 有没有办法在 WordPress Gutenberg 编辑器中添加新标签

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 ) 目前在 Gutenberg API 中没有可扩展的插槽(尽管这可能会完成，但最好不要干扰核心 UI)。
添加到管理 UI 的首选方法是使用提供的 SlotFill对于自定义内容，目前有:

PluginBlockSettingsMenuItem

插件文档设置面板

PluginMoreMenuItem

PluginPostPublishPanel

PluginPostStatusInfo

PluginPrePublishPanel

插件侧边栏

PluginSidebarMoreMenuItem

PluginSidebar slot对于添加特定于您的插件/块目的的自定义内容很有用。需要考虑的主要问题是您希望添加的内容是否仅适用于您的区块、整个帖子/页面，还是其他与插件有关的“全局”设置。
如果您的内容适用于整个帖子/页面，PluginPostStatusInfo slot可能是添加的好位置。您也可以添加自己的 Panel出现在“文档”选项卡下方。
如果内容是特定于块的，那么您可以使用在“块”选项卡下添加自定义控件，在选择块时根据上下文显示。这也是特定于块的元字段值或与块相关的颜色/显示选项的自定义控件的好地方。
官方 WordPress Gutenberg 文档也有关于 Block Controls: Block Toolbar and Settings Sidebar 的教程。它介绍了在 Blocks 中添加您自己的设置的一些常见场景。