WordPress.org

Make WordPress Core

Opened 11 months ago

Closed 4 weeks ago

#49138 closed defect (bug) (reported-upstream)

Media Text Block CSS is-image-fill applied to all children

Reported by: launchinteractive Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.4
Component: Editor Keywords:
Focuses: Cc:

Description

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

Change History (2)

#1 @SergeyBiryukov
11 months ago

  • Component changed from General to Editor

#2 @sabernhardt
4 weeks ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

Thanks for the report!

Closing as duplicate of this GitHub issue:
https://github.com/WordPress/gutenberg/issues/19009

Note: See TracTickets for help on using tickets.