Skip to content

Gutenberg Blocks: Media & Text "Crop to Fill Entire Column" not working in Safari and Chrome #35114

Open

Description

Steps to reproduce

Add a Media & Text block to a post or page, and enable the "Crop to Fill Entire Column" setting from the block options

What I expected

That the media in the block would be shown taking up the full dimensions of the column:

Image Cropped to Fill Column

What happened instead

The image didn't fill the full column:

Image Not Filling Column

Browser / OS version

macOS 10.14.6, Safari 12.1.2/Chrome 75.0.3770.142

Context / Source

Reported in #14353586-hc, was able to duplicate on my test site

Issue doesn't appear to happen in Firefox -- this CSS wasn't appearing to be added to the block in Chrome and Safari, but I was able to provide it to the user to add in the Customizer to resolve the issue:

/* hide image in the media & text block when image fill is selected */
.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;
}

/* make background full height on media & text block when image fill is selected */
.wp-block-media-text.is-image-fill figure {
	height: 100%;
	min-height: 250px;
	background-size: cover;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions