Cover block featured image full-width background is lower res than expected

[marissaexplores]

Done means:

• [ ] Using a full width cover block in a page template pulling in the page's featured image as a background should use more appropriate image than the 1024px width one currently used

Quick summary

When using the featured image option to add a background image to a cover block, it pulls the 1024px version of the image. This causes the image to be blurry if the cover block is being used to display a full-width image at the top of a page (ex: page titles and blog posts featured images).

The cover block only pulls the 1024px version when using the featured image option for the background image.

When adding an image directly from the media library, the background is not blurry.

Steps to reproduce

1. Go to Appearance > Editor > Templates > Pages
2. Add a cover block (make sure it's full-width and not inside a smaller column or group)
3. Go to Add media > Use Featured Image
4. Save your changes
5. Go to any page, add a featured image, and update the page
6. See the blurry image on the front end

What you expected to happen

I expect the full-size image to be used to prevent the image from being stretched to accommodate full-width designs.

What actually happened

The 1024px version of the image is used, which causes the image to be blurry when covering a width greater than 1024px.

Impact

Some (< 50%)

Available workarounds?

Go to Customizer > Additional CSS and update the Media Width field to a number equal to or larger than the currently featured image placeholder.

Platform (Simple and/or Atomic)

Simple

Logs or notes

I've tested on the TwentyTwentyThree and Assembler themes, and the issue occurred on both.

---

This issue does not seem to occur on Atomic sites.

---

Increasing the size of the large sized media (under Settings > Media) does not help. I updated the large size to 2000px, uploaded a new image to test, and found that the 1024px version was still being used.

[liviopv]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

TT4 on a Simple Site https://github.com/Automattic/wp-calypso/assets/14153300/03b3e79f-3b17-478e-ad11-1de04eff8997

📌 ACTIONS

• Triaged

[mrfoxtalbot]

This issue is coming from core and should be fixed upstream here:

• https://github.com/WordPress/gutenberg/issues/58819

[eduardozulian]

I'm aware this is a core thing, but we have another report in 8721784-zen

I suggested the same workaround internally discussed at p1724845257574709-slack-C029FM1EH: Go to Customizer > Additional CSS and update the Media Width field to a number that's equal to or larger than the current featured image placeholder.

This will only be available for Premium and the above plans.

cc @marissaexplores since I updated the Workaround section on your original report with this info. Hope you don't mind!

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 8721784-zen

[peterschimke]

This issue is coming from core and should be fixed upstream here:

• Cover Block: Missing Image Resolution options WordPress/gutenberg#58819

@mrfoxtalbot looks like this issue you linked was closed? Can we close this issue too?

[mrfoxtalbot]

Yup, this is fixed now. Thanks @peterschimke!