[wp-trac] [WordPress Trac] #55153: Cover block overlay messed up after WordPress 5.9 update

[WordPress Trac]

#55153: Cover block overlay messed up after WordPress 5.9 update
--------------------------+-----------------------------
 Reporter:  webmandesign  |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  General       |    Version:  5.9
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 After updating to WordPress 5.9, all Cover blocks used in my website
 content have wrong overlays. Basically, it looks like these were reset to
 Cover block default opacity (but only on front-end).

 After I click to edit the affected page/post and then immediately click
 "Update" button in editor without any changes to content, the Cover block
 starts to work on front-end too.

 It seems like the old Cover block HTML was not updated with WordPress 5.9
 update, only after I resaving the page/post.

 I've also tried to resave pages/posts using bulk edit, but it does not
 help. Seems like bulk edit does not trigger Gutenberg markup update. I
 have to open each affected page/post and resave it that way. This is
 really unfortunate as I have a lot of page across multiple websites...

 **Steps to reproduce the issue:**

 In WP 5.8.3:
 1. On test server/localhost install WordPress 5.8.3
 2. With default theme and everything, create a new page and name it
 "Test".
 3. Add a Cover block into the page content.
 4. Set the Cover block with these:
   - add a background image,
   - change the overlay color to red,
   - and set opacity to 90.
 5. Publish the page and check how it looks on front-end. (Remember the
 looks and/or take a screenshot for comparison.)
 6. Close the page edit screen and update WordPress to version 5.9.

 In WP 5.9:
 7. On the front-end of your website check our "Test" page now. You will
 see that Cover block overlay is still red, but the opacity is now default
 50% instead of our 90%.
 8. Go to "Test" page edit screen and do nothing, just click the "Update"
 button. (If the "Update" button is not enabled, change something, but do
 not change the actual Cover block. Change a page title, for example.)
 9. Now check the page on front-end and the issue should be fixed: the
 Cover block should look the same like on WordPress 5.8.3.

 **Expected behavior:**

 Ideally the block HTML update should be done during WordPress update (also
 for sites in multi-site setup).

 Alternatively the Cover block overlay styles should be backwards
 compatible, but looking at the HTML produced, this is not possible as the
 background color and background dim classes were moved from Cover block
 container to new inner element `span.wp-block-cover__gradient-background`.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/55153>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform