Block library applying width of 100% to iframe

[jeremeylduvall]

In 5.3, there's some styling at wp-includes/css/dist/block-library/style.css that sets the width for iframe elements to 100%. You can see it here:

​https://github.com/WordPress/WordPress/blob/5.3-branch/wp-includes/css/dist/block-library/style.css#L1536

It looks like this may result from this commit to Gutenberg:

​https://github.com/WordPress/gutenberg/commit/5430dced1e3594ca28f5a9c829aa9baac8905e27#diff-fded095b4f7622cd5e81d8193bf2f4b4R162

Should this be set to max-width? The width: 100% setting can cause issues with existing iframes (ad units, for example).

[jeremeylduvall]

cc @joen for input as I believe you authored the original Gutenberg commit referred to above.

[Joen]

Created ​https://github.com/WordPress/gutenberg/pull/18240 to explore a fix for this.

[david.binda]

I've been looking into this, and the issue of an extra iframe { width: 100%; } affects iframes which are supposed to have it's width set via HTML width attribute. Eg.:

<iframe width="560" height="315" src="https://videopress.com/embed/bd2G0c0g" frameborder="0" allowfullscreen></iframe>

In my tests, the width="560" gets ignored if there is a iframe { width: 100%; } in the stylesheets - eg.: introduced by the block editor as in the case mentioned in this ticket.

To me it feels like this change might affect installs using various advertisement systems ( eg: Google ads ... ), as well as sharing video content via iframes ( eg: YouTube, WordPress.tv ... ).

[Joen]

There's a patch in ​https://github.com/WordPress/gutenberg/pull/18240 as well, that I've requested a review for. Hopefully it can land soon.

[SergeyBiryukov]

Hi there, welcome to WordPress Trac! Thanks for the ticket.

It looks like a fix for this was merged upstream in ​https://github.com/WordPress/gutenberg/pull/18287 and made it into core in [46656].