Update from WP6.0 to 6.1 breaks some blocks #45153
Description
Description
I found that some blocks were broken when I updated from 6.0 to 6.1-RC2.
These blocks have a figcaption element or button-like element, and it appears that the block validation is failing. I have at least the following blocks broken by the update:
- core/embed
- core/gallery
- core/video
- core/file
The browser console error indicates that the newly added classes(.wp-element-button, .wp-element-caption) don't match.
I suspect it is a backward compatibility issue.
Step-by-step reproduction instructions
- Clean install WordPress 6.0.X in your local environment.
- Insert the blocks raised above, enter the caption text and save.
Example HTML
<!-- wp:audio -->
<figure class="wp-block-audio"><audio controls src="https://download.samplelib.com/mp3/sample-3s.mp3"></audio><figcaption>Audi Block Caption Text</figcaption></figure>
<!-- /wp:audio -->
<!-- wp:embed {"url":"https://twitter.com/Twitter/status/1580661436132757506?s=20\u0026t=-T9FiPsukIHF9XJChmG6wA","type":"rich","providerNameSlug":"twitter","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
https://twitter.com/Twitter/status/1580661436132757506?s=20&t=-T9FiPsukIHF9XJChmG6wA
</div><figcaption>Embed Block Caption Text</figcaption></figure>
<!-- /wp:embed -->
<!-- wp:gallery {"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://live.staticflickr.com/4572/38004374914_6b686d708e_b.jpg" alt=""/><figcaption>Caption Text</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://live.staticflickr.com/4572/38004374914_6b686d708e_b.jpg" alt=""/><figcaption>Caption Text</figcaption></figure>
<!-- /wp:image --><figcaption class="blocks-gallery-caption">Gallery Block Caption Text</figcaption></figure>
<!-- /wp:gallery -->
<!-- wp:table -->
<figure class="wp-block-table"><table><tbody><tr><td>Cell</td><td>Cell</td></tr><tr><td>Cell</td><td>Cell</td></tr></tbody></table><figcaption>Table Block Caption Text</figcaption></figure>
<!-- /wp:table -->
<!-- wp:video -->
<figure class="wp-block-video"><video controls src="https://download.samplelib.com/mp4/sample-5s.mp4"></video><figcaption>Vide Block Caption Text</figcaption></figure>
<!-- /wp:video -->
<!-- wp:file {"id":7,"href":"http://wp61.wp/wp-content/uploads/2022/10/test1.jpg"} -->
<div class="wp-block-file"><a id="wp-block-file--media-8b25e306-3fa0-412b-bb3c-b3ef358e46d4" href="http://wp61.wp/wp-content/uploads/2022/10/test1.jpg">test1</a><a href="http://wp61.wp/wp-content/uploads/2022/10/test1.jpg" class="wp-block-file__button" download aria-describedby="wp-block-file--media-8b25e306-3fa0-412b-bb3c-b3ef358e46d4">Download</a></div>
<!-- /wp:file -->- Update to WordPress 6.1-RC2 with Beta Tester plugin, etc.
- Confirm that the block is broken when you open the previous post in the editor.
Screenshots, screen recording, code snippet
Screenshots in WordPress 6.0.3
Screenshots in WordPress 6.1-RC2
Browser console error sample
Environment info
- OS: Windows 11
- Clean setup in Local
- Theme: Twenty Twenty Two
- Update from 6.0.3 to 6.1 via Beta Tester plugin
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes