Cover block: add explicit sizes attribute to prevent blurry background image

[adithya-naik]

What?

Solves : #77387

Added sizes="100vw" to the <img> element in the Cover block's save.js, and added a corresponding v15 deprecation entry in deprecated.js to maintain backward compatibility.

Why?

The Cover block uses object-fit: cover on its background image, which means the browser crops the image based on both width and height. However, the browser selects which image to load from the srcset using the sizes attribute, which by default was being set to sizes="auto" by WordPress's wp_filter_content_tags().

sizes="auto" causes the browser to use only the rendered width of the element to pick an image — completely ignoring height. This leads to the wrong (too small) image being selected when the Cover block is tall but narrow, resulting in a blurry or pixelated background.

Example scenario that triggers the bug:

• Cover block placed inside a narrow column
• min-height: 600px set on the block
• Wide landscape image used (e.g. 2400×600px)
  What happens:
• Rendered container: 300 × 600
• Image loaded by browser: 768 × 192 ← wrong, too small
• Image actually needed: 2400 × 600
  The image appears blurry because object-fit: cover zooms in on the small image to fill the tall container.

Root cause:

The browser picks image size based on width only, but object-fit: cover requires a large enough image to cover the full height too. Since no sizes attribute was set in the block's saved output, WordPress automatically added sizes="auto", which doesn't account for height-based cropping.

How?

By explicitly setting sizes="100vw" on the <img> tag in save.js, WordPress no longer overrides it with sizes="auto". The browser then assumes the image could be as wide as the full viewport and loads an appropriately large image.

A v15 deprecation was added in deprecated.js that exactly mirrors the previous save.js output (without sizes="100vw"), ensuring existing blocks saved without this attribute continue to work without validation errors.

Testing Instructions

1. Create a new post or page
2. Add a Cover block
3. Upload or select a wide landscape image (e.g. 2400×600px)
4. Place the Cover block inside a narrow Columns block (one column)
5. Set min-height: 600px on the Cover block
6. Save and view the post on the frontend
7. Open browser DevTools → Network tab → filter by Img
8. Reload the page and check which image file is loaded
   Before fix: A small image (e.g. 768px wide) is loaded, image appears blurry

After fix: A large image (e.g. 2400px wide) is loaded, image appears sharp

Changes

File	Change
packages/block-library/src/cover/save.js	Added sizes="100vw" to the <img> element
packages/block-library/src/cover/deprecated.js	Added v15 deprecation representing the previous save output

---

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: adithya-naik <adithyanaik@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.