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

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!

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.