Question 1856 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Block validation: Block validation failed – Custom WordPress Gutenberg Block Fails In Editor when reloaded

I am very new to WordPress and I am very new to Gutenberg Blocks. I have created some simple blocks using the npm Gutenburg generator. In my package.json file I have created the following attributes in my package.json file

"attributes": {
    "quote": {
      "type": "string"
    },
    "source": {
      "type": "string"
    }
  }

In my edit.js file I have the following block stucture

export default function Edit(props) {
    return (
            <div { ...useBlockProps() } className="testimonial">
                <div className="testimonial__wrapper">
                    <div className="testimonial__header">
                        <i className="testimonial__quote__left"></i>
                            <RichText
                                tagName="blockquote"
                                value={props.attributes.quote}
                                onChange={(content) => props.setAttributes({ quote: content })}
                                placeholder='Enter Quote'
                                keepPlaceholderOnFocus={true}
                            />
                        <i className="testimonial__quote__right"></i>
                            <RichText
                                tagName="figcaption"
                                value={props.attributes.source}
                                onChange={(content) => props.setAttributes({source: content })}
                                placeholder='Enter Quotee / Source'
                                keepPlaceholderOnFocus={true}
                            />
                    </div>
                </div>
            </div>
    );
}

and this is my save function in the save.js file

export default function save(props) {
    return (
        <div className="testimonial">
            <div className="testimonial__wrapper">
                <div className="testimonial__header">
                    <i className="testimonial__quote__left"></i>
                    <RichText.Content tagName="blockquote" value={ props.attributes.quote } />
                    <i className="testimonial__quote__right"></i>
                    <RichText.Content tagName="figcaption" value={ props.attributes.source } />
                </div>
            </div>
        </div>
    );
}

When I add my custom block into the editor it works great. Should I update and then view my page that includes the block it works! However should I refresh or reload the editor that contains my block I get the following error:

Block validation: Block validation failed for `create-block/einzweidinge-testimonial` ({name: 'create-block/einzweidinge-testimonial', icon: {…}, keywords: Array(0), attributes: {…}, providesContext: {…}, …}).

Content generated by `save` function:

<div class="testimonial"><div class="testimonial__wrapper"><div class="testimonial__header"><i class="testimonial__quote__left"></i><blockquote></blockquote><i class="testimonial__quote__right"></i><figcaption></figcaption></div></div></div>

Content retrieved from post body:

<div class="testimonial"><div class="testimonial__wrapper"><div class="testimonial__header"><i class="testimonial__quote__left"></i><blockquote>ffff</blockquote><i class="testimonial__quote__right"></i><figcaption>fffff</figcaption></div></div></div>

I have noticed that should I add a block and not input any data to the RichText components the validation error is not raised! I am not sure if this helps solve the issue but I also see the following warning in the console.

blocks.min.js?ver=69022aed79bfd45b3b1d:10 Block validation: Expected token of type `EndTag` ({type: 'EndTag', tagName: 'blockquote'}), instead saw `Chars` ({type: 'Chars', chars: 'ffff'}).

I am stumped here and unsure what I am doing wrong? I’ve been looking into this for a couple of hours! Any help or guidence would be appreciated.

** UPDATE **

When inspecting the error in the editor I have noticed that word press seems to add extra content – in this case p tags

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I finally worked out the issue, the problem was that I was defining my "attributes" object in the package.json file and not the block.json file!


  2. 0

    The issue is how your attributes are defined; a source and selector is required when using RichText to properly store and render the attributes.

    block.json

    {
    ...
    "attributes": {
        "quote": {
            "type": "string",
            "source": "html",
            "selector": "blockquote"
        },
        "source": {
            "type": "string",
            "source": "html",
            "selector": "figcaption"
        }
    }
}

    In your RichText component, the tagName (eg. blockquote) can be used as the selector for the attributes value. Both your save() and edit() functions are setup with RichText correctly. One note though, the property keepPlaceholderOnFocus on RichText will throw a warning in the console as its default is true and the property has since been removed from RichText. Once you have updated the attributes, your block should validate and work as expected.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search