From 910fd0d536bd57446fde729179a7f15e7311699b Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 10 Oct 2019 08:59:13 +0200
Subject: [PATCH] Try: Remove complex left/right block margins.

Those margins were created to accommodate a mover control that was available on hover. Given the mover control is now on-select only, this margin is no longer necessary.

This is a work in progress. When done it needs to not land in 5.3, and it will need a dev-note when ready.
---
 packages/base-styles/_variables.scss          |   2 +-
 .../src/components/block-list/style.scss      | 149 +++++-------------
 .../src/components/block-mover/style.scss     |   1 -
 .../block-library/src/columns/editor.scss     |  13 +-
 .../src/components/visual-editor/style.scss   |  23 +--
 5 files changed, 61 insertions(+), 127 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 652be4700ff22..75234bd5fb779 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -41,7 +41,7 @@ $shadow-modal: 0 3px 30px rgba($dark-gray-900, 0.2);
 
 // Editor Widths
 $sidebar-width: 280px;
-$content-width: 610px; // For the visual width, subtract 30px (2 * $block-padding + 2px borders). This comes to 580px, which is optimized for 70 characters.
+$content-width: 580px; // This is optimized for 70 characters.
 
 // Block UI
 $border-width: 1px;
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index f70a789f4e704..3a1046ae68c59 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -35,43 +35,41 @@
 
 
 /**
- * General layout
+ * General Post Content Layout
  */
 
+// Add side padding for the main block container, currently post_content.
+// The purpose of this padding is to ensure that on small viewports, there is
+// room for the block border that sits 14px ($block-padding) offset from the
+// block footprint, as well as the side-UI.
 .block-editor-block-list__layout {
-	// Make room in the main content column for the side UI.
-	// The side UI uses negative margins to position itself so as to not affect the block width.
+	padding-left: $block-padding;
+	padding-right: $block-padding;
+
+	// Beyond the mobile breakpoint, compensate for side UI.
 	@include break-small() {
-		padding-left: $block-container-side-padding;
-		padding-right: $block-container-side-padding;
+		padding-left: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
+		padding-right: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
 	}
 
-	// Don't add side padding for nested blocks.
-	.block-editor-block-list__block & {
-		// Compensate for side UI.
+	// Don't propogate that padding to nested blocks.
+	.block-editor-block-list__layout {
 		padding-left: 0;
 		padding-right: 0;
-
-		// Compensate for block padding.
-		margin-left: -$block-padding;
-		margin-right: -$block-padding;
 	}
 }
 
+
+/**
+ * Notices & Block Selected/Hover Styles.
+ */
+
 .block-editor-block-list__layout .block-editor-block-list__block {
 	position: relative;
-	padding-left: $block-padding;
-	padding-right: $block-padding;
 
 	// Break long strings of text without spaces so they don't overflow the block.
 	overflow-wrap: break-word;
 
-	@include break-small() {
-		// The block mover needs to stay inside the block to allow clicks when hovering the block-.
-		padding-left: $block-padding + $block-side-ui-width + $block-side-ui-clearance - $border-width;
-		padding-right: $block-padding + $block-side-ui-width + $block-side-ui-clearance - $border-width;
-	}
-
 	/**
 	 * Notices
 	 */
@@ -314,7 +312,7 @@
 		}
 	}
 
-	&.has-warning.is-selected .editor-block-list__block-edit::before {
+	&.has-warning.is-selected .block-editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
 		border-color: $dark-opacity-light-800;
 		border-left-color: transparent;
@@ -348,7 +346,7 @@
 		}
 	}
 
-	// Appender
+	// Appender.
 	&.is-typing .block-editor-block-list__side-inserter {
 		opacity: 0;
 		animation: none;
@@ -358,7 +356,7 @@
 		@include edit-post__fade-in-animation;
 	}
 
-	// Reusable blocks
+	// Reusable blocks.
 	&.is-reusable > .block-editor-block-list__block-edit::before {
 		border: $border-width dashed $dark-opacity-light-500;
 
@@ -378,7 +376,7 @@
 		}
 	}
 
-	// Reusable Blocks clickthrough overlays
+	// Reusable Blocks clickthrough overlays.
 	&.is-reusable > .block-editor-block-list__block-edit .block-editor-inner-blocks.has-overlay {
 		// Remove only the top click overlay.
 		&::after {
@@ -392,7 +390,7 @@
 	}
 
 
-	// Alignments
+	// Alignments.
 	&[data-align="left"],
 	&[data-align="right"] {
 		// Without z-index, won't be clickable as "above" adjacent content.
@@ -448,7 +446,7 @@
 		}
 	}
 
-	// Left
+	// Left.
 	&[data-align="left"] {
 		// This is in the editor only; the image should be floated on the frontend.
 		> .block-editor-block-list__block-edit {
@@ -469,7 +467,7 @@
 		}
 	}
 
-	// Right
+	// Right.
 	&[data-align="right"] {
 		// Right: This is in the editor only; the image should be floated on the frontend.
 		> .block-editor-block-list__block-edit {
@@ -490,7 +488,7 @@
 		}
 	}
 
-	// Wide and full-wide
+	// Wide and full-wide.
 	&[data-align="full"],
 	&[data-align="wide"] {
 		clear: both;
@@ -534,7 +532,7 @@
 		// Align block toolbar to floated content.
 		// Extra specificity is needed to avoid applying this to innerblocks.
 		@include break-small() {
-			> .editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
+			> .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
 				/*!rtl:begin:ignore*/
 				left: $block-side-ui-width * 3 + ($grid-size-small * 1.5);
 				/*!rtl:end:ignore*/
@@ -542,7 +540,7 @@
 		}
 
 		@include break-xlarge() {
-			> .editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
+			> .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
 				/*!rtl:begin:ignore*/
 				left: $block-padding;
 				/*!rtl:end:ignore*/
@@ -550,7 +548,7 @@
 		}
 	}
 
-	// Wide
+	// Wide.
 	&[data-align="wide"] {
 		// Position mover
 		&.is-multi-selected > .block-editor-block-mover,
@@ -559,33 +557,16 @@
 		}
 	}
 
-	// Full-wide
+	// Full-wide.
 	&[data-align="full"] {
 		// Position hover label on the left for the top level block.
 		> .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb {
 			left: 0;
 		}
 
-		// Compensate for main container padding and subtract border.
-		@include break-small() {
-			margin-left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width;
-			margin-right: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width;
-		}
-
 		> .block-editor-block-list__block-edit {
-			margin-left: -$block-padding;
-			margin-right: -$block-padding;
-
-			@include break-small() {
-				margin-left: -$block-side-ui-width - $block-side-ui-clearance - $block-padding;
-				margin-right: -$block-side-ui-width - $block-side-ui-clearance - $block-padding;
-			}
-
-			// This explicitly sets the width of the block, to override
-			// `width: fit-content` from the image block.
-			figure {
-				width: 100%;
-			}
+			margin-left: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width;
+			margin-right: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width;
 		}
 
 		> .block-editor-block-list__block-edit::before {
@@ -595,19 +576,19 @@
 			border-right-width: 0;
 		}
 
-		// Position mover
+		// Position mover.
 		&.is-multi-selected > .block-editor-block-mover,
 		> .block-editor-block-list__block-edit > .block-editor-block-mover {
-			left: $border-width;
+			left: $block-padding;
 		}
 	}
 
-	// Clear floats
+	// Clear floats.
 	&[data-clear="true"] {
 		float: none;
 	}
 
-	// Dropzones
+	// Dropzones.
 	.block-editor-block-drop-zone {
 		top: -4px;
 		bottom: -3px;
@@ -632,39 +613,7 @@
 
 
 /**
- * Styles that affect inner-block containers (nested blocks).
- */
-
-// Hide trailing appender for non-empty blocks, until selected.
-.block-editor-inner-blocks {
-	.block-editor-block-list__block + .block-list-appender {
-		display: none;
-
-		// When a parent container is selected, show the appender.
-		.is-selected & {
-			display: block;
-		}
-	}
-
-	// When a child of a parent is selected, show the adjacent appender.
-	.block-editor-block-list__block.is-selected + .block-list-appender {
-		display: block;
-	}
-
-	/* @todo:
-	The two rules above can be simplified & combined when https://github.com/WordPress/gutenberg/pull/14961 is merged,
-	into the following:
-
-	.is-selected &,
-	.has-child-selected & {
-		display: block;
-	}
-	*/
-}
-
-
-/**
- * Left and right side UI; Unified toolbar on Mobile
+ * Left and right side UI; Unified toolbar on Mobile.
  */
 
 .block-editor-block-list__block {
@@ -694,10 +643,8 @@
 	}
 
 	// Left side UI.
-	&.is-multi-selected > .block-editor-block-mover,
-	> .block-editor-block-list__block-edit > .block-editor-block-mover {
-		padding-right: $block-side-ui-clearance;
-
+	> .block-editor-block-list__block-edit > .block-editor-block-mover,
+	&.is-multi-selected > .block-editor-block-mover {
 		// Position for top level blocks.
 		left: -$block-side-ui-width - $block-side-ui-clearance - $block-padding - $border-width - $grid-size;
 
@@ -707,10 +654,6 @@
 			display: block;
 		}
 	}
-
-	&.is-multi-selected > .block-editor-block-mover {
-		left: -$block-side-ui-width - $block-side-ui-clearance;
-	}
 }
 
 
@@ -881,15 +824,9 @@
 		height: $block-padding * 2;
 		bottom: auto;
 
-		// Go edge to edge on mobile.
-		left: 0;
-		right: 0;
-
-		// Beyond mobile, make sure the toolbar overlaps the hover style.
-		@include break-small() {
-			left: -$border-width;
-			right: -$border-width;
-		}
+		// Match width of actual content.
+		left: $block-padding;
+		right: $block-padding;
 	}
 
 	&[data-align="full"] > .block-editor-block-list__insertion-point {
@@ -968,7 +905,7 @@
 			box-shadow: none;
 		}
 
-		.editor-block-toolbar {
+		.block-editor-block-toolbar {
 			border-left: none;
 		}
 	}
diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index 260d456c73d3c..61493ee98b4f0 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -1,6 +1,5 @@
 .block-editor-block-mover {
 	@include break-small() {
-		min-height: $empty-paragraph-height;
 		opacity: 0;
 		background: $white;
 		border: 1px solid $dark-opacity-light-800;
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 60c6730fc2b08..31189ccf39bef 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -3,9 +3,6 @@
 // Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere
 // When using CSS grid, margins do not collapse on the container.
 .wp-block-columns .editor-block-list__layout {
-	margin-left: 0;
-	margin-right: 0;
-
 	// This max-width is used to constrain the main editor column, it should not cascade into columns
 	.editor-block-list__block {
 		max-width: none;
@@ -62,10 +59,10 @@
 
 			// Beyond mobile, allow 2 columns.
 			@include break-small() {
-				flex-basis: calc(50% - (#{$grid-size-large} + #{$block-padding * 2}));
+				flex-basis: calc(50% - (#{$grid-size-large}));
 				flex-grow: 0;
-				margin-left: $block-padding;
-				margin-right: $block-padding;
+				margin-left: 0;
+				margin-right: 0;
 			}
 
 			// Add space between columns. Themes can customize this if they wish to work differently.
@@ -73,14 +70,14 @@
 			// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
 			@include break-small() {
 				&:nth-child(even) {
-					margin-left: calc(#{$grid-size-large * 2} + #{$block-padding});
+					margin-left: calc(#{$grid-size-large * 2});
 				}
 			}
 
 			// When columns are in a single row, add space before all except the first.
 			@include break-medium() {
 				&:not(:first-child) {
-					margin-left: calc(#{$grid-size-large * 2} + #{$block-padding});
+					margin-left: calc(#{$grid-size-large * 2});
 				}
 			}
 
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index cfa17d6d3e517..6346b4f02bcc7 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -24,12 +24,6 @@
 	margin-right: auto;
 
 	@include break-small() {
-		// Compensate for side UI width.
-		.block-editor-block-list__block-edit {
-			margin-left: -$block-side-ui-width;
-			margin-right: -$block-side-ui-width;
-		}
-
 		// Center the block toolbar on wide and full-wide blocks.
 		// Use specific selector to not affect nested block toolbars.
 		&[data-align="wide"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar,
@@ -60,14 +54,20 @@
 	}
 }
 
-// The base width of the title should match that of blocks even if it isn't a block
+
+// The base width of the title should match that of blocks even if it isn't a block.
+// @todo: This duplicates CSS from line 49 in block-list/style.scss, and should be
+// removed when the Title field becomes an actual block.
 .editor-post-title {
+	// Beyond the mobile breakpoint, compensate for side UI.
 	@include break-small() {
-		padding-left: $block-container-side-padding;
-		padding-right: $block-container-side-padding;
+		padding-left: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
+		padding-right: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
 	}
 }
+
 .edit-post-visual-editor .editor-post-title__block {
+	// Center.
 	margin-left: auto;
 	margin-right: auto;
 
@@ -83,10 +83,11 @@
 	}
 
 	// Stretch to mimic outline padding on desktop.
+	// Note that we can't target the textarea as it can't be stretched.
 	@include break-small() {
 		> div {
-			margin-left: -$block-side-ui-clearance;
-			margin-right: -$block-side-ui-clearance;
+			margin-left: -$block-padding - $block-side-ui-clearance;
+			margin-right: -$block-padding - $block-side-ui-clearance;
 		}
 	}
 }