Prevent Embed Block from Collapsing in Stack Block

[mrwweb]

Description

Follow up to #65741 / #73109. Potential fix in #65841?

Embeds with responsive aspect ratios collapse in stack blocks. A previous fix was made for Row blocks in #73109, but this does not resolve the issue in Stack blocks.

Thus far, the only solution I've found is to set width: 100% on the embed blocks, but there may be other solutions. It appears this was submitted as a PR in #65841.

Step-by-step reproduction instructions

1. Place below markup in editor
2. Observe that embeds in stack block are collapsed to 0x0

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:embed {"url":"https://www.youtube.com/watch?v=U8dcFhF0Dlk","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=U8dcFhF0Dlk
</div></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://www.youtube.com/watch?v=U8dcFhF0Dlk","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=U8dcFhF0Dlk
</div></figure>
<!-- /wp:embed --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:embed {"url":"https://www.youtube.com/watch?v=U8dcFhF0Dlk","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=U8dcFhF0Dlk
</div></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://www.youtube.com/watch?v=U8dcFhF0Dlk","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=U8dcFhF0Dlk
</div></figure>
<!-- /wp:embed --></div>
<!-- /wp:group -->

Screenshots, screen recording, code snippet

No response

Environment info

• WP 6.9.1
• Twenty Twenty Five and custom hybrid theme
• With Gutenberg 22.5.0 and without Gutenberg

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Mamaduka]

Applying align-self: stretch; also works, but it affects the embedded content as well in my testing.

[mrwweb]

Just flagging that aggressive testing should happen for this in Row, Stack, and Grid blocks, since they are all flex/grid blocks and styles that fix things in one context may break in another context.