古腾堡：始终在编辑栏中显示文本颜色选择器

时间：2021-11-02 作者：1NN

对于Gutenberg编辑器，是否有设置、更改背后的代码或任何其他方式（如有必要，可以使用插件，但我宁愿避免使用插件）来always 显示“；文本颜色“；编辑段落时的菜单项，就像；加粗（""E；斜体字“；和；插入链接？

如果没有，是否有方法配置键盘快捷键以打开选择器？

1 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

No, 在当前实现的格式库和FormatToolbar 组成部分

格式除了注册的顺序之外没有其他顺序，一旦设置，就不能更改，也不能影响核心格式。

请注意，此处正在将格式工具栏组件添加到内联工具栏控件槽中：

    // Render regular toolbar
    return (
        <BlockControls group="inline">
            <FormatToolbar />
        </BlockControls>
    );

https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/block-editor/src/components/rich-text/format-toolbar-container.js#L32-L37

在格式控件中，您可以看到文本颜色具有特殊的硬编码处理，以强制粗体/斜体等始终显示：

            { [ \'bold\', \'italic\', \'link\', \'text-color\' ].map( ( format ) => (
                <Slot
                    name={ `RichText.ToolbarControls.${ format }` }
                    key={ format }
                />
            ) ) }

https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/block-editor/src/components/rich-text/format-toolbar/index.js#L23

每个都有一个专用插槽，允许它们在活动时显示在预定义的位置。其余部分在下拉控件中渲染。没有在这些区域之间移动项目的标志或选项。

您可以尝试在RichText.ToolbarControls.text-color slot，但实现它需要对gutenberg内部结构非常熟练，将来可能会中断，并且如果应用格式，将导致重复的按钮。

您唯一剩下的希望就是注销text-color 格式化，然后用修改过的代码重新注册，以便始终显示：

    const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl;
    if ( ! hasColorsToChoose && ! isActive ) {
        return null;
    }

https://github.com/WordPress/gutenberg/blob/6452d448c03c5c40e8b29ea322ae20a99a136dca/packages/format-library/src/text-color/index.js#L82

请注意，注释表明这在代码中被视为临时解决方法，预计在将来的更新中会有所更改。还要注意，取消注册和重新注册可能会导致问题。E、 g.如果块正在使用中并使块编辑器崩溃，则在注销阶段注销和重新注册块将失败。

标签： block-editor   color-picker   小码农  

相关推荐