Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Regression: Cover Block style changes in 5.9 break opacity for older cover blocks #38466

Closed
mrwweb opened this issue Feb 2, 2022 · 5 comments
Assignees
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release

Comments

@mrwweb
Copy link

mrwweb commented Feb 2, 2022

Description

I have a site using the standard cover block with no customizations. When updating to WordPress 5.9, the block's opacity setting does not work until resaving the page which forces the cover block's markup and classes to change.

Prior to WordPress 5.9, the has-background-dim-XX class was on the cover block container. That class was moved to a span that's a direct descendant of the parent div. These markup changes won't be applied to legacy content until a post is resaved, but it appears the styles that make old cover block opacity work were removed.

Solution: The has-background-dim-XX classes that work when applied to the Cover block's parent container should be left in core indefinitely for the purposes of backward compatibility.

Step-by-step reproduction instructions

  1. In WordPress 5.8.3 or earlier, create a cover block with an opacity other than 50% (so that one of the has-background-dim-XX classes are applied)
  2. Update to WordPress 5.9
  3. Cover block has 50% opacity
  4. Save the page
  5. Cover block markup is changed and custom opacity is reapplied

Screenshots, screen recording, code snippet

WordPress 5.8.3 (90% opacity, classes: wp-block-cover alignfull has-background-dim-90 has-palette-2-background-color has-background-dim has-parallax is-style-no-padding):
image

WordPress 5.9:
image

Environment info

  • WordPress 5.9
  • Themes Tested: Twenty Twenty One and theme.json child theme of Michelle

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

@mrwweb mrwweb changed the title Cover Block Changes in 5.9 Break Old Blocks Cover Block Changes in 5.9 Break Old Blocks with Opacity other than 50% Feb 2, 2022
@Mamaduka Mamaduka added [Block] Cover Affects the Cover Block - used to display content laid over a background image Needs Testing Needs further testing to be confirmed. [Type] Bug An existing feature does not function as intended and removed Needs Testing Needs further testing to be confirmed. labels Feb 3, 2022
@mrwweb mrwweb changed the title Cover Block Changes in 5.9 Break Old Blocks with Opacity other than 50% Regression: Cover Block style changes in 5.9 break opacity for older cover blocks Feb 3, 2022
@mrwweb
Copy link
Author

mrwweb commented Feb 3, 2022

A quick note that I've updated the issue a few times and have replicated the issue on a simpler install using the Twenty Twenty One theme.

@annezazu
Copy link
Contributor

annezazu commented Feb 3, 2022

Adding to the 5.9.x project board so it can be reviewed. Thank you for flagging!

@annezazu annezazu added the [Type] Regression Related to a regression in the latest release label Feb 3, 2022
@glendaviesnz glendaviesnz self-assigned this Feb 3, 2022
@glendaviesnz
Copy link
Contributor

This is fixed by #38362, which is merged and flagged for inclusion in 5.9.1

@annezazu
Copy link
Contributor

annezazu commented Feb 3, 2022

Ah ha! Just was about to come back through here after noticing your lovely PR. Thank you!

@glendaviesnz
Copy link
Contributor

An additional note for anyone waiting for this to go out in 5.9.1 - adding this to site custom CSS should fix the issue in the meantime.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release
Projects
None yet
Development

No branches or pull requests

4 participants