fix: remove custom column block styles (#1801)

Automattic · May 25, 2022 · 56b9e84 · 56b9e84
1 parent 0d9a6af
commit 56b9e84
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 140 deletions.
diff --git a/newspack-theme/sass/blocks/_blocks.scss b/newspack-theme/sass/blocks/_blocks.scss
@@ -78,29 +78,6 @@
 				&.wp-block-cover {
 					width: auto;
 				}
-
-				&.wp-block-columns {
-					margin-left: calc( 25% - 25vw - 16px );
-					margin-right: calc( 25% - 25vw - 16px );
-					max-width: calc( 100vw + 32px );
-					width: auto;
-
-					&.is-style-borders {
-						margin-left: calc( 25% - 25vw - 24px );
-						margin-right: calc( 25% - 25vw - 24px );
-						max-width: calc( 100vw + 48px );
-					}
-				}
-			}
-
-			@include media( desktop ) {
-				&.wp-block-columns {
-					&.is-style-borders {
-						margin-left: calc( 25% - 25vw - 32px );
-						margin-right: calc( 25% - 25vw - 32px );
-						max-width: calc( 100vw + 64px );
-					}
-				}
 			}
 		}
 		.alignfull {
@@ -111,33 +88,6 @@
 			&.wp-block-cover {
 				width: 100vw;
 			}
-
-			&.wp-block-columns {
-				@include media( mobile ) {
-					margin-left: calc( 50% - 50vw - 16px );
-					margin-right: calc( 50% - 50vw - 16px );
-					max-width: calc( 100vw + 32px );
-					width: calc( 100vw + 32px );
-				}
-
-				@include media( tablet ) {
-					&.is-style-borders {
-						margin-left: calc( 50% - 50vw - 24px );
-						margin-right: calc( 50% - 50vw - 24px );
-						max-width: calc( 100vw + 48px );
-						width: calc( 100vw + 48px );
-					}
-				}
-
-				@include media( desktop ) {
-					&.is-style-borders {
-						margin-left: calc( 50% - 50vw - 32px );
-						margin-right: calc( 50% - 50vw - 32px );
-						max-width: calc( 100vw + 64px );
-						width: calc( 100vw + 64px );
-					}
-				}
-			}
 		}
 
 		.wp-block-cover,
@@ -375,36 +325,6 @@ p.has-background {
 	}
 }
 
-// Temporarily make some column styles more specific
-.entry .entry-content > .wp-block-columns,
-[id='pico'] > .wp-block-columns {
-	&.is-not-stacked-on-mobile {
-		margin-left: -16px;
-		margin-right: -16px;
-		max-width: calc( 100% + 32px );
-	}
-
-	@include media( mobile ) {
-		margin-left: -16px;
-		margin-right: -16px;
-		max-width: calc( 100% + 32px );
-	}
-
-	@include media( tablet ) {
-		&.is-style-borders {
-			margin-left: -24px;
-			max-width: calc( 100% + 48px );
-		}
-	}
-
-	@include media( desktop ) {
-		&.is-style-borders {
-			margin-left: -32px;
-			max-width: calc( 100% + 64px );
-		}
-	}
-}
-
 //! Cover Image
 .wp-block-cover-image,
 .wp-block-cover {
@@ -1457,31 +1377,6 @@ $colors: (
 				margin-right: calc( 25% - 25vw );
 				max-width: 100vw;
 			}
-
-			@include media( tablet ) {
-				&.wp-block-columns {
-					margin-left: calc( 25% - 25vw - 16px );
-					margin-right: calc( 25% - 25vw - 16px );
-					max-width: calc( 100vw + 32px );
-					width: auto;
-
-					&.is-style-borders {
-						margin-left: calc( 25% - 25vw - 24px );
-						margin-right: calc( 25% - 25vw - 24px );
-						max-width: calc( 100vw + 48px );
-					}
-				}
-			}
-
-			@include media( desktop ) {
-				&.wp-block-columns {
-					&.is-style-borders {
-						margin-left: calc( 25% - 25vw - 32px );
-						margin-right: calc( 25% - 25vw - 32px );
-						max-width: calc( 100vw + 64px );
-					}
-				}
-			}
 		}
 
 		&.alignfull {
@@ -1584,17 +1479,6 @@ $colors: (
 			}
 		}
 	}
-
-	//! Columns Block
-	.wp-block-columns {
-		@include media( tablet ) {
-			&.alignfull,
-			&.alignfull .wp-block-column {
-				padding-left: calc( 2 * #{$size__spacing-unit} );
-				padding-right: calc( 2 * #{$size__spacing-unit} );
-			}
-		}
-	}
 }
 
 .newspack-front-page,

diff --git a/newspack-theme/sass/blocks/_patterns.scss b/newspack-theme/sass/blocks/_patterns.scss
@@ -219,20 +219,9 @@
 		margin: 0;
 		padding: 0;
 
-		@include media( mobile ) {
-			margin-left: -16px;
-			margin-right: -16px;
-		}
-
-		&:not( .is-not-stacked-on-mobile ) > .wp-block-column {
-			margin-bottom: 16px;
-
-			@include media( mobile ) {
-				margin-bottom: 0;
-			}
-
-			&:last-child {
-				margin-bottom: 0;
+		&:not( .is-not-stacked-on-mobile ) {
+			@include media( tabletonly ) {
+				gap: 16px;
 			}
 		}
 

diff --git a/newspack-theme/sass/style-editor-base.scss b/newspack-theme/sass/style-editor-base.scss
@@ -347,21 +347,18 @@ h1.wp-block-post-title {
 	.wp-block-cover__inner-container {
 		width: 100%;
 	}
-}
-
-/** === Columns === */
 
-.wp-block-columns.is-style-borders {
-	[data-type='core/column'] {
-		@include media( tablet ) {
-			flex-basis: calc( 50% - 32px );
+	.wp-block-column {
+		> * {
+			margin-bottom: 0;
+			margin-top: 0;
 
 			&:not( :first-child ) {
-				margin-left: 64px;
+				margin-top: 32px;
 			}
 
-			&::after {
-				right: -32px;
+			&:not( :last-child ) {
+				margin-bottom: 32px;
 			}
 		}
 	}