Problem with figcaption class on image from createBlock - any ideas please?

[johnrisby]

Hi,

If I use createBlock (in a node app) to create a core/image, and then paste the results of serialize into a WordPress post in the editor, I'm getting an error as such:

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

Content generated by `save` function:

<figure class="wp-block-image"><img src="https://images.unsplash.com/photo-1499636136210-6f4ee915583e?ixlib=rb-1.2.1&amp;q=80&amp;cs=tinysrgb&amp;fm=jpg&amp;crop=entropy" alt=""/><figcaption>This is a caption</figcaption></figure>

Content retrieved from post body:

<figure class="wp-block-image"><img src="https://images.unsplash.com/photo-1499636136210-6f4ee915583e?ixlib=rb-1.2.1&amp;q=80&amp;cs=tinysrgb&amp;fm=jpg&amp;crop=entropy" alt=""/><figcaption class="wp-element-caption">This is a caption</figcaption></figure>

The issue seems to be the class that createBlock is adding to figcaption. If I post it with that removed, it works fine.

I'm creating the block like this

const myBlock = createBlock(
    'core/image', {
        url: "https://images.unsplash.com/photo-1499636136210-6f4ee915583e?ixlib=rb-1.2.1&q=80&cs=tinysrgb&fm=jpg&crop=entropy",
        caption: "This is a caption"
        }
    );
    
console.log(serialize(myBlock));

And using the output from serialize to paste into a post.

Any ideas why this is happening please and how I can avoid it? I've tried to find a way to call a function to replicate the block recovery but I'm struggling to find one I can access.

Thanks

[t-hamano]

Hi @johnrisby,

The issue seems to be the class that createBlock is adding to figcaption.

I think this is the right behavior.

By #41140, the wp-element-caption class has been added to the figcaption element of the image block. Since this change is included in WordPress 6.1, perhaps the version of WordPress you are pasting into is 6.0 or lower?