Media & Text - image is stretched vertically on front end

[Sandstromer]

Description

In the Media & Text block the image is stretched vertically on the front end.

The image is not stretched in the editor as the .block-editor__container img CSS contains height: auto.

However on the front end height: auto is missing from the block styling: .wp-block-media-text__media img, .wp-block-media-text__media video

Step-by-step reproduction instructions

Add a Media & Text block
Select an image that with landscape dimensions (wider than the height)
Add enough text so that the text appears with a larger height than the image.
Leave the 'Crop image to fill entire column' option off.

View on front end and notice the image is stretched in the vertical.

Screenshots, screen recording, code snippet

Editor view:

Front end view:

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

[glendaviesnz]

I wasn't able to replicate this on WP 5.8.1 & Gutenberg 11.7 with TwentyTwentyOne or TwentyTwentyOne-Blocks themes:

@Sandstromer which version of Gutenberg and which theme are you using when you get this problem?

[Mamaduka]

I think the issue was fixed via #30092 and should be part of Gutenberg 11.8.

[Sandstromer]

@glendaviesnz - Gutenberg 11.7 and TT1-Blocks theme.

I don't see the issue with TwentyTwentyOne or some block themes such as Blockbase and Tove, as it they have their own img { height: auto; } CSS, but with a block theme that does not have this e.g. Twenty Twenty-Two or TT1-Blocks, the issue is present.

@Mamaduka - thank you for pointing out the PR. This will fix it so I will close this issue.