Previously inserted Cover Blocks no longer display at their correct width in editor

[maddisondesigns]

Describe the bug
I have 3 Cover Blocks within a page. Each one had a different width set. One block was just shown as 'normal/default' width, one was set to Wide and the third was set to Full.

When I edit the page now under 5.3 RC3, all three blocks just show as normal width within the editor. When I view the page in the browser, they're shown at the correct widths.

When I view the code in the editor, you can see that they've been set to the three different widths (or more accurately, two have been set to different widths and one just left at its default width)

<!-- wp:cover {"url":"http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg","id":3757} -->
<div class="wp-block-cover has-background-dim" style="background-image:url(http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">This is a cover image title</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg","id":3757,"className":"alignwide"} -->
<div class="wp-block-cover has-background-dim alignwide" style="background-image:url(http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">This is a cover image title</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg","id":3757,"className":"alignfull"} -->
<div class="wp-block-cover has-background-dim alignfull" style="background-image:url(http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">This is a cover image title</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

When I view the change alignment option on the toolbar, none of the blocks show the widths that were originally selected.

To reproduce
Steps to reproduce the behavior:

1. View a page that contains a Cover Image block from a previous WP Version and see if the width displays correctly

Expected behavior
Blocks should display the same from version to version. I shouldn't have to reset the properties of a block every time WordPress updates.

Desktop (please complete the following information):

• OS: macOS Mojave 10.14.6
• Browser: Firefox Quantum 70.0.1 (64-bit)
• WP: 5.3-RC3-46619

[noisysocks]

This is a similar issue to #18417. The fix is probably to set supports.align for all of the deprecations in packages/block-library/src/cover/deprecated.js which is what #19522 did for the Gallery block.

[paaljoachim]

Hey @maddisondesigns Anthony.
Can you please retest and see if this is still a valid issue?
Thanks!

[maddisondesigns]

@paaljoachim This is still an issue.

Looking at one of my old pages...

This is what it looks like in the browser.

This is the Code View of the three Cover Blocks.

This is the normal width block in the Visual Editor.

This is the Cover Block set to Wide.

This is the Cover Block set to Full.

You can see that none of the options on the Block Toolbar (for Wide or Full alignment) are selected.

[paaljoachim]

Hey @maddisondesigns Anthony

I am using WordPress 5.7.1. Twenty Twenty One. Gutenberg plugin 10.4 RC.

This is what I am seeing:

Options included.

I am also seeing the same thing when the Gutenberg plugin is deactivated.

It seems like you are using an older version of WordPress based on the alignment drop down options I see.
Update and let us know if that takes care of it.

[maddisondesigns]

@paaljoachim I'm definitely using WP 5.7.1, and it's been 5.7.1 since 5.7.1 was released.

This is a brand new page that I've just created and inserted some Cover Image Blocks on

This is the same page from above

Both Block Toolbars are the same. Both pages are on the same site. The Purple image doesn't align properly in the editor. The (new) Blue image does. The purple image is on a page that was originally created back in 2018. The blue image is on a page I just created now.

This has always been an issue with Gutenberg. Old content doesn't work the same as new content, after blocks have been changed, which is a huge bug and incredibly frustrating. This has been bought up time and time again. I shouldn't have to go back and re-save every single page in my site, every time Gutenberg changes (which has been every single major release since 5.0), just to get it to work properly.

Gutenberg v10.4.1 is activated.

Edit...
If I change my theme to TwentyTwentyOne I get the same alignment options you're showing above.

My screenshots above and in my previous post are while using the TT1 Blocks Theme

[paaljoachim]

Ahhh Gotcha!
This is related to older content that is not working correctly with newer WordPress/Gutenberg versions.
I am not sure what to do with it.

Any thoughts Dan?
@talldan

[talldan]

I think the root cause was fixed by #28796. The comment #28796 (comment) describes exactly what has happened.

1. The cover block's HTML was changed, but a migration wasn't properly written for the alignment feature.
2. When a user loaded the post in the editor, most of the block's features are migrated to the new markup, but the alignment attribute was not migrated, instead it incorrectly becomes a custom class name (it should be visible under the advanced settings).

What seems to have happened then is that @maddisondesigns's post was saved with the invalid alignment. Unfortunately that means the fix in #28796 has no effect. It may be possible to go back to a previous revision, and then alignments will work again, but I understand you may also have changed other parts of the post that you don't want to revert.

An option would be to follow up with some further fixes, it would involve revisiting the deprecations modified in #28796 and writing a migration function that makes the alignment class name an attribute again.

[maddisondesigns]

@talldan Looking back through the revisions for that Post, I can see that it's been almost 2 years since that attribute was changed from "align":"wide" to "className":"alignwide" and "align":"full" to "className":"alignfull"

Every revision since then, those blocks have had that classname attribute. Shouldn't that mean that this fix should have worked?

Regardless, some migration fix needs to be created because you can't expect people to remove and then re-add blocks in all their old content, just to fix something that no longer works because Gutenberg changed.

[talldan]

Every revision since then, those blocks have had that classname attribute. Shouldn't that mean that this fix should have worked?

Would you be able to share the markup from that revision (the one with "align": "full") in a text snippet? That way I can test whether there's still an issue with that particular version of the block.

[maddisondesigns]

@talldan Here's the markup for those two revisions in that above screenshot.

2 years ago (24 May @ 13:56)
Before:

<!-- wp:cover {"url":"http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg","id":3757} -->
<div class="wp-block-cover has-background-dim" style="background-image:url(http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg)"><p class="wp-block-cover-text">This is a cover image title</p></div>
<!-- /wp:cover -->
<!-- wp:cover {"url":"http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg","id":3757,"align":"wide"} -->
<div class="wp-block-cover has-background-dim alignwide" style="background-image:url(http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg)"><p class="wp-block-cover-text">This is a cover image title</p></div>
<!-- /wp:cover -->
<!-- wp:cover {"url":"http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg","id":3757,"align":"full"} -->
<div class="wp-block-cover has-background-dim alignfull" style="background-image:url(http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg)"><p class="wp-block-cover-text">This is a cover image title</p></div>
<!-- /wp:cover -->

After:

<!-- wp:cover {"url":"http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg","id":3757} -->
<div class="wp-block-cover has-background-dim" style="background-image:url(http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p style="text-align:center" class="has-large-font-size">This is a cover image title</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
<!-- wp:cover {"url":"http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg","id":3757,"className":"alignwide"} -->
<div class="wp-block-cover has-background-dim alignwide" style="background-image:url(http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p style="text-align:center" class="has-large-font-size">This is a cover image title</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
<!-- wp:cover {"url":"http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg","id":3757,"className":"alignfull"} -->
<div class="wp-block-cover has-background-dim alignfull" style="background-image:url(http://dev.wordpress-test.com/wp-content/uploads/2018/10/mark-harpur-748500-unsplash.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p style="text-align:center" class="has-large-font-size">This is a cover image title</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

This is a local site so those image urls obviously wont resolve.

[mrfoxtalbot]

I have noticed this too. I have a full width video block on one of my sites ( https://porfiados.food.blog ) that gets changed to "No Alignment" every time I edit the page the block is:

This is the html for the block:

<!-- wp:video {"autoplay":true,"guid":"sIjHrotA","id":1507,"loop":true,"muted":true,"src":"https://porfiadosfood.files.wordpress.com/2021/01/yt1s.com-los-porfiados-de-lavapiecc81s-comida-hecha-a-mano_1080p.mp4","useAverageColor":false,"videoPressTracks":[],"videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress","className":"alignfull"} -->
<figure class="wp-block-video alignfull wp-block-embed is-type-video is-provider-videopress"><div class="wp-block-embed__wrapper">
https://videopress.com/v/sIjHrotA?resizeToParent=true&amp;cover=true&amp;autoPlay=true&amp;loop=true&amp;muted=true&amp;persistVolume=false&amp;preloadContent=metadata
</div></figure>
<!-- /wp:video -->

[carolinan]

Cover:
I am not able to reproduce this with 6.0.1 with and without Gutenberg trunk (13.7.0-rc.1):
I created a new post and opened the code editor. I copy pasted the before markup.
The blocks display with their correct assigned widths.

Video:

Block validation: Block validation failed for `core/video` (Object).

Content generated by `save` function:

<figure class="wp-block-video alignfull wp-block-embed is-type-video is-provider-videopress"></figure>

Content retrieved from post body:

<figure class="wp-block-video alignfull wp-block-embed is-type-video is-provider-videopress"><div class="wp-block-embed__wrapper">
https://videopress.com/v/sIjHrotA?resizeToParent=true&amp;cover=true&amp;autoPlay=true&amp;loop=true&amp;muted=true&amp;persistVolume=false&amp;preloadContent=metadata
</div></figure>

[carolinan]

@mrfoxtalbot Do you mind opening a separate issue for the video block?

[mrfoxtalbot]

I seem unable to reproduce this issue outside the specific example I shared. Please disregard my comment. Thank you @carolinan!