Add space between colums.

Fixes #7818. Fixes #6048.
WordPress · Oct 18, 2018 · 1fa9b6d · 1fa9b6d
1 parent 371a12b
commit 1fa9b6d
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 19 deletions.
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
@@ -55,32 +55,42 @@
 			// The Column block is a child of the Columns block and is mostly a passthrough container.
 			// Therefore it shouldn't add additional paddings and margins, so we reset these, and compensate for margins.
 			// @todo In the future, if a passthrough feature lands, it would be good to apply these rules to such an element in a more generic way.
-			padding-left: $block-padding;
-			padding-right: $block-padding;
 			margin-top: -$block-padding;
 			margin-bottom: -$block-padding;
 
-			> .editor-block-contextual-toolbar {
-				top: $block-toolbar-height - $border-width;
-				transform: translateY(-$block-toolbar-height - $border-width);
-				margin-left: -$block-padding - $block-padding - $border-width;
+			// On mobile, only a single column is shown, so match adjacent block paddings.
+			padding-left: 0;
+			padding-right: 0;
+			margin-left: -$block-padding;
+			margin-right: -$block-padding;
+			@include break-small () {
+				padding-left: $block-padding;
+				padding-right: $block-padding;
+				margin-right: inherit;
+				// Every .editor-block-list__block has auto-left/right margins, which centers columns.
+				// Since they aren't centered on the front-end, we explicitly set a zero left margin here.
+				margin-left: 0;
 			}
 
-			> .editor-block-list__block-edit::before {
-				top: 0;
-				right: 0;
-				bottom: 0;
-				left: 0;
-			}
-
-			> .editor-block-list__breadcrumb {
-				margin-right: -$block-padding - $border-width;
+			@include break-small() {
+				> .editor-block-contextual-toolbar {
+					top: $block-toolbar-height - $border-width;
+					transform: translateY(-$block-toolbar-height - $border-width);
+					margin-left: -$block-padding - $block-padding - $border-width;
+				}
+
+				> .editor-block-list__block-edit::before {
+					top: 0;
+					right: 0;
+					bottom: 0;
+					left: 0;
+				}
+
+				> .editor-block-list__breadcrumb {
+					margin-right: -$block-padding - $border-width;
+				}
 			}
 
-			// Every .editor-block-list__block has auto-left/right margins, which centers columns.
-			// Since they aren't centered on the front-end, we explicitly set a zero left margin here.
-			margin-left: 0;
-
 			// Responsiveness: Show at most one columns on mobile.
 			flex-basis: 100%;
 
@@ -94,6 +104,24 @@
 			@include break-medium() {
 				flex-basis: inherit;
 			}
+
+			// Add space between columns. Themes can customize this if they wish to work differently.
+			// This has to match the same padding applied in style.scss.
+			// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
+			@include break-small() {
+				> .editor-block-list__block-edit {
+					padding-left: $grid-size-large;
+					padding-right: $grid-size-large;
+				}
+
+				&:first-child > .editor-block-list__block-edit {
+					padding-left: 0;
+				}
+
+				&:last-child > .editor-block-list__block-edit {
+					padding-right: 0;
+				}
+			}
 		}
 	}
 }
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
@@ -26,4 +26,19 @@
 	@include break-medium() {
 		flex-basis: inherit;
 	}
+
+	// Add space between columns. Themes can customize this if they wish to work differently.
+	// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
+	@include break-small() {
+		padding-left: $grid-size-large;
+		padding-right: $grid-size-large;
+
+		&:first-child {
+			padding-left: 0;
+		}
+
+		&:last-child {
+			padding-right: 0;
+		}
+	}
 }