Consider enforcing iFrame max width of 100% on the front-end for block themes

[kjellr]

In the editor, iframes max out at 100% of their parents' width, thanks to this rule:

gutenberg/packages/edit-post/src/style.scss

Lines 99 to 101 in 21dfe87

	iframe {
	width: 100%;
	}

This rule isn't present in the front-end though, which means that iframe can extend beyond their container.

Here's an example using an iframe embed and Twenty Twenty-Two. (Yes, the issue can be avoided using the native YouTube embed block, but this is just an example):

<!-- wp:code -->
<pre class="wp-block-code"><code>
<iframe width="1120" height="630" src="https://www.youtube.com/embed/OpiH_P9aGhQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></code></pre>
<!-- /wp:code -->

Editor	Front-end

---

Originally reported in the Twenty Twenty-Two support forums.
Tested with WordPress 5.9, Twenty Twenty-Two v1.0.

[jasmussen]

Nice one! My first instinct was:

• Wow, the iframe works in the code block, should it? Seems like "Custom HTML" would be a better choice for it.
• Whether in Custom HTML or technically the code block, it seems like we should let as little CSS bleed in as possible, i.e. we shouldn't be adding the iframe rule.

So in the end, that feels like the task to solve: the inconsistency between editor and frontend. Even now, we have a similar iframe rule in the Embed block style.scss:

.wp-block-embed {
	...

	// Don't allow iframe to overflow it's container.
	iframe {
		max-width: 100%;
	}
}

So why it exists in-canvas like that, I'm not sure. It looks like I tried to remove this very iframe rule way back in the day in #18240, an eerily similar conversation to what we're having now, but that it was added back in #18287. It isn't entirely clear to me why it was brought back, but I'll push a PR to try and remove it again, see if that can help press the issue.

[jasmussen]

#38614 fixes it, but needs good testing so we don't repeat the need to revert again.

[catkit]

@jasmussen It seems this change has caused an issue when the Youtube embed block is inside a flex container (row block for example): because it doesn't have any width it will disappear. I have tested it and it happens both in the editor and in the frontend of the site. I think the solution might be to set .wp-block-embed width to 100%.

Steps to reproduce:

1. Add a row block.
2. Add a Youtube embed inside the row block.
3. Publish the post.

Link to bug video: https://www.awesomescreenshot.com/video/7843216?key=23a415ce8b176d8469ee398da9789591

[jasmussen]

Oh, thanks for the bug ereport @catkit! I can reproduce, but that actualy appears to be a separate issue, where the embed is lacking a minimum width, and therefore inside a flex container such as the Row block, it collapses to zero. I recall a similar issue from an instagram embed issue back in the day, but I don't know the best way to fix it, honestly.

[sophiegyo]

I encountered this today too - @jasmussen your suggestion to add a minimum width to the figure worked in my test, but that isn't something I can apply in this case unfortunately. Using columns should be an acceptable work-around, though.