#52676 closed defect (bug) (fixed)
Twenty Twenty-One: In WP 5.7 RC, the Cover block's inner container wrongly inherits the background-color of its parent.
Reported by: | dianeco | Owned by: | ryelle |
---|---|---|---|
Milestone: | 5.7 | Priority: | normal |
Severity: | normal | Version: | 5.7 |
Component: | Bundled Theme | Keywords: | good-first-bug has-patch commit dev-reviewed |
Focuses: | css | Cc: |
Description
When the overlay color of the Cover block is set, or if the Cover block is inserted inside a group which has a background-color, the Cover’s inner container inherits the background color of its parent. It appears on the front-end and inside the block editor due to the new styles added for the next release:
.has-black-background-color[class] [class*=__inner-container] { --local--color-background: var(--global--color-black, #000); background-color: var(--local--color-background); }
To reproduce: Inside the block editor, paste the following code:
<!-- wp:cover {"url":"https://2021.wordpress.net/wp-content/uploads/2020/10/The-Harbor-at-Lorient-e1602621914908-1568x870.jpg","overlayColor":"black"} --> <div class="wp-block-cover has-black-background-color has-background-dim"><img class="wp-block-cover__image-background" alt="" src="https://2021.wordpress.net/wp-content/uploads/2020/10/The-Harbor-at-Lorient-e1602621914908-1568x870.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading --> <h2>Heading</h2> <!-- /wp:heading --></div></div> <!-- /wp:cover -->
Same issue when the cover is inside a group that has a background-color:
<!-- wp:group {"align":"full","backgroundColor":"purple"} --> <div class="wp-block-group alignfull has-purple-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:cover {"url":"https://2021.wordpress.net/wp-content/uploads/2020/10/The-Harbor-at-Lorient-e1602621914908-1568x870.jpg"} --> <div class="wp-block-cover has-background-dim"><img class="wp-block-cover__image-background" alt="" src="https://2021.wordpress.net/wp-content/uploads/2020/10/The-Harbor-at-Lorient-e1602621914908-1568x870.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading --> <h2>Heading</h2> <!-- /wp:heading --></div></div> <!-- /wp:cover --></div></div> <!-- /wp:group -->
Attachments (1)
Change History (14)
This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.
4 years ago
@
4 years ago
Clicking any open color to change Overlay color affects inner blocks. Clicking a custom color and selecting a color in the color picker screen does not affect inner blocks
This ticket was mentioned in Slack in #core-themes by hellofromtonya. View the logs.
4 years ago
This ticket was mentioned in PR #1060 on WordPress/wordpress-develop by kjellr.
4 years ago
#7
- Keywords has-patch added; needs-patch removed
Trac ticket: https://core.trac.wordpress.org/ticket/52676
Adjusts background color palette rules so they don't show up on inner containers when they're not supposed to:
- When an inner container block is present, it only applies them to direct children of the block with the background color assigned.
- Since the background color should only be applied to the Cover block's overlay, not to the inner container, it opts that specific block out of this rule.
Before|After
#8
@
4 years ago
Testing the Github PR/patch.
Localhost:8889
5.7 alpha
Twenty Twenty One
New page.
Added Cover block + image.
Added Heading block inside the Cover block.
Selected Cover block.
Changed Overlay by selecting one of the colors seen openly and then clicking Custom color to open the color picker screen. Tried with various colors in both.
These did not affect the Heading background color.
I also tested with a Group block.
Cover block inside and a Heading block.
This also worked fine.
It looks like the patch is working nicely.
#9
@
4 years ago
- Owner set to ryelle
- Resolution set to fixed
- Status changed from new to closed
In 50466:
#10
@
4 years ago
- Keywords commit dev-feedback added
- Resolution fixed deleted
- Status changed from closed to reopened
Reopening for backport to the 5.7 branch.
Testing using:
WordPress 5.7 RC1.
Only WordPress Beta Tester plugin activated.
Twenty Twenty One
Chrome
OSX 10.15.7
Added a Cover block with a background image.
Added a Heading inside the Cover block.
1-Cover block is selected change the Overlay color to another color using one of the colors openly seen.
Overlay color is added to the Cover block + as a color background to the Heading block.
Overlay color is added to all inner blocks added to the Cover block.
--
2-Click the Custom color (link) to open the color picker screen and change the Overlay color to a random color.
Overlay color is added to the Cover block. It does not affect the Heading block or any inner block.
Conclusion: Changing the Overlay color using one of the open colors will affect all inner block backgrounds.