Demo content cover block alignment not respected. Migration needed?

[ockham]

Carried over from #28404 (comment) and #28404 (comment):

---

I'm seeing one editor/frontend inconsistency with the demo content when using a theme that supports wide and full alignment (such as Twenty Twenty One). If I select the very first cover block and set its alignment to center, that setting is not respected on the frontend:

Editor:

Frontend:

---

The block has the alignwide className set when first loading it:

<!-- wp:cover {"url":"https://cldup.com/Fz-ASbo2s3.jpg","className":"alignwide"} -->
<div class="wp-block-cover has-background-dim alignwide"><img class="wp-block-cover__image-background" alt="" src="https://cldup.com/Fz-ASbo2s3.jpg" data-object-fit="cover"/><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">Of Mountains &amp; Printing Presses</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

Then, when I set the alignment to center:

<!-- wp:cover {"url":"https://cldup.com/Fz-ASbo2s3.jpg","align":"center","className":"alignwide"} -->
<div class="wp-block-cover aligncenter has-background-dim alignwide"><img class="wp-block-cover__image-background" alt="" src="https://cldup.com/Fz-ASbo2s3.jpg" data-object-fit="cover"/><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">Of Mountains &amp; Printing Presses</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

So now we have "align":"center", but the wide alignment is also kept in className.

---

The immediate fix is probably as easy as removing the alignwide className attribute, and replacing it with an "align":"wide" one:

gutenberg/post-content.php

Line 9 in 6f914fe

<!-- wp:cover {"url":"https://cldup.com/Fz-ASbo2s3.jpg","className":"alignwide"} -->

However, this might hint at an underlying problem: Shouldn't block migrations take care of that for us (upon loading in the editor)? 🤔

[ramonjd]

I tried to replicate this but it seems to have been fixed.

Could it have been addressed here? #32274

[kathrynwp]

I'm no longer able to replicate this with:

WordPress 6.0.1
Gutenberg 13.8.1 active or inactive
No other plugins active
Twenty Twenty-One 1.6

@ockham I'll go ahead and close this out, but if you are still experiencing the original issue, feel free to add a comment with additional details and I’ll be glad to reopen it.

[ockham]

Thanks for testing, @ramonjd and @kathrynwp!

I just tried again, and I'm afraid that I'm still seeing the issue 😕

This is with a local GB dev environment, using the GB demo content with TT1. Using the steps I posted in the issue description, the GB markup in the Code Editor starts with

<!-- wp:cover {"url":"https://cldup.com/Fz-ASbo2s3.jpg","dimRatio":50,"isDark":false,"align":"center","className":"alignwide"} -->
<div class="wp-block-cover aligncenter is-light alignwide">

(Note the conflicting "align":"center" and "className":"alignwide" attributes, and the resulting aligncenter and alignwide classes.)

[marko-srb]

I’ve experienced the same issue. When selecting ‘align center’ the image shall be narrowed, while it isn’t. Here’s a repetitive process recorded. Thought this may help.