[wp-trac] [WordPress Trac] #49138: Media Text Block CSS is-image-fill applied to all children

[WordPress Trac]

#49138: Media Text Block CSS is-image-fill applied to all children
-------------------------------+-----------------------------
 Reporter:  launchinteractive  |      Owner:  (none)
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  General            |    Version:  trunk
 Severity:  normal             |   Keywords:
  Focuses:                     |
-------------------------------+-----------------------------
 When adding an image to the content of the media and text block that has
 image-fill applied then it inherits the main media block styles.

 To reproduce
 Steps to reproduce the behavior:

 Create media Text Block
 Add an image
 Add an image to the content of the media text block
 Under Media & text settings turn on "Crop image to fill entire column"

 To fix this change this:

 {{{
 .wp-block-media-text.is-image-fill figure {
   height: 100%;
   min-height: 250px;
   background-size: cover; }

 .wp-block-media-text.is-image-fill figure > img {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0; }
 }}}
 to this:
 {{{
 .wp-block-media-text.is-image-fill > figure {
   height: 100%;
   min-height: 250px;
   background-size: cover; }

 .wp-block-media-text.is-image-fill > figure > img {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0; }
 }}}
 in wp-includes/css/dist/block-library/style.css

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