Wordpress Gutenberg RichText no color selection

Rytis Plečkauskas 0
Viewed 26

I was trying to add Color selection for text in RichText component, but it's not working.

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

I tried core/color also, no luck... Bold option appears, but no color, no special dropdown menu for it - nothing... If I don't use allowedFormats it shows me all the formats, but still no Color.

I'm here to see if it's any other option to do this without <InspectorControls>. Thanks.

gutenberg-blocks richtext colors jsx wordpress
1 Answers

You can also do this with the block.json file. You need to add color support in the block.json file to do this without using InspectorControls.

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

You need to add useBlockProps() to your RichText component for color support to edit and save files.

edit.js

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

save.js

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

Now you can set the text-color and background color of the RichText component.

Krunal Bhimajiyani0
Related