Media & Text block should not use background image

[tkapler]

What problem does this address?

Current image+text block uses css background image for the image. The problem is, that this way it is not possible to use loading of the images (https://web.dev/browser-level-image-lazy-loading/#can-css-background-images-take-advantage-of-the-loading-attribute) and so it highly affects the initial page loading and Google LCP metrics https://web.dev/lcp/#what-elements-are-considered

What is your proposed solution?

I believe the same visual functionality can be achieved today with CSS grid/flex and CSS object-fit property

and BTW it would be great if all the image/gallery blocks would have lazy loading true/false property to set (with some option for the defaults).

[t-hamano]

Hi @tkapler,

Thanks for the report.

Are you referring to Media & Text block? If so, the image is rendered as an img tag.

[stokesman]

Media & Text has the setting "Crop image to fill entire column". When it's on, the img tag is visually hidden and the figure gets a background image applied. I agree with @tkapler, this ought to be updated to use object-fit on the img instead.

[t-hamano]

I see, I had missed that 😅

The Meda & Text block has a Focal Point Picker, but I think it can be handled by object-fit and object-position, just as the Cover block is so implemented.

[joemcgill]

Additionally, when a background image is used, the original img element is still in the DOM, but is hidden using CSS, which can lead to two different files being loaded depending on how the srcset and sizes attributes on the hidden image are configured. See: https://github.com/WordPress/gutenberg/blob/wp/6.4/packages/block-library/src/media-text/style.scss#L89-L99

[nicomollet]

I added a PR two months ago, can someone take at look at it?

[sgomes]

This was fixed in #64981, now in trunk. Old markup should still work correctly using background-image, but new markup will use object-fit instead. Editing old markup should upgrade it to new markup automatically, as you're used to with other blocks that have gone through deprecations.

Please let me know if you come across any bugs!