Block validation: Block validation failed - Custom Wordpress Gutenberg Block Fails In Editor when reloaded

admin管理员组

文章数量:1122832

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 guidance would be appreciated.

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 guidance would be appreciated.

• block-editor

Share Improve this question asked Mar 20, 2023 at 18:56 Mike SavMike Sav 14799 bronze badges 6

• 2 This may not be the root cause, but you all need to call the useBlockProps.save() on the outer element in your save.js file. – Welcher Commented Mar 20, 2023 at 19:04
• Thanks but that doesn't solve this issue... thanks anyway – Mike Sav Commented Mar 20, 2023 at 19:15
• 1 when you fix this, you'll immediatley run into the useBlockProps problem Welcher mentioned, so it is a problem and it does need to be fixed. Welcher is saying that you have more problems than you thought and offered a solution to one you didn't know you had – Tom J Nowell ♦ Commented Mar 20, 2023 at 19:49
• 1 also you mentioned declaring attributes in your package.json file, but package.json has nothing to do with block definitions, is this a mistake? I notice that you did not share your block registration and settings, only small snippets so it's difficult to tell, but it heavily implies your block is trying to use attributes that don't exist because you didn't register it properly – Tom J Nowell ♦ Commented Mar 20, 2023 at 19:51
• I ran npx @wordpress/create-block to create the block, I think I see my problem... I have been putting / declaring the attributes in the package.json and not the block.json file – Mike Sav Commented Mar 20, 2023 at 19:57

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 1

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! Bug thanks to @Tom J Nowell (https://wordpress.stackexchange.com/users/736/tom-j-nowell) for helping me realise!

本文标签： Block validation Block validation failedCustom Wordpress Gutenberg Block Fails In Editor when reloaded