Fixed Media & Text Block - Image not rendered properly on frontend when inside stack

[Mayank-Tripathi32]

fixes #68609

What?

Fix image width issue for Media & Text block when used with image fill inside flex containers (Stack/Row).

Why?

When a Media & Text block with is-image-fill-element is placed inside a flex container (.is-layout-flex), the image width becomes zero on render despite working correctly in the editor. This causes the image to disappear on the frontend while remaining visible in the editor.

How?

Added an explicit width declaration for Media & Text blocks when they appear inside flex containers. The minimal CSS fix ensures the block takes full width of its container:

.wp-block-media-text.is-image-fill-element {
    width: 100%;
}

Testing Instructions

1. Create a new post or page
2. Add a Stack block (Group block with vertical flex layout)
3. Inside the Stack, insert a Media & Text block
4. Upload or select an image
5. In the sidebar settings, enable "Crop image to fill" option
6. Save and view the post/page
7. Verify that the image appears correctly and maintains its width on the frontend

Screenshot

[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: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>

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