WordPress Gutenberg Block not working after reload

Viewed 347

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.

0 Answers
Related