Embed Block: Set width for embed in group block

[brbrr]

What?

This PR sets a width: 100% CSS rule for embed blocks within group block.

Why?

Fixes: #65741
Video embeds (or even all embeds responsive: true attribute) are collapsing in both the editor and on the frontend when embedded (😉 ) into Row/Stack blocks.

While I haven't been able to identify the root cause precisely, it seems that because the embed block, when in responsive mode, rely on a container to define its height/width and the group block does not provide size related styles, embed collapses.

How?

By setting width: 100% for .wp-block-group .wp-block-embed.

Testing Instructions

1. In a block editor, add a Stack block
2. add a youtube or vimeo embed block into the Stack block
3. Check if the video preview is rendered correctly
4. Publish, check the content
5. Repeat 1-4 for Post, Page, and Side editor

Testing Instructions for Keyboard

N/A

Screenshots or screencast

Before:

After:

[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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @supernovia.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: supernovia.

Co-authored-by: brbrr <[email protected]>
Co-authored-by: youknowriad <[email protected]>

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

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @brbrr! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[youknowriad]

Thanks for creating this PR. Difficult problem indeed.

The root issue is that "flex" alignment (stack or row) doesn't define "widths" for its children "divs". They just use whatever width they like.

So when you insert a "responsive" embed (like YouTube embed), the width is supposed to be computed dynamically from the parent div, but since the parent div is width "0" by default (it adapts to its content in flex containers), the video collapses.

That said, I'm not really sure what's the right approach here. Setting 100% width doesn't seem like the right solution to me because when using a "row" you might want multiple items in a row. and even in a stack, you might to "center" the items or something instead of expanding the width.

If feels like the "Resize for smaller devices" toggle, shouldn't have an impact in this case maybe? I'm not sure though :)

cc @jasmussen any thoughts.

[jasmussen]

Yes, this comes up a lot. A past solution we explored was to define a min-width for embeds. I think that was even merged at one point, has this since been removed? One reason to potentially remove it is that some embeds are truly tiny. So a min-width also has to be tiny, and since we can't provide, and even if we could we couldn't maintain, specific widths for arbitrary embeds, it's really hard to find a universal min-width that works.

A min-width still does seem the best solution to me, at least for the responsive embeds. It just has to be really small, just enough to not collapse, let you select it, and then using the block inspector, set an explicit width.