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.
WordPress · Aug 3, 2018 · b08f9d3 · b08f9d3
1 parent 0c12b15
commit b08f9d3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git 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
@@ -1,4 +1,8 @@
 .wp-block-video {
+	video {
+		max-width: 100%;
+	}
+
 	&.aligncenter {
 		text-align: center;
 	}