Image and video blocks break out of the content column on the Twenty Ten theme.

[kjellr]

Describe the bug

On the Twenty Ten theme, the image and video blocks break out of the content column and look broken.

This could be considered a theme bug (for an 8-year-old theme 🙂), but something as simple as an image block seems like it should work near-universally. Are we missing some default CSS that we should be including for cases like this?

Screenshots

Image:

Video:

To Reproduce

1. Start with a site using the Twenty Ten theme.
2. Add an image or video block to a page.
3. View the page.

Tested In
Mac OS 10.13.6, Safari 11.1.2
Mac OS 10.13.6, Chrome 67.0.3396.99
Gutenberg 3.4.0

---

Discovered during testing for #8291

[pento]

I had the same thing happen in p2 with videos. I hacked a fix into the p2's custom CSS, but I suspect this issue will be more widespread than just a handful of older themes.

For reference, this was the CSS I added:

.wp-block-video > video {
	width: 100%;
}

[sarahmonster]

I'd be willing to bet this applies to lots of non-responsive themes, and I've seen the video overflow happen in a number of responsive themes, even. I suspect that means it'll be a reasonably widespread issue.

FYI this fix seems to work for me:

.wp-block-image {
    max-width: 100%;
}

.wp-block-image img {
    max-width: 100%;
}

.wp-block-image video {
    max-width: 100%;
}

...also available as a PR.