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

编程问答 2022-06-07

问题描述

我对古腾堡（Gutenberg）完全陌生，需要在设置部分添加新标签，请检查此屏幕截图

enter image description here

我为古腾堡创建了一些街区，但没有经验。我尝试了这段代码

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

但是没有帮助我。这里的任何人请帮助我。 预先感谢

解决方法

在您提供的屏幕截图中，您试图添加标签的位置是“设置标题” （gutenberg/packages/edit-post/src/components/sidebar/settings-header）当前在Gutenberg API中没有扩展的插槽（尽管可以这样做，但最好不要干扰核心UI ）。

添加到管理界面的首选方法是将提供的SlotFill用于自定义内容，目前有：

  • PluginBlockSettingsMenuItem
  • PluginDocumentSettingPanel
  • PluginMoreMenuItem
  • PluginPostPublishPanel
  • PluginPostStatusInfo
  • PluginPrePublishPanel
  • PluginSidebar
  • PluginSidebarMoreMenuItem

PluginSidebar slot对于添加特定于插件/块目的自定义内容很有用。要考虑的主要点是，您希望添加的内容是仅应用于块，整个帖子/页面还是与插件相关的其他“全局”设置。

如果您的内容适用于整个帖子/页面，则PluginPostStatusInfo slot可能是一个不错的添加位置。您也可以添加自己的Panel，该标签会显示在“文档”标签下。

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

WordPress的官方古登堡文档也有一个关于Block Controls: Block Toolbar and Settings Sidebar的教程，其中介绍了一些常见的场景，可以在Blocks中添加自己的设置。

create-guten-blockgutenberg-blocksreactjsreactjsreactjsreactjswordpresswordpresswordpress-gutenberg