Constrain media blocks to content area width in frontend.

[sarahmonster]

As it stands right now, images and videos can potentially overflow the content area if their theme doesn't explicitly tell them not to. This doesn't affect the majority (guess) of newer themes, but is likely an issue with lots of older/non-responsive themes, including twentyten.

Giving a max-width of 100% to the image and video blocks ensures they won't break out of the content area of the site, regardless of whether the theme has styling that prevents overflow.

I tested this in a bunch of themes, both old and new, and it doesn't seem to introduce any egregious conflicts, but I may have missed something. I'd appreciate some extra 👀 on it!

Fixes #8334.

Before:

After:

[kjellr]

I tested with a handful of themes, and haven't found any issues so far:

---

Twenty Ten:

---

Twenty Seventeen:

---

Gutenberg Starter Theme:

(^ This was broken, but that's due to a theme bug. 🙂)

---

Twenty Sixteen

---

P2

---

Independent Publisher

---

I can pick this up and test some more tomorrow. 👍

[chrisvanpatten]

I vaguely remember having issues when using resized images with max-width 100%. Might be worth checking specifically.

[jasmussen]

@chrisvanpatten does make a point, that for a resized image, the max-width doesn't apply (see https://github.com/WordPress/gutenberg/blob/master/core-blocks/image/style.scss#L11). But this is perhaps worth revisiting separately, as that's a tricky challenge on its own.

The big challenge is we have the figure to deal with, which is a block level element by default. If you add a caption to an image, how wide should the caption be? Ideally no wider than the image itself, which means if you resize that image to be small, say 200px, then the caption should also be no wider than the 200px.

Actually, let me try and see if I can address resized non floated images with captions in my floats branch — I think the table trick I'm using for floats might work here as well.

[jasmussen]

There are some spaces instead of tabs here.

[jasmussen]

Also some spaces not tabs.

[jasmussen]

I did some work in #7721 (comment) and now the resized images & captions should work.

Depending on which branch goes in first, this might need a rebase. But you shouldn't need to worry about floats, captions or resized images, that should be handled now.

[sarahmonster]

Thanks for the checks @jasmussen! I've fixed those tabs-not-spaces. Happy to rebase as/when needed.

[jasmussen]

Changes look good. Need to figure out why the tests aren't passing. I'll also be sure to rebase my floats PR to include this.

[sarahmonster]

Thanks! I think @tofumatt is working on something to fix the tests that are breaking everywhere, or my CSS is more catastrophic than I'd intended.

[kjellr]

I tried a number of other themes this morning, and this seemed to work fine! 👏

[sarahmonster]

Hurray! Tests are passing now, huge thanks to @notnownikki, so I'm going to go ahead and merge this whilst everything still looks green.

Thanks all!