Media & Text: When crop image to fill is enabled, the image in nested media & text blocks does not show

[carolinan]

Description

When the media & text block has an image (or featured image), and the setting "Crop image to fill" is enabled,
and another media & text block is added in the content area, the image of that second media & text block is hidden.

It is hidden by the CSS from the first (outer) media & text block:

.wp-block-media-text.is-image-fill .wp-block-media-text__media img {
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

Step-by-step reproduction instructions

Add a media and text block and select an image as the media.
In the block settings panel, enable "crop image to fill".
Add another media & text block inside. Try to select an image.
Confirm that the image is hidden in the editor and the front.

Screenshots, screen recording, code snippet

No response

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

[t-hamano]

I think this issue should be resolved by adding > to the relevant CSS selectors.

The CSS specificity will remain the same, so there should be no impact on backwards compatibility. This approach should also resolve #62047.

[narenin]

@t-hamano I am working on this.

[narenin]

@t-hamano I have fixed this in PR please check.