fix: make sure wide blocks don't overflow containers (#2063)

Automattic · Mar 28, 2023 · 5fea5cf · 5fea5cf
1 parent 05b3128
commit 5fea5cf
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 15 deletions.
diff --git 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,16 +1552,16 @@ $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;
 		}
 	}
 
 	@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
@@ -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
@@ -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
@@ -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};