Embed Block: Fix collapse in Stack blocks

[Mustafabharmal]

What?

Closes #75592
Fixes embed blocks collapsing to 0x0 in Stack blocks (vertical flex layouts).

Why?

Follow-up to #73109, which fixed the issue for Row blocks but not Stack blocks.

Embeds with responsive aspect ratios collapse when placed inside Stack blocks (Group blocks with vertical flex orientation). While the previous fix added flex properties that work for horizontal layouts (Row blocks), vertical flex containers require an explicit width to prevent collapse while maintaining the aspect ratio.

How?

Adds a CSS rule targeting embeds inside vertical flex layouts:

.wp-block-group.is-layout-flex.is-vertical .wp-block-embed {
    width: 100%;
}

Testing Instructions

1. Copy the markup below into a post/page in the editor:

<!-- 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 -->

2. Verify that YouTube embeds display correctly in the editor (not collapsed to 0x0)
3. Publish the post/page
4. Verify that both embeds display correctly on the frontend

Screenshots or screencast

Before: Embeds collapse in Stack blocks

Editor	Frontend

After: Embeds display correctly maintaining their aspect ratio

Editor	Frontend

[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: Mustafabharmal <mustafabharmal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: mrwweb <mrwweb@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

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

[youknowriad]

Should this be

Suggested change

	.wp-block-group.is-layout-flex.is-vertical .wp-block-embed {
	.wp-block-group.is-layout-flex.is-vertical > .wp-block-embed {

To avoid breaking nested containers?

[Mustafabharmal]

Yeah, make sense added it in b15e725

[mrwweb]

Based on current discussion, I think the immediate descendant selector should be removed to target any depth of the embed.

Is .wp-block-group necessary in that selector?

[Mustafabharmal]

Good call! I've removed both the > and .wp-block-group from the selectors in commit 6355a63. The updated rules are now:

.is-layout-flex .wp-block-embed {
    flex: 1 1 0%;
    min-width: 0;
}

.is-layout-flex.is-vertical .wp-block-embed {
    width: 100%;
}

[youknowriad]

I noticed something, if I have an embed within a group within a stack, the embed is collapsed because the group width adapts to the content.

I'm honestly not sure what we should be doing here, I think the width of the group adapting to the content (when within a stack) is kind of expected, so I tend to think that even if the embed is collapsed, things are working as expected here. What do you think @mrwweb @mtias ?

[mrwweb]

@youknowriad That matches my experiences as well.

I tend to think that even if the embed is collapsed, things are working as expected here.

For someone with a deep knowledge of CSS, that is indeed the expected behavior, but I can't imagine that is actually the expected behavior for any editor, even those who know why it happens. Watching a block disappear in front of you in the editor feels like an unacceptable experience.

I know that in theory an embed might not be 100% width, but do people have examples of this? I can't actually think of any examples from my real work where that wouldn't be true.

One point in favor of .is-layout-flex.is-vertical .wp-block-embed { width: 100%: } is that max-width "beats" both max-width and width. So an embed with a style like max-width: 500px would still work to limit width, regardless of the selector specificity.

[youknowriad]

The problem with that style @mrwweb is that if you have a row within a stack which is totally valid designs, you might have all the embeds (YouTube videos for instance), on separate rows (due to with 100%) while you added a row explicitly to render them in a row.

So I'm actually wondering if a "min-width" could be a solution in the case of collapsed embeds here.