WP 5.7 Cover Blocks not displaying correctly with webp/picture tags enabled

[iCaspar]

Before submitting an issue please check that you’ve completed the following steps:

• [x] Made sure you’re on the latest version
• [x] Used the search feature to ensure that the bug hasn’t been reported before

Describe the bug Reported on the WP Plugin Support (🎩-tip to Michael Bourne).

... the new WP 5.7 update has changed cover blocks to use an image element as the background. With webp enabled using <picture> tags, the display of these images is incorrect.

Reproduced locally, see example screenshot:

To Reproduce Steps to reproduce the behavior:

1. In any post using the WP 5.7 Cover Block, add an image and text.
2. Save Imagify settings to "Create Webp" images > "Display images in webp format" and "Use <picture> tags".
3. View the incorrect display on the page.

Expected behavior Webp images in the new Cover Block element should display as a completely covered background behind the text.

Backlog Grooming (for WP Media dev team use only)

• [x] Reproduce the problem -- Reproduced locally, See Screenshot
• [x] Identify the root cause -- Imagify does not add the correct CSS for the cover image to display properly.
• [x] Scope a solution -- Image will display properly with additional CSS. Mr. Bourne's solution pasted here as example of working CSS:

.wp-block-cover-image picture.wp-block-coverimage-background, .wp-block-cover picture.wp-block-coverimage-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 0; width: 100%; height: 100%; } .wp-block-cover-image picture.wp-block-coverimage-background > img, .wp-block-cover picture.wp-block-coverimage-background > img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 0; width: 100%; height: 100%; max-width: none; max-height: none; -o-object-fit: cover; object-fit: cover; outline: none; border: none; box-shadow: none; }

That said, currently, Imagify does not output styles on the front end, leaving themes to do the styling. We will need to explore whether we want to provide some block styling in this instance, and if so, provide for rendering styles on the front end.

- [ ] Estimate the effort

[michaelbourne]

I've created a PR to address this without additional CSS.

[michaelbourne]

Do you have an ETA for 1.9.15?

[remyperona]

@michaelbourne Current plan is to have this version available mid-July. Our team has been busy on another product lately, but we want to make sure we have this new version before WP 5.8 release.

Thank you for your patience 🙏🏼