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!