WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 5 months ago

Last modified 5 months 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 5 months 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
5 months ago

  • Milestone changed from Awaiting Review to 5.7

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


5 months ago

#3 @paaljoachim
5 months 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
5 months 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
5 months ago

  • Keywords needs-patch added

#5 @hellofromTonya
5 months ago

  • Keywords good-first-bug added

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


5 months ago

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


5 months 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
5 months 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 5 months ago by paaljoachim (previous) (diff)

#9 @ryelle
5 months 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
5 months 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
5 months ago

  • Keywords dev-reviewed added; dev-feedback removed

[50466] looks good to backport.

#12 @SergeyBiryukov
5 months 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.


5 months ago

Note: See TracTickets for help on using tickets.