Hero Image Prerendering needs to be updated to account for Cover Block using img element in WP 5.7

[westonruter]

Bug Description

WordPress 5.7 the Cover block now makes use of a regular img element instead of a background-image. See dev note:

As of #25171, the cover block now uses an img element instead of using CSS background-image for images that are not using fixed or repeated backgrounds. This means that, when rendering the post, a srcset attribute will be applied with the various generated image sizes, saving bandwidth by loading smaller images when possible.

This impacts the DetermineHeroImages transformer which I recall was built to account for background images only. Right now I see a cover block's wrapper div is getting the data-hero attribute as opposed to the contained amp-img:

<div class="wp-block-cover has-background-dim" data-hero="">
	<amp-img width="1000" height="288" class="wp-block-cover__image-background wp-image-2282 amp-wp-enforced-sizes i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" alt="" src="https://wordpressdev.lndo.site/content/uploads/2021/01/cropped-PXL_20210109_000549998.MP_-1-scaled-4.jpg" data-object-fit="cover" srcset="https://wordpressdev.lndo.site/content/uploads/2021/01/cropped-PXL_20210109_000549998.MP_-1-scaled-4.jpg 1000w, https://wordpressdev.lndo.site/content/uploads/2021/01/cropped-PXL_20210109_000549998.MP_-1-scaled-4-300x86.jpg 300w, https://wordpressdev.lndo.site/content/uploads/2021/01/cropped-PXL_20210109_000549998.MP_-1-scaled-4-768x221.jpg 768w, https://wordpressdev.lndo.site/content/uploads/2021/01/cropped-PXL_20210109_000549998.MP_-1-scaled-4-500x144.jpg 500w" sizes="(max-width: 1000px) 100vw, 1000px" layout="intrinsic" disable-inline-width="" i-amphtml-layout="intrinsic">
		<i-amphtml-sizer class="i-amphtml-sizer">
			<img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI4OCIgd2lkdGg9IjEwMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+">
		</i-amphtml-sizer>
		<noscript>
			<img loading="lazy" width="1000" height="288" class="wp-block-cover__image-background wp-image-2282" alt="" src="https://wordpressdev.lndo.site/content/uploads/2021/01/cropped-PXL_20210109_000549998.MP_-1-scaled-4.jpg" srcset="https://wordpressdev.lndo.site/content/uploads/2021/01/cropped-PXL_20210109_000549998.MP_-1-scaled-4.jpg 1000w, https://wordpressdev.lndo.site/content/uploads/2021/01/cropped-PXL_20210109_000549998.MP_-1-scaled-4-300x86.jpg 300w, https://wordpressdev.lndo.site/content/uploads/2021/01/cropped-PXL_20210109_000549998.MP_-1-scaled-4-768x221.jpg 768w, https://wordpressdev.lndo.site/content/uploads/2021/01/cropped-PXL_20210109_000549998.MP_-1-scaled-4-500x144.jpg 500w" sizes="(max-width: 1000px) 100vw, 1000px">
		</noscript>
	</amp-img>
	<div class="wp-block-cover__inner-container">
		<p class="has-text-align-center has-large-font-size">Clouds!</p>
	</div>
</div>

The XPath is selecting the wrapper div rather than the .wp-block-cover__image-background element:

amp-wp/src/Transformer/DetermineHeroImages.php

Lines 54 to 59 in 7429a18

	/**
	* XPath query to find the cover blocks.
	*
	* @var string
	*/
	const COVER_BLOCKS_XPATH_QUERY = ".//*[ contains( concat( ' ', normalize-space( @class ), ' ' ), ' wp-block-cover ' ) ][ not( @data-hero ) ]";

Expected Behaviour

The amp-img in a Cover block should get the data-hero attribute.

Steps to reproduce

1. Add a Cover block in WP 5.7-RC1
2. View the AMP page
3. Notice the data-hero attribute is not added to the amp-img in the Cover block.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[westonruter]

QA Passed

In Twenty Twenty, I added a Cover block and added an image. The image gets prerendered with SSR: