Columns: Improve margins, column child block, mobile.

This PR aims to further improve the columns block, and improving a number of aspects and addressing recent feedback. - It fixes an issue where fullwide columns had uneven margins, both left, center and right. Fixes #11869. - It fixes a specificity issue with toolbar and breadcrumb positioning that bled into all child blocks. - It improves the layout of individual column blocks, and fixes the toolbar positioning. This fixes feedback in #7766 (comment). - It improves fullwide columns and how they appear on mobile. Aside from that it simplifies the code a bit, and removes a couple of redundant overrides that were better fixed elsewhere.
WordPress · Nov 15, 2018 · 883a929 · 883a929
1 parent d970375
commit 883a929
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 80 deletions.
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
@@ -12,16 +12,17 @@
 	}
 }
 
-// Fullwide: show margin left/right to ensure there's room for the side UI
-// This is not a 1:1 preview with the front-end where these margins would presumably be zero
-// @todo this could be revisited, by for example showing this margin only when the parent block was selected first
-// Then at least an unselected columns block would be an accurate preview
-.editor-block-list__block[data-align="full"] .wp-block-columns .editor-block-list__layout {
-	&:first-child {
-		margin-left: $block-side-ui-width + $block-side-ui-clearance;
-	}
-	&:last-child {
-		margin-right: $block-side-ui-width + $block-side-ui-clearance;
+// Fullwide: show margin left/right to ensure there's room for the side UI.
+// This is not a 1:1 preview with the front-end where these margins would presumably be zero.
+// @todo This could be revisited, by for example showing this margin only when the parent block was selected first.
+// Then at least an unselected columns block would be an accurate preview.
+.editor-block-list__block[data-align="full"] .wp-block-columns > .editor-inner-blocks {
+	padding-left: $block-padding;
+	padding-right: $block-padding;
+
+	@include break-small() {
+		padding-left: $block-padding + $block-padding + $block-side-ui-width + $block-side-ui-clearance + $block-side-ui-clearance;
+		padding-right: $block-padding + $block-padding + $block-side-ui-width + $block-side-ui-clearance + $block-side-ui-clearance;
 	}
 }
 
@@ -34,10 +35,11 @@
 		// Responsiveness: Allow wrapping on mobile.
 		flex-wrap: wrap;
 
-		@include break-medium() {
+		@include break-small() {
 			flex-wrap: nowrap;
 		}
 
+		// Adjust the individual column block.
 		> [data-type="core/column"] {
 			display: flex;
 			flex-direction: column;
@@ -46,46 +48,33 @@
 			// 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.
-			margin-top: -$block-padding - $block-padding;
-			margin-bottom: -$block-padding - $block-padding;
+			> .editor-block-list__block-edit > div > .editor-inner-blocks {
+				margin-top: -$block-padding - $block-padding;
+				margin-bottom: -$block-padding - $block-padding;
+			}
 
 			> .editor-block-list__block-edit {
 				margin-top: 0;
 				margin-bottom: 0;
 			}
 
+			// Extend the passthrough concept to the block paddings, which we zero out.
+			> .editor-block-list__block-edit::before {
+				left: 0;
+				right: 0;
+			}
+			> .editor-block-list__block-edit > .editor-block-contextual-toolbar {
+				margin-left: -$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;
-			}
-
 			@include break-small() {
-				> .editor-block-list__block-edit > .editor-block-contextual-toolbar {
-					top: $block-toolbar-height - $border-width;
-					transform: translateY(-$block-toolbar-height - $border-width);
-					margin-left: -$grid-size-large - $border-width;
-				}
-
-				> .editor-block-list__block-edit::before {
-					top: 0;
-					right: 0;
-					bottom: 0;
-					left: 0;
-				}
-
-				> .editor-block-list__block-edit > .editor-block-list__breadcrumb {
-					top: 0;
-					right: 0;
-				}
+				margin-left: $block-padding;
+				margin-right: $block-padding;
 			}
 
 			// Responsiveness: Show at most one columns on mobile.
@@ -101,27 +90,11 @@
 			// 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;
-				}
-
-				&:nth-child(odd) > .editor-block-list__block-edit {
-					padding-left: 0;
-				}
-
-				&:nth-child(even) > .editor-block-list__block-edit {
-					padding-right: 0;
+				&:nth-child(odd) {
+					margin-right: $grid-size-large * 2;
 				}
-			}
-
-			@include break-medium() {
-				&:not(:first-child) > .editor-block-list__block-edit {
-					padding-left: $grid-size-large;
-				}
-
-				&:not(:last-child) > .editor-block-list__block-edit {
-					padding-right: $grid-size-large;
+				&:nth-child(even) {
+					margin-left: $grid-size-large * 2;
 				}
 			}
 		}
@@ -147,6 +120,7 @@
 	}
 }
 
-:not(.components-disabled) > .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit .editor-inner-blocks {
+// This selector re-enables clicking on any child of a column block.
+:not(.components-disabled) > .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit .editor-block-list__layout > * {
 	pointer-events: all;
 }
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
@@ -25,25 +25,11 @@
 	// 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;
-
 		&:nth-child(odd) {
-			padding-left: 0;
+			margin-right: $grid-size-large * 2;
 		}
-
 		&:nth-child(even) {
-			padding-right: 0;
-		}
-	}
-
-	@include break-medium() {
-		&:not(:first-child) {
-			padding-left: $grid-size-large;
-		}
-
-		&:not(:last-child) {
-			padding-right: $grid-size-large;
+			margin-left: $grid-size-large * 2;
 		}
 	}
 }
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
@@ -430,8 +430,8 @@
 
 	// Full-wide
 	&[data-align="full"] {
-		// Position hover label on the right
-		> .editor-block-list__block-edit .editor-block-list__breadcrumb {
+		// Position hover label on the right for the top level block.
+		> .editor-block-list__block-edit > .editor-block-list__breadcrumb {
 			right: 0;
 		}
 
@@ -808,10 +808,10 @@
 	}
 
 	// Don't do it for wide elements, this causes a horizontal scrollbar.
-	&[data-align="full"] .editor-block-contextual-toolbar {
+	/*&[data-align="full"] .editor-block-contextual-toolbar {
 		margin-left: -$block-padding - $block-side-ui-width;
 		margin-right: -$block-padding - $block-side-ui-width;
-	}
+	}*/
 
 	// Reset pointer-events on children.
 	.editor-block-contextual-toolbar > * {