Wordpress Gutenberg RichText 无颜色选择

Question

我试图为 RichText 组件中的文本添加颜色选择，但它不起作用。

<RichText allowedFormats={['core/bold', 'core/text-color']} tagName="h5" value={props.attributes.title} onChange={handleTitleChange} />

我也尝试了core/color ，但没有运气......出现粗体选项，但没有颜色，没有特殊的下拉菜单 - 没有......如果我不使用allowedFormats它会显示所有格式，但仍然没有颜色。

我在这里看看是否有其他选择可以在没有<InspectorControls>的情况下执行此操作。 谢谢。

Answer 1

您也可以使用block.json文件执行此操作。 您需要在 block.json 文件中添加颜色支持才能在不使用 InspectorControls 的情况下执行此操作。

"supports": {
        "html":false,
        "color": {
            "background": true,
            "text": true,
            "gradients": true
        }
    },

您需要将useBlockProps()添加到 RichText 组件以支持颜色以编辑和保存文件。

编辑.js

import { useBlockProps,RichText } from "@wordpress/block-editor";
         <RichText
                {...useBlockProps()}
                onChange={handleTitleChange}
                value={props.attributes.title}
                placeholder={__("Your text")}
                tagName="h5"
                allowedFormats={["core/bold"]}
        />

保存.js

import { useBlockProps, RichText } from "@wordpress/block-editor";
            <RichText.Content
                {...useBlockProps.save()}
                tagName="h5"
                value={props.attributes.title}
            />

现在您可以设置 RichText 组件的文本颜色和背景颜色。