WordPress.org

Make WordPress Core

Opened 8 weeks ago

Closed 7 weeks ago

Last modified 7 weeks ago

#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 -->

https://i.imgur.com/mEoh17k.png

Attachments (1)

Cover-block-overlay-affects-Heading-background-color.2.gif (1.2 MB) - added by paaljoachim 8 weeks 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

Download all attachments as: .zip

Change History (14)

#1 @SergeyBiryukov
8 weeks ago

  • Milestone changed from Awaiting Review to 5.7

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


8 weeks ago

#3 @paaljoachim
8 weeks ago

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.

@paaljoachim
8 weeks 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

#4 @hellofromTonya
8 weeks ago

  • Keywords needs-patch added

#5 @hellofromTonya
8 weeks ago

  • Keywords good-first-bug added

This ticket was mentioned in Slack in #core-themes by hellofromtonya. View the logs.


8 weeks ago

This ticket was mentioned in PR #1060 on WordPress/wordpress-develop by kjellr.


8 weeks ago

  • 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

---

https://i0.wp.com/user-images.githubusercontent.com/1202812/109534313-36986f80-7a89-11eb-854e-cb3a67b31221.png|https://i0.wp.com/user-images.githubusercontent.com/1202812/109534323-39936000-7a89-11eb-8f59-d646635694b4.png

#8 @paaljoachim
8 weeks 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.

Last edited 8 weeks ago by paaljoachim (previous) (diff)

#9 @ryelle
8 weeks ago

  • Owner set to ryelle
  • Resolution set to fixed
  • Status changed from new to closed

In 50466:

Twenty Twenty-One: Correct inner container background color for Cover Blocks.

Adjust the 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.

Props dianeco, kjellr, paaljoachim.
Fixes #52676.

#10 @ryelle
8 weeks ago

  • Keywords commit dev-feedback added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport to the 5.7 branch.

#11 @SergeyBiryukov
7 weeks ago

  • Keywords dev-reviewed added; dev-feedback removed

[50466] looks good to backport.

#12 @SergeyBiryukov
7 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 50469:

Twenty Twenty-One: Correct inner container background color for Cover Blocks.

Adjust the 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.

Props dianeco, kjellr, paaljoachim.
Reviewed by ryelle, SergeyBiryukov.
Merges [50466] to the 5.7 branch.
Fixes #52676.

This ticket was mentioned in Slack in #core by monikarao. View the logs.


7 weeks ago

Note: See TracTickets for help on using tickets.