From b08f9d35e446422f90cd4202d3b1b19f970cfa98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?sarah=20=E2=9C=88=20semark?= <sarah@triggersandsparks.com>
Date: Fri, 3 Aug 2018 19:14:06 +0100
Subject: [PATCH] Constrain media blocks to content area width in frontend.
 (#8399)

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.

Fixes #8334.
---
 core-blocks/image/style.scss | 5 +++++
 core-blocks/video/style.scss | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/core-blocks/image/style.scss b/core-blocks/image/style.scss
index 9797196434499..321fc30504bc3 100644
--- a/core-blocks/image/style.scss
+++ b/core-blocks/image/style.scss
@@ -1,5 +1,10 @@
 .wp-block-image {
 	width: fit-content;
+	max-width: 100%;
+
+	img {
+		max-width: 100%;
+	}
 
 	&.aligncenter {
 		display: block;
diff --git a/core-blocks/video/style.scss b/core-blocks/video/style.scss
index 1fbdf19720705..24e8278cc4a7b 100644
--- a/core-blocks/video/style.scss
+++ b/core-blocks/video/style.scss
@@ -1,4 +1,8 @@
 .wp-block-video {
+	video {
+		max-width: 100%;
+	}
+
 	&.aligncenter {
 		text-align: center;
 	}