Site icon Hip-Hop Website Design and Development

Adding a size to core/image in an innerblocks breaks the save

I’ve a custom block which outputs a core/image block inside an innerblock. Everything works hunkydory until I attempt to sent a size to it. When I do, the block validation fails on re-edit:

Block validation: Block validation failed for `core/image` ({name: "core/image", icon: {…}, keywords: Array(3), providesContext: {…}, usesContext: Array(0), …}).

Content generated by `save` function:

<figure class="wp-block-image alignright" style="max-width:50%"><a href="https://.../"><img src="https://.../plank-banner.jpg" alt=""/></a></figure>

Content retrieved from post body:

<div class="wp-block-image"><figure class="alignright is-resized"><a href="https://..."><img src="https://.../plank-banner.jpg" alt="" class="wp-image-8687" width="300px"/></a></figure></div>

You can see the content retrieved from the body is quite different. This is the difference between the two innerblocks templates though:

Doesn’t work:

const MY_TEMPLATE = [
            [ 'core/heading', { content: heading } ],
            [ 'core/image', { id: mediaID, url: mediaURL, href: exerciseLink, align: "right", width: "300px" } ],
            [ 'core/paragraph', { content: strippedContent } ]
        ];

Works:

const MY_TEMPLATE = [
            [ 'core/heading', { content: heading } ],
            [ 'core/image', { id: mediaID, url: mediaURL, href: exerciseLink, align: "right" } ],
            [ 'core/paragraph', { content: strippedContent } ]
        ];

My save is simple:

save: function( props ) {
    
    const blockProps = useBlockProps.save();
    const { attributes } = props;
    
    return (
        <div { ...blockProps } key="sandcexercise">
            <InnerBlocks.Content />     
        </div>
    );

Sniffing around a bit, I did find this: https://github.com/WordPress/gutenberg/issues/21989 which feels related, but it’s way too complicated for me to get my head around!