feat: update columns with borders style (#187)

Automattic · Jun 14, 2024 · 0d91907 · 0d91907
1 parent 73085a2
commit 0d91907
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 15 deletions.
diff --git a/src/scss/blocks/_columns.scss b/src/scss/blocks/_columns.scss
@@ -7,35 +7,51 @@
 	.wp-block-column:empty {
 		display: none;
 
-		@include sass-utils.media(medium) {
+		@include sass-utils.media( medium ) {
 			display: inherit;
 		}
 	}
 
-	&.is-style-borders > .wp-block-column::after {
-		border-color: var(--wp--preset--color--base-3);
+	&.is-style-borders {
+		gap: var( --wp--preset--spacing--80 ) !important;
 
-		.has-background &,
-		.has-text-color & {
-			border-color: currentcolor; // Fallback
-			border-color: color-mix(in srgb, currentcolor 15%, transparent);
+		> .wp-block-column::after {
+			border-color: var( --wp--preset--color--base-3 );
+			bottom: calc( -1 * var( --wp--preset--spacing--80 ) / 2 - 0.5px );
+
+			@include sass-utils.media( medium ) {
+				bottom: 0;
+				right: calc( -1 * var( --wp--preset--spacing--80 ) / 2 - 0.5px );
+			}
+
+			.has-background &,
+			.has-text-color & {
+				border-color: currentcolor; // Fallback
+				border-color: color-mix( in srgb, currentcolor 15%, transparent );
+			}
+		}
+
+		&.is-not-stacked-on-mobile {
+			> .wp-block-column::after {
+				right: calc( -1 * var( --wp--preset--spacing--80 ) / 2 - 0.5px );
+			}
 		}
 	}
 }
 
 // Newspack Grid
 .newspack-grid {
-	@include sass-utils.media(large) {
+	@include sass-utils.media( large ) {
 		/* "25 / 50 / 25" layout */
 		.wp-block-column[style*='25%'] {
 			max-width: 300px;
 		}
 	}
 
-	@include sass-utils.media(x-large) {
+	@include sass-utils.media( x-large ) {
 		&.wp-block-columns {
 			display: grid;
-			grid-template-columns: repeat(12, 1fr);
+			grid-template-columns: repeat( 12, 1fr );
 		}
 
 		& > * {
@@ -52,8 +68,8 @@
 		}
 
 		/* "33 / 33 / 33" layout */
-		.wp-block-column:not([style*='flex-basis']):nth-last-child(3):first-child,
-		.wp-block-column:not([style*='flex-basis']):nth-last-child(3):first-child ~ .wp-block-column {
+		.wp-block-column:not( [style*='flex-basis'] ):nth-last-child( 3 ):first-child,
+		.wp-block-column:not( [style*='flex-basis'] ):nth-last-child( 3 ):first-child ~ .wp-block-column {
 			grid-column-end: span 4;
 		}
 
@@ -84,10 +100,10 @@
 }
 
 .newspack-grid-small {
-	@include sass-utils.media(x-large) {
+	@include sass-utils.media( x-large ) {
 		&.wp-block-columns {
 			display: grid;
-			grid-template-columns: repeat(6, 1fr);
+			grid-template-columns: repeat( 6, 1fr );
 		}
 
 		& > * {

diff --git a/theme.json b/theme.json
@@ -336,7 +336,10 @@
 			},
 			"core/columns": {
 				"spacing": {
-					"blockGap": "var( --wp--preset--spacing--50 )",
+					"blockGap": {
+						"left": "var( --wp--preset--spacing--50 )",
+						"top": "var( --wp--preset--spacing--50 )"
+					},
 					"margin": {
 						"bottom": "var( --wp--preset--spacing--50 )"
 					}