时间戳

首页 > 解决方案 > 有没有办法在 WordPress Gutenberg 编辑器中添加新标签

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

问题描述

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

在此处输入图像描述

我为 Gutenberg 创建了一些积木，但没有这方面的经验。我试过这段代码

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

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

标签： reactjswordpresswordpress-gutenberggutenberg-blockscreate-guten-block

解决方案

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

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

  • PluginBlockSettingsMenuItem
  • 插件文档设置面板
  • 插件更多菜单项
  • 插件发布发布面板
  • PluginPostStatusInfo
  • 插件PrePublishPanel
  • 插件侧边栏
  • PluginSidebarMoreMenuItem

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

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

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

官方的 WordPress Gutenberg 文档还有一个关于块控制的教程：块工具栏和设置侧边栏，其中介绍了在块中添加自己的设置的一些常见场景。

推荐阅读