Fix duotone on parallax/repeated featured image cover blocks

[ajlende]

What?

Updates the cover block to render a <div> background when using featured images.

The best way to review this is to compare with the cover block's save function as the newly added code should mirror that when a featured image is used.

Why?

Fixes #50828

Cover blocks using featured images didn't pick up duotone because they weren't using an element for the featured image.

How?

Generate a <div> instead of setting background-image for cover blocks using featured images.

Testing Instructions

<!-- wp:query {"queryId":9,"query":{"perPage":12,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[],"format":[]}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:cover {"useFeaturedImage":true,"hasParallax":true,"dimRatio":0,"isUserOverlayColor":true,"isDark":false,"style":{"color":{"duotone":"var:preset|duotone|grayscale"}}} -->
<div class="wp-block-cover is-light has-parallax"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

1. Create some posts that have featured images.
2. Insert above content or add the following structure.
   • Query loop block
     • Cover block
       • Enable featured image
       • Enable parallax (also try repeat)
       • Enable duotone filter
3. Save and view the page to confirm that the featured images cover blocks show the duotone effect.

Testing Instructions for Keyboard

N/A

Screenshots or screencast

Before

After

[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: ajlende <ajlende@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: mrfoxtalbot <mrfoxtalbot@git.wordpress.org>
Co-authored-by: jordesign <jordesign@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: iamtakashi <iamtakashi@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: henriqueiamarino <iamarinoh@git.wordpress.org>

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

[ajlende]

Moved from L37-L45 above as both branches of the conditional need to insert content in the same place.

[jeryj]

Reviewed on a pairing call. Tested with various combinations of the cover block and confirmed this fixes the issue and aligns editor and frontend HTML output.

[github-actions]

I just cherry-picked this PR to the wp/6.7 branch to get it included in the next release: 1774792