Featured image: height set is not being inherited correctly on the frontend

[MaggieCabrera]

Description

This is a tricky one to find. A featured image block with a set height will show correctly in the editor but the frontend will display something different. There's a couple of reasons to this:

• the img tag is not getting the height applied to the featured image block wrapper
• the editor has a different markup than the frontend (the anchor link when the featured image is a link is missing in the editor but present in the frontend)

Step-by-step reproduction instructions

On empty theme, paste this code on a page:

<!-- wp:query {"queryId":33,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:columns {"backgroundColor":"cyan-bluish-gray"} -->
<div class="wp-block-columns has-cyan-bluish-gray-background-color has-background"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:post-title {"isLink":true,"fontSize":"x-large"} /-->

<!-- wp:post-excerpt {"fontSize":"large"} /--></div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:post-featured-image {"isLink":true,"height":"100%","align":"wide"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

Ensure that there's an image on the post you are displaying and the text forces the image to stretch.

Check the frontend, the image is not stretching there.

Screenshots, screen recording, code snippet

Editor:

Frontend:

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes