Remove additional side padding from blocks.

You may have noticed that the padding left and right on a block is wider than above and below. This was done in effort to make it simple to select the parent block by simply hovering it with the mouse. Arrow keys already traverse up to parent blocks and there's a clickthrough effect on mobile. However in practice this additional padding has not felt sufficient, and was at the cost of some visual complexity. Instead, we'll be looking at improving parent child selection in #9628. This PR thus reverts the style of this to how it used to be, with the same padding all around a block. Reminder: this padding is purely visual — through negative margins, it doesn't actually affect the width of the block itself, or the margins above and below. See also #8350.
WordPress · Sep 6, 2018 · 27c4e86 · 27c4e86
1 parent 8517779
commit 27c4e86
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 122 deletions.
diff --git a/block-library/freeform/editor.scss b/block-library/freeform/editor.scss
@@ -132,7 +132,7 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 
 .freeform-toolbar {
 	width: auto;
-	margin: 0 #{ -$parent-block-padding };
+	margin: 0 #{ -$block-padding };
 	position: sticky;
 	z-index: z-index(".freeform-toolbar");
 	top: $block-padding;
@@ -186,7 +186,7 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 	.editor-block-list__block[data-type="core/freeform"] {
 		.editor-block-contextual-toolbar {
 			float: right;
-			margin-right: -$block-padding - $block-side-ui-clearance - $border-width;
+			margin-right: -$block-side-ui-clearance - $border-width;
 			transform: translateY(-#{ $block-padding - $border-width });
 			top: $block-padding;
 		}

diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss
@@ -50,14 +50,12 @@ $inserter-tabs-height: 36px;
 $block-toolbar-height: $block-controls-height + $border-width;
 
 // Blocks
-$parent-block-padding: 28px; // padding of top level blocks, should be larger than $block-padding, otherwise a user can't select the parent from a child
 $block-padding: 14px; // padding of nested blocks
 $block-spacing: 4px; // vertical space between blocks
 
 $block-side-ui-width: 28px; // width of the side UI, matches half matches half of a single line of text, so two buttons stacke matches 1
 $block-side-ui-clearance: 2px; // space between side UI and block
 $block-side-ui-padding: $block-side-ui-width + $block-side-ui-clearance; // total space used to accommodate side UI
-$block-parent-side-ui-clearance: $parent-block-padding - $block-padding; // space between side UI and block on top level blocks
 
 $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance;
 

diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
@@ -32,20 +32,20 @@
 		// Use specific selector to not affect nested block toolbars.
 		&[data-align="wide"] > .editor-block-contextual-toolbar,
 		&[data-align="full"] > .editor-block-contextual-toolbar {
-			width: calc(100% + #{ ($parent-block-padding * 4) + $border-width + $border-width }); // Matches the negative margins applied to parent blocks.
+			width: calc(100% + #{ $block-side-ui-width * 2 + $block-padding * 2 + $border-width * 2 }); // Matches the negative margins applied to parent blocks.
 			height: 0; // This collapses the container to an invisible element without margin.
 			text-align: center;
 
 			.editor-block-toolbar {
-				max-width: $content-width + $block-padding + $block-padding;
+				max-width: $content-width;
 				width: 100%;
 				position: relative;
 			}
 		}
 
 		// The centering math changes when a fullwide image doesn't have block padding.
 		&[data-align="full"] > .editor-block-contextual-toolbar {
-			width: calc(100% + #{ ($parent-block-padding * 2) + ($block-padding * 2) }); // Matches the negative margins applied to non-parent blocks, except for borders which are gone in fullwide.
+			width: calc(100% + #{ $block-side-ui-width * 2 + $block-padding * 2 }); // Matches the negative margins applied to non-parent blocks, except for borders which are gone in fullwide.
 
 			.editor-block-toolbar {
 				max-width: $content-width - $border-width - $border-width;
@@ -80,11 +80,11 @@
 		margin-right: 0;
 	}
 
-	// Include space for side UI on desktops.
+	// Stretch to mimic outline padding on desktop.
 	@include break-small() {
 		> div {
-			margin-left: -$block-side-ui-width;
-			margin-right: -$block-side-ui-width;
+			margin-left: -$block-side-ui-clearance;
+			margin-right: -$block-side-ui-clearance;
 		}
 	}
 }

diff --git a/packages/block-library/src/block/edit-panel/style.scss b/packages/block-library/src/block/edit-panel/style.scss
@@ -8,8 +8,8 @@
 	font-size: $default-font-size;
 	position: relative;
 	top: $block-padding;
-	margin: 0 (-$parent-block-padding);
-	padding: 10px $parent-block-padding;
+	margin: 0 (-$block-padding);
+	padding: 10px $block-padding;
 
 	// Show a smaller padding when nested.
 	.editor-block-list__layout & {

diff --git a/packages/block-library/src/block/indicator/style.scss b/packages/block-library/src/block/indicator/style.scss
@@ -8,10 +8,5 @@
 	padding: 5px;
 	position: absolute;
 	width: 30px;
-	right: -$parent-block-padding;
-
-	// Show less offset in nested contexts.
-	.editor-block-list__layout & {
-		right: -$block-padding;
-	}
+	right: -$block-padding;
 }
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
@@ -4,8 +4,8 @@
 		box-shadow: $shadow-popover;
 
 		@include break-small {
-			left: -$block-parent-side-ui-clearance - $border-width;
-			right: -$block-parent-side-ui-clearance - $border-width;
+			left: -$block-side-ui-clearance - $border-width;
+			right: -$block-side-ui-clearance - $border-width;
 
 			.editor-block-list__layout & {
 				left: -$border-width;
@@ -57,11 +57,11 @@
 	}
 
 	@include break-small {
-		// use a wider available space for hovering/selecting/dragging on top level blocks
-		left: -$parent-block-padding - $block-padding;
-		right: -$parent-block-padding - $block-padding;
+		// Use a wider available space for hovering/selecting/dragging on top level blocks.
+		left: -$block-padding * 2;
+		right: -$block-padding * 2;
 
-		// use smaller space for hovering/selecting/dragging on child blocks
+		// Use smaller space for hovering/selecting/dragging on child blocks.
 		.editor-block-list__layout & {
 			left: 0;
 			right: 0;
@@ -132,11 +132,9 @@
 		padding-left: 0;
 		padding-right: 0;
 
-		// Compensate for block padding horizontally.
+		// Compensate for block padding.
 		margin-left: -$block-padding;
 		margin-right: -$block-padding;
-
-		// Compensate for block padding.
 		margin-top: -$block-padding;
 		margin-bottom: -$block-padding;
 	}
@@ -175,10 +173,12 @@
 	/**
 	 * Notices
 	 */
+
 	.components-placeholder .components-with-notices-ui {
 		margin: -10px 20px 12px 20px;
 		width: calc(100% - 40px);
 	}
+
 	.components-with-notices-ui {
 		margin: 0 0 12px 0;
 		width: 100%;
@@ -213,20 +213,6 @@
 			left: -$block-padding;
 			top: -$block-padding;
 			bottom: -$block-padding;
-
-			// Show wider padding for top level blocks.
-			@include break-small() {
-				right: -$parent-block-padding;
-				left: -$parent-block-padding;
-			}
-		}
-
-		// Show smaller padding for child blocks.
-		.editor-block-list__block-edit::before {
-			right: -$block-padding;
-			left: -$block-padding;
-			top: -$block-padding;
-			bottom: -$block-padding;
 		}
 	}
 
@@ -316,14 +302,8 @@
 
 		top: -$block-padding;
 		bottom: -$block-padding;
-		right: -$parent-block-padding;
-		left: -$parent-block-padding;
-
-		// Position for nested blocks
-		.editor-block-list__block & {
-			right: -$block-padding;
-			left: -$block-padding;
-		}
+		right: -$block-padding;
+		left: -$block-padding;
 	}
 
 	// Appender
@@ -441,11 +421,6 @@
 			right: 0;
 		}
 
-		// Position hover label on the right
-		> .editor-block-list__breadcrumb {
-			right: -$border-width;
-		}
-
 		// Hide mover until wide breakpoints, or it might be covered by toolbar
 		> .editor-block-mover {
 			display: none;
@@ -468,11 +443,6 @@
 
 	// Wide
 	&[data-align="wide"] {
-		// Position hover label on the right
-		> .editor-block-list__breadcrumb {
-			right: -$block-padding;
-		}
-
 		// Position ellipsis.
 		> .editor-block-settings-menu {
 			right: -$block-padding + $block-side-ui-clearance;
@@ -595,37 +565,12 @@
 		}
 	}
 
-	// Right side UI
-	> .editor-block-settings-menu {
-		padding-left: $block-side-ui-clearance;
-
-		// Position for top level blocks
-		right: -$block-side-ui-width - $block-side-ui-clearance - $block-parent-side-ui-clearance;
-
-		// Position for nested blocks
-		.editor-block-list__block & {
-			right: -$block-side-ui-width - $block-side-ui-clearance;
-		}
-
-		// Mobile
-		display: none;
-		@include break-small() {
-			display: flex;
-			flex-direction: column;
-		}
-	}
-
 	// Left side UI
 	> .editor-block-mover {
 		padding-right: $block-side-ui-clearance;
 
 		// Position for top level blocks
-		left: -$block-side-ui-width - $block-side-ui-clearance - $block-parent-side-ui-clearance;
-
-		// Position for nested blocks
-		.editor-block-list__block & {
-			left: -$block-side-ui-width - $block-side-ui-clearance;
-		}
+		left: -$block-side-ui-width - $block-side-ui-clearance;
 
 		// Mobile
 		display: none;
@@ -884,14 +829,8 @@
 	margin-right: 0;
 
 	@include break-small() {
-		margin-left: -$parent-block-padding - $parent-block-padding - $border-width;
-		margin-right: -$parent-block-padding - $parent-block-padding - $border-width;
-
-		// Position toolbar for nested contexts.
-		.editor-block-list__block & {
-			margin-left: -$parent-block-padding - $block-padding - $border-width;
-			margin-right: -$parent-block-padding - $block-padding - $border-width;
-		}
+		margin-left: -$block-side-ui-width - $block-padding - $border-width;
+		margin-right: -$block-side-ui-width - $block-padding - $border-width;
 
 		// Except for wide elements, this causes a horizontal scrollbar.
 		[data-align="full"] & {
@@ -995,15 +934,6 @@
 	right: 0;
 	top: -$block-padding - $border-width;
 
-	@include break-small() {
-		right: -$block-parent-side-ui-clearance;
-	}
-
-	// Nested
-	.editor-block-list__block-edit & {
-		right: $parent-block-padding - $block-padding - $block-parent-side-ui-clearance;
-	}
-
 	.components-toolbar {
 		padding: 0;
 		border: none;
@@ -1048,9 +978,9 @@
 		&::before {
 			bottom: 0;
 			content: "";
-			left: -$parent-block-padding - $block-padding;
+			left: -$block-padding * 2;
 			position: absolute;
-			right: -$parent-block-padding - $block-padding;
+			right: -$block-padding * 2;
 			top: 0;
 		}
 
@@ -1074,17 +1004,11 @@
 	z-index: z-index(".editor-warning");
 	position: absolute;
 	top: -$block-padding - $border-width;
-	right: -$parent-block-padding - $border-width;
-	left: -$parent-block-padding - $border-width;
-
-	// Position for nested blocks
-	.editor-block-list__block & {
-		right: -$block-padding - $border-width;
-		left: -$block-padding - $border-width;
-	}
+	right: -$block-padding - $border-width;
+	left: -$block-padding - $border-width;
 
 	// Bigger padding on mobile where blocks are edge to edge.
-	padding: 10px $parent-block-padding;
+	padding: 10px $block-padding;
 	@include break-small() {
 		padding: 10px $block-padding;
 	}

diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
@@ -4,7 +4,7 @@
 	font-size: $editor-font-size;
 
 	@include break-small() {
-		padding: 5px $block-parent-side-ui-clearance;
+		padding: 5px $block-side-ui-clearance;
 	}
 
 	.editor-post-title__input {
@@ -16,14 +16,8 @@
 		font-family: $editor-font;
 		line-height: $default-line-height;
 		transition: border 0.1s ease-out;
-
-		// Show wider parent padding on Desktop breakpoints.
 		padding: #{ $block-padding + 5px } $block-padding;
 
-		@include break-small() {
-			padding: #{ $block-padding + 5px } $parent-block-padding;
-		}
-
 		// Stack borders on mobile.
 		border: $border-width solid transparent;
 		border-left-width: 0;
@@ -72,7 +66,7 @@
 	right: 0;
 
 	@include break-small() {
-		left: $block-parent-side-ui-clearance;
-		right: $block-parent-side-ui-clearance;
+		left: $block-side-ui-clearance;
+		right: $block-side-ui-clearance;
 	}
 }