From 08a91d4befc2f7ded7e825887bea73a80c680ae2 Mon Sep 17 00:00:00 2001 From: sarah Date: Thu, 2 Aug 2018 17:53:26 +0100 Subject: [PATCH 1/2] Constrain media blocks to content area width in frontend. 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..97a4961a1e80f 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; } From 5fe038794461804c52cae907537fbabd3eb35dd1 Mon Sep 17 00:00:00 2001 From: sarah Date: Fri, 3 Aug 2018 09:53:04 +0100 Subject: [PATCH 2/2] Tabs, please. --- core-blocks/image/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core-blocks/image/style.scss b/core-blocks/image/style.scss index 97a4961a1e80f..321fc30504bc3 100644 --- a/core-blocks/image/style.scss +++ b/core-blocks/image/style.scss @@ -1,9 +1,9 @@ .wp-block-image { width: fit-content; - max-width: 100%; + max-width: 100%; img { - max-width: 100%; + max-width: 100%; } &.aligncenter {