Using RichText Component to Make a Gutenberg Block Editable

Example of what we’re going to have by the end of this video lesson you can see on the screenshot below:

Setting up the Attributes

Each part of the block you want to make editable should have its attribute registered; that’s where the dynamic value will be stored. You can actually think of it as a meta key and value of a block (because WordPress custom fields are something we’re more familiar with).

Nowadays, we usually configure block attributes with the help of a block.json file. Before version 5.8 of WordPress, we usually did it with the help of the registerBlockType() function in JavaScript.

Example of what we need to add to the block.json file to make two parts of the block (I decided to choose a subscription form title and a button text) editable.

"attributes": {
	"heading": {
		"type": "string",
		"source": "html",
		"selector": "h3",
		"default": "Subscribe to my newsletter"
	},
	"buttonText": {
		"type": "string",
		"source": "text",
		"selector": "span",
		"default": "Subscribe"
	}
}

I think it would be great to highlight a couple of moments in the JSON code above.

• As you can see, we have two attributes here – heading and buttonText (you can use other attribute names if you want) – because we have two editable elements in our Gutenberg block (check the screenshot above if you forgot).
• Each of the two attributes has the following properties: type, source, selector, and default. I think it should be crystal clear here that default – is the default value of the attribute, type – the type of data that is stored by this specific attribute, source means whether an attribute can have HTML in it, selector is an HTML tag where we’re using it.

If you are not sure that everything is perfectly clear, please watch the video above.

RichText Component

Once the attributes are configured, we can add the RichText component to our block edit() and save() methods.

edit()

Now we have to replace static HTML tags (in our case, <h3> and <span> ) inside the edit() method with the <RichText> component.

import { 
	useBlockProps, 
	RichText,
} from '@wordpress/block-editor';

export default function Edit( { attributes, setAttributes } ) {

	const blockProps = useBlockProps();

	return(
		<div {...blockProps}>
			<RichText
				tagName="h3"
				value={ attributes.heading }
				allowedFormats={ [ 'core/italic' ] }
				onChange={ ( heading ) => setAttributes( { heading } ) }
				placeholder="Enter heading here..."
			/>
			<p>
				<span>Email address</span>
				<RichText
					tagName="span"
					value={ attributes.buttonText }
					allowedFormats={ [] }
					onChange={ ( buttonText ) => setAttributes( { buttonText } ) }
					placeholder="Button text..."
				/>
			</p>
		</div>
	)
}

Ok, let’s look at the RichText component parameters I used. tagName and placeholder should be clear, I guess, but what about the other ones?

save()

Nothing special here, we’re just using the RichText.Content property to display the content of our RichText component.

import { 
	useBlockProps, 
	RichText,
} from '@wordpress/block-editor';

export default function Save( { attributes } ) {
	return (
		<div {...useBlockProps.save()}>
			<RichText.Content tagName="h3" value={ attributes.heading } />
			<form>
				<input type="email" placeholder="Email address" />
				<RichText.Content tagName="button" value={ attributes.buttonText } />
			</form>
		</div>
	);
}

You can download the source files of this Gutenberg block using the link below:

Sorry, but you don’t have access to the source files. Sign in or buy the course.

Gutenberg Block Development

Misha Rudrastyh

Hey guys and welcome to my website. For more than 15 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X