I'm creating a custom Gutenberg-Block with three attributes.
I set these attributes in the registerBlockType-function:
attributes: {
message: {
type: 'string',
source: 'html',
selector: 'div.content',
},
url: {
type: 'string',
source: 'text',
attribute: 'href',
selector: 'a.link',
},
bgImageId: {
type: 'string',
source: 'text',
attribute: 'src',
selector: 'img',
}
When saving I create the following HTML-Code which looks fine on the homepage:
export default function Save( { attributes, className } ) {
return(
<div className={ className }>
<a href={ attributes.url } className={ 'link' }>
<div className={ 'content' }>{ attributes.message }</div>
<div><img src= { attributes.bgImageId } /></div>
</a>
</div>
);
}
But after reloading the editor, I get multiple errors:
Block validation: Expected attribute `href` of value `o`, saw `k`
Block validation: Block validation failed for `custom/custom-blocks` (
Content generated by `save` function:
<div class="wp-block-custom-custom-blocks"><a href="o" class="link"><div class="content">o</div><div><img class="img"/></div></a></div>
Content retrieved from post body:
<div class="wp-block-custom-custom-blocks"><a href="k" class="link"><div class="content">o</div><div><img src="https://test.umana.ch/wp-content/uploads/image.png"/></div></a></div>
I've tried changing the attributes but nothing seems to work.