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.
useBlockProps.save()
on the outer element in yoursave.js
file.package.json
file, butpackage.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