I am creating a custom block and just trying to get a RichText component working.
I'm using the code as it is shown in the block editor handbook here: https://developer.wordpress.org/block-editor/reference-guides/richtext/ yet it is still failing.
Here is the code for reference:
import { registerBlockType } from '@wordpress/blocks'
import { useBlockProps, RichText } from '@wordpress/block-editor'
registerBlockType('asasblocktheme/promobar', {
title: 'Promobar',
attributes: {
content: {
type: 'string',
source: 'html',
selector: 'h2',
},
},
edit({ attributes, setAttributes }) {
const blockProps = useBlockProps()
return (
<RichText
{...blockProps}
tagName="h2" // The tag here is the element output and editable in the admin
value={attributes.content} // Any existing content, either from the database or an attribute default
allowedFormats={['core/bold', 'core/italic']} // Allow the content to be made bold or italic, but do not allow other formatting options
onChange={(content) => setAttributes({ content })} // Store updated content as a block attribute
placeholder={__('Heading...')} // Display this text before any content has been added by the user
/>
)
},
save({ attributes }) {
const blockProps = useBlockProps.save()
return (
<RichText.Content
{...blockProps}
tagName="h2"
value={attributes.content}
/>
) // Saves <h2>Content added in the editor...</h2> to the database for frontend display
},
})
The only thing I have added/changed is the first argument in the registerBlockType function to match to my theme and added the title.
When I try to load this block, I get the following validation error:
blocks.min.js?ver=639e14271099dc3d85bf:10 Block validation: Block validation failed for `asasblocktheme/promobar` ({name: 'asasblocktheme/promobar', icon: {…}, keywords: Array(0), attributes: {…}, providesContext: {…}, …}).
Content generated by `save` function:
<h2 class="wp-block-asasblocktheme-promobar"></h2>
Content retrieved from post body:
As you can see, there is nothing retrieved from the post body.
What am I missing here?
