Update from WP6.0 to 6.1 breaks some blocks #45153

t-hamano · 2022-10-20T10:43:36Z

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&amp;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

The text was updated successfully, but these errors were encountered:

t-hamano · 2022-10-20T12:13:38Z

I have listed the blocks where __experimentalGetElementClassName is used in the save function. Some books are probably unbreakable thanks to existing deprecation.
I think we need to examine the possibility of breakage and and add deprecations for them.

Block	Element	Update to 6.1 breaks?	Needs to fix?	Merged
audio	caption	~~Probabl~~ not broken	No
button	button	~~Probably not broken ⚠️Needs Testing~~	Should be fixed separately: #45179
embed	caption	Yes	#45166	✅
file	button	Yes	#45159	✅
gallery	caption	Yes	#45173	✅
image	caption	~~Probably~~ not broken	No
table	caption	Yes	#45161	✅
video	caption	Yes	#45169	✅

t-hamano · 2022-10-20T13:12:25Z

I have confirmed that this problem is reproduced in table blocks with color and caption. It doesn't reproduce in tables with only captions.
Also, although it may not be related to this issue, the table with palette background color loses background color.

d85f204ad848b57df1f085a7c7e6e8c7.mp4

t-hamano · 2022-10-20T13:18:35Z

As for the button and image, I have tried different variations and the blocks seems to be unbreakable.

ockham · 2022-10-20T21:56:28Z

FWIW, someone just filed a Core ticket that sounds a bit like this issue. Could y'all have a look and decide if it's a duplicate or if some other blocks might be affected after all? 🙌

noisysocks · 2022-10-21T00:56:59Z

Another report of this here: https://wordpress.org/support/topic/getting-alot-of-console-errors-on-fresh-wordpress-install/

It looks like validation warnings for button are very common (1, 2, 3). Are we certain that the button block is not missing a deprecation?

glendaviesnz · 2022-10-21T01:15:00Z

@noisysocks those button ones look like there is new block content being loaded by an older version of Gutenberg, eg. the post content has the wp-element-button added here, but the save method isn't adding this, but I need to do some more testing to confirm this.

t-hamano · 2022-10-21T01:44:31Z

It looks like validation warnings for button are very common (1, #45179, 3). Are we certain that the button block is not missing a deprecation?

I think this is just the opposite case of what this issue is about. When patterns created in WP6.1 (i.e. with classes such as wp-element-XXX) are loaded in WP6.0, a console error occurs or the block is broken. In other words, the post-body expects to have a wp-element-xxx class, but the save function in WP6.0 does not expect it, so the block is broken.

It is not limited to button blocks, as seen in the console error this video shows. At the same time, you will also see the spacing preset markup mismatch error.

c7e332367f2751f32ce7c5d4da3f418d.mp4

glendaviesnz · 2022-10-21T03:56:47Z

The trouble with the invalid buttons I think is unrelated to this issue so I think we should deal with it separately over on this issue.

ockham · 2022-10-25T20:01:31Z

Since the fixes for Embed, File, Gallery, Table, and Video have all been merged (and backported to 6.1), and the Buttons issue seems unrelated, I'll close this PR.

Feel free to re-open -- or open a new PR -- if something is still broken!

lddd · 2022-11-03T14:58:01Z

Can't update to the German version of 6.1

Herunterladen der Aktualisierung von https://downloads.wordpress.org/release/de_DE/wordpress-6.1.zip…

Download fehlgeschlagen.: Not Found

Installation fehlgeschlagen.

melvinisken · 2022-11-03T20:12:40Z

It seems not to be solved. Today I run all updates and now my galleries look like in your screenshots. Here is the view in the editor and the page. I added my site info as well.

siteinfo.txt

ozolinaa · 2022-11-04T03:28:19Z

Also experiencing issues, should be re-opened

t-hamano · 2022-11-04T09:30:20Z

Thanks for the report.
This issue is about blocks "breaking" due to a lack of backward compatibility support.

@lddd

If you access the following URL directly, the data appears to be downloaded correctly.
https://downloads.wordpress.org/release/de_DE/wordpress-6.1.zip

If the problem you report is not resolved, WordPress Trac would be the appropriate place to report it.

@melvinisken

A similar problem was reported in #45423.
If it is not similar to this issue, it's a good idea tosubmit a new issue.

melvinisken · 2022-11-05T16:42:11Z

@melvinisken

A similar problem was reported in #45423. If it is not similar to this issue, it's a good idea tosubmit a new issue.

Thanks, I will check. Meanwhile I downgraded to 6.0.3 and everything is running smoothly again :-)

t-hamano added [Type] Bug An existing feature does not function as intended [Priority] High Used to indicate top priority items that need quick attention labels Oct 20, 2022

youknowriad mentioned this issue Oct 20, 2022

Global Styles: Add support for caption elements #41140

Merged

youknowriad added this to WordPress 6.1 Editor Tasks Oct 20, 2022

youknowriad moved this to Triage in WordPress 6.1 Editor Tasks Oct 20, 2022

youknowriad moved this from Triage to Todo in WordPress 6.1 Editor Tasks Oct 20, 2022

youknowriad mentioned this issue Oct 20, 2022

File Block: Makes the button an element button #41239

Merged

t-hamano mentioned this issue Oct 20, 2022

Table Block: Add a deprecation for the figcaption element class name #45161

Merged

glendaviesnz mentioned this issue Oct 20, 2022

Block patterns with 6.1 format markup throwing console errors in 6.0 sites #45179

Closed

t-hamano moved this from Todo to In Progress in WordPress 6.1 Editor Tasks Oct 21, 2022

ockham mentioned this issue Oct 25, 2022

Sync packages for WP 6.1 RC 3 WordPress/wordpress-develop#3524

Closed

ockham closed this as completed Oct 25, 2022

Repository owner moved this from In Progress to Done in WordPress 6.1 Editor Tasks Oct 25, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update from WP6.0 to 6.1 breaks some blocks #45153

Update from WP6.0 to 6.1 breaks some blocks #45153

t-hamano commented Oct 20, 2022 •

edited

Loading

t-hamano commented Oct 20, 2022 •

edited

Loading

t-hamano commented Oct 20, 2022

t-hamano commented Oct 20, 2022 •

edited

Loading

ockham commented Oct 20, 2022

noisysocks commented Oct 21, 2022

glendaviesnz commented Oct 21, 2022

t-hamano commented Oct 21, 2022

glendaviesnz commented Oct 21, 2022

ockham commented Oct 25, 2022

lddd commented Nov 3, 2022

melvinisken commented Nov 3, 2022

ozolinaa commented Nov 4, 2022

t-hamano commented Nov 4, 2022

melvinisken commented Nov 5, 2022

Update from WP6.0 to 6.1 breaks some blocks #45153

Update from WP6.0 to 6.1 breaks some blocks #45153

Comments

t-hamano commented Oct 20, 2022 • edited Loading

Description

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

t-hamano commented Oct 20, 2022 • edited Loading

t-hamano commented Oct 20, 2022

t-hamano commented Oct 20, 2022 • edited Loading

ockham commented Oct 20, 2022

noisysocks commented Oct 21, 2022

glendaviesnz commented Oct 21, 2022

t-hamano commented Oct 21, 2022

glendaviesnz commented Oct 21, 2022

ockham commented Oct 25, 2022

lddd commented Nov 3, 2022

melvinisken commented Nov 3, 2022

ozolinaa commented Nov 4, 2022

t-hamano commented Nov 4, 2022

melvinisken commented Nov 5, 2022

t-hamano commented Oct 20, 2022 •

edited

Loading

t-hamano commented Oct 20, 2022 •

edited

Loading

t-hamano commented Oct 20, 2022 •

edited

Loading