0

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?

1 Answer 1

0

I tested both example from docs and your example. Both work, so docs example is not broken, as I previously assumed. Something else is the problem. Perhaps you started with one version of the block and then renamed something in code, or accidently added something. Enter code editor instead of visual editor in block editor options and check your block code. If that was an error, please edit original question with adding block code for future reference of all readers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.