Gutenberg block fails validation

Question

I'm trying to create a custom WordPress gutenberg block that allows me to select any image and text.

I can create the block using this code and I can see content on the frontend of the site however the block crashes if I view the block to edit it.

The console gives the following error: -

Block validation: Block validation failed for cgb/block-imagecta ( Object { name: "cgb/block-imagecta", icon: {…}, attributes: {…}, keywords: (3) […], save: save(), title: "imagecta - CGB Block", category: "common", edit: edit() } ).

Content generated by save function:

<div class="wp-block-cgb-block-imagecta"><div class="imageCtaBg"><img class="bg" alt="sergserge"/><p></p></div></div>

Content retrieved from post body:

<div class="wp-block-cgb-block-imagecta"><div class="imageCtaBg"><img class="bg" alt="sergserge"/><p>dxfbxdfbxdfbfb</p></div></div>

Is this related to the attributes at all?

/**
 * BLOCK: imagecta
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './editor.scss';
import './style.scss';

const {__} = wp.i18n; // Import __() from wp.i18n
const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
const {FormFileUpload} = wp.components;
const {RichText, MediaUpload} = wp.blockEditor;


registerBlockType('cgb/block-imagecta', {

    title: __('imagecta - CGB Block'),
    icon: 'shield',
    category: 'common',
    keywords: [
        __('imagecta — CGB Block'),
        __('CGB Example'),
        __('create-guten-block'),
    ],
    attributes: {
        content: {
            type: 'html',
            selector: '.captionText',
        },
        logo: {
            type: 'string',
            default: null,
        },
    },

    edit: (props) => {

        const {attributes: {content}, setAttributes} = props;


        function onImageSelect(imageObject) {
            setAttributes({
                logo: imageObject.sizes.full.url
            });
        }


        const onChangeContent = (newContent) => {
            setAttributes({content: newContent});
        };

        // Creates a <p class='wp-block-cgb-block-imagecta'></p>.
        return (
            <div className={props.className}>

                <MediaUpload
                    onSelect={onImageSelect}
                    type="image"
                    value={logo} // make sure you destructured backgroundImage from props.attributes!
                    render={({open}) => (
                        <button onClick={open}>
                            Upload Image!
                        </button>
                    )}
                />


                <div className='imageCtaBg'>

                <img src={logo} class="bg" alt={'sergserge'}/>


                    <RichText
                        tagName={'p'}
                        className='captionText'
                        onChange={onChangeContent}
                        value={content}
                        placeholder='Enter text...'
                    />

                </div>

            </div>
        );
    },

    save: (props) => {

        const {attributes: {content}, setAttributes} = props;

        return (
            <div className={props.className}>

                <div className={'imageCtaBg'}>
                    <img src={props.attributes.logo} className="bg" alt={'sergserge'}/>
                    <RichText.Content tagName={"p"} value={props.attributes.content}/>
                </div>

            </div>
        );
    },
});

Astrid Astrid · Accepted Answer · 2020-02-12T13:22:09

The issue was to do with the content attribute.

Instead of giving the richtext the class of 'captionText' I moved it do a wrapping div and changed the content attribute to the following: -

        content: {
            type: 'string',
            source:'html',
            selector: '.captionText',
        },

This finds the text inside of that div and allows me to update the block with no validation issues.

Gutenberg block fails validation

1 Answers