[wp-trac] [WordPress Trac] #52676: Twenty Twenty-One: In WP 5.7 RC, the Cover block's inner container wrongly inherits the background-color of its parent.

[WordPress Trac]

#52676: Twenty Twenty-One: In WP 5.7 RC, the Cover block's inner container wrongly
inherits the background-color of its parent.
---------------------------+-----------------------------
 Reporter:  dianeco        |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:  trunk
 Severity:  normal         |   Keywords:
  Focuses:  css            |
---------------------------+-----------------------------
 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 -->
 }}}

 [[Image(https://i.imgur.com/mEoh17k.png)]]

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