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.
CodePudding user response:
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.