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

Question

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

Answer 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!