From 5fea5cf7b4f3c02645792c5874c3ed1e5fe00238 Mon Sep 17 00:00:00 2001 From: Laurel Date: Tue, 28 Mar 2023 11:57:12 -0700 Subject: [PATCH] fix: make sure wide blocks don't overflow containers (#2063) --- newspack-theme/sass/blocks/_blocks.scss | 70 ++++++++++++++++--- newspack-theme/sass/media/_captions.scss | 18 +++++ newspack-theme/sass/style-editor-base.scss | 12 +++- .../sass/style-editor-overrides.scss | 17 +++-- 4 files changed, 102 insertions(+), 15 deletions(-) diff --git a/newspack-theme/sass/blocks/_blocks.scss b/newspack-theme/sass/blocks/_blocks.scss index 3ed644425..8eaf34117 100755 --- a/newspack-theme/sass/blocks/_blocks.scss +++ b/newspack-theme/sass/blocks/_blocks.scss @@ -114,6 +114,10 @@ margin-left: 0; margin-right: 0; } + + &.wp-block-columns .alignwide { + width: 100%; + } } .wp-block-cover, @@ -127,6 +131,18 @@ } } } + + .wp-block-column { + .wp-block-cover, + .wp-block-group { + &.alignfull, + &.alignwide { + > div > *:not( .alignfull ):not( .alignwide ) { + max-width: 100%; + } + } + } + } } } @@ -1120,6 +1136,12 @@ hr { margin-top: -32px; } +.wp-block-cover { + .wp-block-group.has-background + .wp-block-group.has-background { + margin-top: unset; + } +} + // Remove space between full-width group block and header on homepage. .newspack-front-page.hide-homepage-title .entry-content > .wp-block-group.alignfull:first-child, .newspack-front-page.hide-homepage-title [id='pico'] > .wp-block-group.alignfull:first-child { @@ -1461,11 +1483,6 @@ $colors: ( .wp-block-image { &.alignfull img { width: 100vw; - max-width: 100vw; - } - - &.alignwide { - max-width: 100vw; } } @@ -1495,8 +1512,8 @@ $colors: ( //! Group & Cover Block .entry .entry-content, [id='pico'] { - > .wp-block-cover, - > .wp-block-group { + .wp-block-cover, + .wp-block-group { &.alignfull, &.alignwide { > div > *:not( .alignfull ):not( .alignwide ) { @@ -1512,6 +1529,18 @@ $colors: ( width: calc( 50vw + 390px ); } } + + .wp-block-column { + .wp-block-cover, + .wp-block-group { + &.alignfull, + &.alignwide { + > div > *:not( .alignfull ):not( .alignwide ) { + max-width: 100%; + } + } + } + } } } @@ -1523,8 +1552,8 @@ $colors: ( //! Add padding to some fullalign blocks to prevent text cut-offs. .wp-block-pullquote, .wp-block-table, - .wp-block-columns:not( .is-not-stacked-on-mobile ), - .wpnbha { + .entry-content > .wp-block-columns:not( .is-not-stacked-on-mobile ), + .entry-content > .wpnbha { &.alignfull { padding-left: structure.$size__spacing-unit; padding-right: structure.$size__spacing-unit; @@ -1532,7 +1561,7 @@ $colors: ( } @include utilities.media( mobile ) { - .wp-block-columns.is-not-stacked-on-mobile.alignfull { + .entry-content > .wp-block-columns.is-not-stacked-on-mobile.alignfull { padding-left: structure.$size__spacing-unit; padding-right: structure.$size__spacing-unit; } @@ -1547,6 +1576,27 @@ $colors: ( } } + // keep nested align-full elements from overflowing the container. + .entry .entry-content { + .wp-block-columns, + .wp-block-group, + .wp-block-cover { + .alignwide, + .alignfull { + margin-left: 0; + margin-right: 0; + } + } + + .wp-block-group, + .wp-block-cover { + &.alignfull .alignwide { + margin-left: auto; + margin-right: auto; + } + } + } + // Make SCAIP placements full-width. .entry .entry-content .scaip { .newspack_global_ad, diff --git a/newspack-theme/sass/media/_captions.scss b/newspack-theme/sass/media/_captions.scss index 986447c42..9b084e8c0 100755 --- a/newspack-theme/sass/media/_captions.scss +++ b/newspack-theme/sass/media/_captions.scss @@ -56,6 +56,15 @@ figcaption, width: min( 90vw, 780px ); } } + + .wp-block-column { + figcaption, + .alignfull > figcaption, + .alignwide > figcaption { + max-width: 100%; + width: 100%; + } + } } .newspack-front-page, @@ -74,4 +83,13 @@ figcaption, width: min( 90vw, 1200px ); } } + + .entry-content .wp-block-column { + figcaption, + .alignfull > figcaption, + .alignwide > figcaption { + max-width: 100%; + width: 100%; + } + } } diff --git a/newspack-theme/sass/style-editor-base.scss b/newspack-theme/sass/style-editor-base.scss index 8386a508b..16b2739e4 100644 --- a/newspack-theme/sass/style-editor-base.scss +++ b/newspack-theme/sass/style-editor-base.scss @@ -141,6 +141,12 @@ figcaption, padding-right: 0; } +.wp-block-column { + figcaption { + max-width: 100%; + } +} + .has-text-color { figcaption, .wp-caption-text { @@ -258,7 +264,6 @@ h1.wp-block-post-title { } h2 { - max-width: 100%; padding-left: 0; } @@ -323,6 +328,11 @@ h1.wp-block-post-title { } .wp-block-column { + &, + .wp-block { + max-width: 100%; + } + > * { margin-bottom: 0; margin-top: 0; diff --git a/newspack-theme/sass/style-editor-overrides.scss b/newspack-theme/sass/style-editor-overrides.scss index 84560ae9a..87481086d 100644 --- a/newspack-theme/sass/style-editor-overrides.scss +++ b/newspack-theme/sass/style-editor-overrides.scss @@ -31,6 +31,12 @@ } } +/** === One-Column Template === */ + +body.newspack-single-column-template .wp-block-column.wp-block { + max-width: 100%; +} + /** === Wide Templates === */ body.newspack-static-front-page, @@ -58,6 +64,13 @@ body.newspack-single-wide-template { .swiper-pagination-simple { max-width: 1230px; } + + .wp-block-column { + &, + .wp-block { + max-width: 100%; + } + } } /** === Wide Blocks === */ @@ -69,10 +82,6 @@ body.newspack-single-column-template { max-width: 100vw; width: auto; - figcaption { - padding: 0 structure.$size__spacing-unit; - } - .wp-block-group:not( .has-background ):not( .is-style-border ) { padding-left: #{0.5 * structure.$size__spacing-unit}; padding-right: #{0.5 * structure.$size__spacing-unit};