From 6321a997615c9560c98f24d69739ddaa82cf8e26 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Tue, 25 Sep 2018 15:59:21 +0200
Subject: [PATCH] Remove additional side padding from blocks. (#9653)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 block-library/freeform/editor.scss            |   6 +-
 edit-post/assets/stylesheets/_variables.scss  |   2 -
 edit-post/assets/stylesheets/_z-index.scss    |   3 +-
 edit-post/components/visual-editor/style.scss |  12 +-
 .../src/block/edit-panel/style.scss           |   4 +-
 .../src/block/indicator/style.scss            |   8 +-
 .../src/components/block-list/style.scss      | 132 +++---------------
 .../src/components/post-title/style.scss      |  12 +-
 8 files changed, 35 insertions(+), 144 deletions(-)

diff --git a/block-library/freeform/editor.scss b/block-library/freeform/editor.scss
index 81c53e7f81c211..9c03b0667461d2 100644
--- a/block-library/freeform/editor.scss
+++ b/block-library/freeform/editor.scss
@@ -146,7 +146,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;
@@ -209,8 +209,8 @@ 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;
-			transform: translateY(-#{ $block-padding });
+			margin-right: -$block-side-ui-clearance - $border-width;
+			transform: translateY(-#{ $block-padding - $border-width });
 			top: $block-padding;
 
 			.editor-block-toolbar {
diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss
index 3f7675fd84bed5..b46070da687ae0 100644
--- 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/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
index 9f44e1dcb1564e..44b6824b184860 100644
--- a/edit-post/assets/stylesheets/_z-index.scss
+++ b/edit-post/assets/stylesheets/_z-index.scss
@@ -9,7 +9,8 @@ $z-layers: (
 	".editor-block-list__block {core/image aligned left or right}": 20,
 	".editor-block-list__block {core/image aligned wide or fullwide}": 20,
 	".freeform-toolbar": 10,
-	".editor-block-list__breadcrumb": 1,
+	".editor-block-list__layout .reusable-block-indicator": 1,
+	".editor-block-list__breadcrumb": 2,
 	".components-form-toggle__input": 1,
 	".editor-inserter__tabs": 1,
 	".editor-inserter__tab.is-active": 1,
diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
index 2064c52e13b443..dad502cb079cdb 100644
--- a/edit-post/components/visual-editor/style.scss
+++ b/edit-post/components/visual-editor/style.scss
@@ -32,12 +32,12 @@
 		// 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;
 			}
@@ -45,7 +45,7 @@
 
 		// 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;
@@ -84,11 +84,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
index df57f3b5cbfb8f..854971aa7bddf9 100644
--- 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) (-$block-padding) (-$parent-block-padding);
-	padding: $grid-size $parent-block-padding;
+	margin: 0 (-$block-padding) (-$block-padding) (-$block-padding);
+	padding: $grid-size $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
index ccbc57ec7c33d0..1f3937ea99cd94 100644
--- a/packages/block-library/src/block/indicator/style.scss
+++ b/packages/block-library/src/block/indicator/style.scss
@@ -7,11 +7,7 @@
 	height: 30px;
 	padding: $grid-size-small;
 	position: absolute;
+	z-index: z-index(".editor-block-list__layout .reusable-block-indicator");
 	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
index 14a5c73d388d0e..47c4073e667b22 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -1,8 +1,7 @@
 .editor-block-list__layout .components-draggable__clone {
 	// Hide the Block UI when dragging the block
 	// This ensures the page scroll properly (no sticky elements)
-	.editor-block-contextual-toolbar,
-	.editor-block-settings-menu {
+	.editor-block-contextual-toolbar {
 		// I think important is fine here to avoid over complexing the selector
 		display: none !important;
 	}
@@ -53,7 +52,7 @@
 		padding-left: 0;
 		padding-right: 0;
 
-		// Compensate for block padding horizontally.
+		// Compensate for block padding.
 		margin-left: -$block-padding;
 		margin-right: -$block-padding;
 	}
@@ -90,10 +89,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%;
@@ -128,20 +129,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;
 		}
 	}
 
@@ -242,14 +229,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;
 	}
 
 	&.has-warning.is-selected .editor-block-list__block-edit::after {
@@ -339,8 +320,7 @@
 		z-index: z-index(".editor-block-list__block {core/image aligned wide or fullwide}");
 
 		// Mover and settings above
-		> .editor-block-mover,
-		> .editor-block-settings-menu {
+		> .editor-block-mover {
 			// This moves the menu up by the height of the button + border + padding.
 			top: -$block-side-ui-width - $block-padding - $block-side-ui-clearance;
 			bottom: auto;
@@ -354,13 +334,7 @@
 			}
 		}
 
-		> .editor-block-settings-menu {
-			width: $block-side-ui-width;
-			flex-direction: row;
-		}
-
-		> .editor-block-mover .editor-block-mover__control,
-		> .editor-block-settings-menu > * {
+		> .editor-block-mover .editor-block-mover__control {
 			float: left;
 		}
 
@@ -391,16 +365,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;
-		}
-
 		// Position mover
 		> .editor-block-mover {
 			left: -$block-padding + $border-width;
@@ -444,11 +408,6 @@
 			border-right-width: 0;
 		}
 
-		// Position ellipsis.
-		> .editor-block-settings-menu {
-			right: $block-side-ui-clearance;
-		}
-
 		// Position mover
 		> .editor-block-mover {
 			left: $border-width;
@@ -491,7 +450,6 @@
 .editor-block-list__block {
 
 	// Left and right block settings and mover.
-	> .editor-block-settings-menu,
 	> .editor-block-mover {
 		position: absolute;
 		width: $block-side-ui-width + $block-side-ui-clearance;
@@ -501,7 +459,6 @@
 	}
 
 	// Position depending on whether selected or not.
-	> .editor-block-settings-menu,
 	> .editor-block-mover {
 		top: -$block-padding - $border-width;
 	}
@@ -511,44 +468,18 @@
 		&.is-multi-selected,
 		&.is-selected,
 		&.is-hovered {
-			.editor-block-settings-menu,
 			.editor-block-mover {
 				z-index: z-index(".editor-block-list__block.is-{selected,hovered} .editor-block-{settings-menu,mover}");
 			}
 		}
 	}
 
-	// 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;
@@ -597,8 +528,7 @@
 		}
 
 		.editor-inserter__toggle,
-		.editor-block-mover__control,
-		.editor-block-settings-menu .components-button {
+		.editor-block-mover__control {
 			width: $icon-button-size;
 			height: $icon-button-size;
 			border-radius: $radius-round-rectangle;
@@ -622,11 +552,6 @@
 				float: left;
 			}
 		}
-
-		// Block Settings
-		.editor-block-settings-menu > * {
-			float: left;
-		}
 	}
 
 	// Reset negative margins on mobile for full-width.
@@ -807,14 +732,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"] & {
@@ -918,15 +837,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;
@@ -971,9 +881,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;
 		}
 
@@ -996,23 +906,15 @@
 .editor-block-list__block .editor-warning {
 	z-index: z-index(".editor-warning");
 	position: relative;
-
-	// Stretch the warning edge to edge.
-	margin-left: -$parent-block-padding - $border-width;
-	margin-right: -$parent-block-padding - $border-width;
-
-	// Stretch the warning less in nested contexts.
-	.editor-block-list__block & {
-		margin-left: -$block-padding - $border-width;
-		margin-right: -$block-padding - $border-width;
-	}
+	margin-right: -$block-padding - $border-width;
+	margin-left: -$block-padding - $border-width;
 
 	// Pull the warning upwards to the edge, and add a negative bottom margin to compensate.
 	margin-bottom: -$block-padding - $border-width;
 	transform: translateY(-$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
index a2e762ac9b51ba..0c8fc2c4ca3e88 100644
--- 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 {
@@ -17,14 +17,8 @@
 		line-height: $default-line-height;
 		color: $dark-gray-900;
 		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;
@@ -86,7 +80,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;
 	}
 }