From 4cbc28de04fe874902303235bd76df4175203cfa Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Fri, 23 Feb 2018 14:07:34 +0100
Subject: [PATCH 1/8] Try: Allow margins to collapse

This PR is not ready to merge, and is still mostly in the proof of concept stage.

What this PR does, is change how we render blocks, toolbars, and selected block borders. We now let the natural block margin shine through the chrome, and arrange blocks on the page. This also means we allow those very same margins to collapse according to standard web rules, which you can read about here: https://css-tricks.com/what-you-should-know-about-collapsing-margins/

Why?

Because this is a more accurate representation of the natural structure of web content. The chief benefit is that once we start loading theme stylesheets into the editor, the standard margins applied by the theme author should map 1:1 to the structure of content inside Gutenberg, whereas right now in master special rules would have to be written for it to visually match, as in master we space blocks using _paddings_ instead of _margins_.

Another benefit of this refactor is that it takes the block-padding math mostly out of the block UI, which will benefit nested block UI. There's still an artificial padding left and right to enable hovering to get to the movers and ellipsis, but we are many steps closer to that being easily addressed with a negative margin, which should fix nested blocks also.

I had hoped that content adjecent to content in the new columns block would also magically collapse, but we probably need a special case for that block as according to the spec, CSS grid based elements don't allow collapsing margins: https://stackoverflow.com/questions/18963421/wanted-css-grid-system-and-collapsing-margins

The next steps for this PR is lots of testing. There are many little UI glitches and positioning math that's just slightly off, which we'd need to fix before a merge. But most importantly it's important to test lots of edgecases, and verify that everything still works as intended.
---
 blocks/library/cover-image/style.scss         |   2 +-
 blocks/library/gallery/editor.scss            |   6 +-
 blocks/library/more/editor.scss               |   4 +-
 edit-post/assets/stylesheets/_mixins.scss     |   9 +-
 edit-post/assets/stylesheets/_variables.scss  |  14 +-
 edit-post/assets/stylesheets/_z-index.scss    |   2 +-
 edit-post/components/layout/style.scss        |   2 +-
 edit-post/components/visual-editor/style.scss |  42 +++--
 editor/components/block-list/style.scss       | 178 +++++++++++-------
 editor/components/block-mover/style.scss      |   2 +-
 editor/components/block-toolbar/style.scss    |   1 +
 .../default-block-appender/style.scss         |  38 ++--
 12 files changed, 174 insertions(+), 126 deletions(-)

diff --git a/blocks/library/cover-image/style.scss b/blocks/library/cover-image/style.scss
index f54d712eca7d5..f9becd0e18eaa 100644
--- a/blocks/library/cover-image/style.scss
+++ b/blocks/library/cover-image/style.scss
@@ -35,7 +35,7 @@
 		line-height: 1.25;
 		z-index: 1;
 		margin-bottom: 0;
-		max-width: $visual-editor-max-width;
+		max-width: $content-width;
 		padding: $block-padding;
 		text-align: center;
 
diff --git a/blocks/library/gallery/editor.scss b/blocks/library/gallery/editor.scss
index 7b4685efd37c5..1abe69076ba77 100644
--- a/blocks/library/gallery/editor.scss
+++ b/blocks/library/gallery/editor.scss
@@ -1,5 +1,7 @@
-.wp-block-gallery:not( .components-placeholder ) {
-	margin: -8px;
+.wp-block-gallery:not( .components-placeholder ):not( .alignfull ) {
+	// allow gallery items to go edge to edge
+	margin-left: -8px;
+	margin-right: -8px;
 }
 
 .blocks-gallery-item {
diff --git a/blocks/library/more/editor.scss b/blocks/library/more/editor.scss
index 73f74aa4419fd..229ecb1b6e130 100644
--- a/blocks/library/more/editor.scss
+++ b/blocks/library/more/editor.scss
@@ -26,8 +26,8 @@
 		content: '';
 		position: absolute;
 		top: calc( 50% );
-		left: $block-mover-padding-visible + $block-padding;
-		right: $block-mover-padding-visible + $block-padding;
+		left: $block-side-ui-padding + $block-padding;
+		right: $block-side-ui-padding + $block-padding;
 		border-top: 3px dashed $light-gray-700;
 		z-index: z-index( '.editor-block-list__block .wp-block-more:before' );
 	}
diff --git a/edit-post/assets/stylesheets/_mixins.scss b/edit-post/assets/stylesheets/_mixins.scss
index e2ed2ea1ac5da..de874f94e00b8 100644
--- a/edit-post/assets/stylesheets/_mixins.scss
+++ b/edit-post/assets/stylesheets/_mixins.scss
@@ -1,3 +1,7 @@
+/**
+ * Breakpoint mixins
+ */
+
 @mixin break-huge() {
 	@media ( min-width: #{ ( $break-huge ) } ) {
 		@content;
@@ -34,6 +38,7 @@
 	}
 }
 
+
 /**
  * Long content fade mixin
  *
@@ -108,8 +113,8 @@
 	}
 }
 
-$visual-editor-max-width-padding: $visual-editor-max-width + $block-mover-padding-visible + $block-mover-padding-visible;
-$float-margin: calc( 50% - #{ $visual-editor-max-width-padding / 2 } );
+$content-width-padding: $content-width + $block-side-ui-padding + $block-side-ui-padding;
+$float-margin: calc( 50% - #{ $content-width-padding / 2 } );
 
 /**
  * Button states and focus styles
diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss
index 65e46440578f5..77b3c859f27a8 100644
--- a/edit-post/assets/stylesheets/_variables.scss
+++ b/edit-post/assets/stylesheets/_variables.scss
@@ -29,23 +29,23 @@ $admin-sidebar-width-collapsed: 36px;
 $shadow-popover: 0px 3px 20px rgba( $dark-gray-900, .1 ), 0px 1px 3px rgba( $dark-gray-900, .1 );
 $shadow-toolbar: 0px 2px 10px rgba( $dark-gray-900, .1 ), 0px 0px 2px rgba( $dark-gray-900, .1 );
 
-// Editor
-$text-editor-max-width: 760px;
-$visual-editor-max-width: 636px;
+// Editor Widths
+$sidebar-width: 280px;
+$text-editor-max-width: 760px;	// @todo: merge with variable below
+$content-width: 636px;	// @todo: leverage theme $content_width variable
+
+// Block UI
 $block-controls-height: 36px;
 $icon-button-size: 36px;
 $icon-button-size-small: 24px;
 $inserter-tabs-height: 36px;
 $block-toolbar-height: 37px;
-$sidebar-width: 280px;
 
 // Blocks
 $block-padding: 14px;
 $block-mover-margin: 18px;
 $block-spacing: 4px;
-// old $block-mover-padding-visible: 32px;
-$block-mover-padding-visible: $icon-button-size-small + $icon-button-size-small;
-
+$block-side-ui-padding: 36px;
 
 // Buttons & UI Widgets
 $button-style__radius-roundrect: 4px;
diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
index 4700de8f57b29..466fa0a69d678 100644
--- a/edit-post/assets/stylesheets/_z-index.scss
+++ b/edit-post/assets/stylesheets/_z-index.scss
@@ -4,7 +4,7 @@
 
 $z-layers: (
 	'.editor-block-switcher__arrow': 1,
-	'.editor-block-list__block:before': -1,
+	'.editor-block-list__block-edit:before': -1,
 	'.editor-block-list__block .wp-block-more:before': -1,
 	'.editor-block-list__block {core/image aligned left or right}': 20,
 	'.editor-block-list__block {core/image aligned wide or fullwide}': 20,
diff --git a/edit-post/components/layout/style.scss b/edit-post/components/layout/style.scss
index 0f6b2b29dfcae..fa54e499f1cc9 100644
--- a/edit-post/components/layout/style.scss
+++ b/edit-post/components/layout/style.scss
@@ -63,7 +63,7 @@
 	clear: both;
 
 	.edit-post-meta-boxes-area {
-		max-width: $visual-editor-max-width;
+		max-width: $content-width;
 		margin: auto;
 	}
 }
diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
index 4b0a49c132e1f..45408969242d7 100644
--- a/edit-post/components/visual-editor/style.scss
+++ b/edit-post/components/visual-editor/style.scss
@@ -35,25 +35,28 @@
 .edit-post-visual-editor .editor-block-list__block {
 	margin-left: auto;
 	margin-right: auto;
-	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
+	max-width: $content-width;
+
+	@include break-small() {
+		.editor-block-list__block-edit {
+			margin-left: -$block-side-ui-padding;
+			margin-right: -$block-side-ui-padding;
+		}
+
+		&[data-align="full"] .editor-block-contextual-toolbar,
+		&[data-align="wide"] .editor-block-contextual-toolbar {
+			max-width: $content-width + 2;	// 1px border left and right
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
 
 	&[data-align="wide"] {
 		max-width: 1100px;
 	}
 
 	&[data-align="full"] {
-		max-width: 100%;
-	}
-
-	&[data-align="full"],
-	&[data-align="wide"] {
-		.editor-block-contextual-toolbar {
-			@include break-small() {
-				width: $visual-editor-max-width + 2;	// 1px border left and right
-			}
-			margin-left: auto;
-			margin-right: auto;
-		}
+		max-width: none;
 	}
 }
 
@@ -73,7 +76,7 @@
 .edit-post-visual-editor .editor-post-title {
 	margin-left: auto;
 	margin-right: auto;
-	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
+	max-width: $content-width + ( 2 * $block-side-ui-padding );
 
 	.editor-post-permalink {
 		left: $block-padding;
@@ -81,18 +84,17 @@
 	}
 
 	@include break-small() {
-		padding: 5px #{ $block-mover-padding-visible - 1px };	// subtract 1px border, because this is an outline
+		padding: 5px #{ $block-side-ui-padding - 1px };	// subtract 1px border, because this is an outline
 
 		.editor-post-permalink {
-			left: $block-mover-padding-visible;
-			right: $block-mover-padding-visible;
+			left: $block-side-ui-padding;
+			right: $block-side-ui-padding;
 		}
 	}
 }
 
 .edit-post-visual-editor .editor-default-block-appender {
-	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
-	clear: left;
+	// Default to centered and content-width, like blocks
 	margin-left: auto;
 	margin-right: auto;
 	position: relative;
@@ -118,5 +120,5 @@
 }
 
 .edit-post-visual-editor .editor-block-list__layout > .editor-block-list__insertion-point {
-	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
+	max-width: $content-width;
 }
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index 1a9be23e4f87c..a376da654a4fb 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -1,46 +1,42 @@
-.editor-block-list__layout .editor-default-block-appender,
+.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
+	@include break-small() {
+		padding-left: $block-side-ui-padding;
+		padding-right: $block-side-ui-padding;
+	}
+}
+
 .editor-block-list__layout .editor-block-list__block {
 	position: relative;
-	margin-bottom: $block-spacing;
 	padding-left: $block-padding;
 	padding-right: $block-padding;
 
-	@include break-small {
+	@include break-small() {
 		// The block mover needs to stay inside the block to allow clicks when hovering the block
-		padding-left: $block-padding + $block-mover-padding-visible;
-		padding-right: $block-padding + $block-mover-padding-visible;
+		padding-left: $block-padding + $block-side-ui-padding;
+		padding-right: $block-padding + $block-side-ui-padding;
 	}
 
-	// Prevent collapsing margins
-	// This allows us control over block boundaries and how blocks fit together visually
-	// It makes things a lot simpler, however it also means block margins and paddings have to be tuned (halved) for the editor.
-	padding-top: .05px;
-	padding-bottom: .05px;
+	// Prevent collapsing margins @todo try and revisit this, it's conducive to theming to allow these to collapse
+	padding-top: .1px;
+	padding-bottom: .1px;
 
-	// Space every block using margin instead of padding
+
+	// Space every block using margins instead of padding
+	// This allows margins to collapse, which gives a better representation of how it looks on the frontend
 	.editor-block-list__block-edit {
 		margin-top: $block-padding;
 		margin-bottom: $block-padding;
 	}
 
-	// Block outline container
-	&:before {
-		z-index: z-index( '.editor-block-list__block:before' );
-		content: '';
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		outline: 1px solid transparent;
+	margin-bottom: $block-spacing;
 
-		@include break-small {
-			left: $block-mover-padding-visible;
-			right: $block-mover-padding-visible;
-		}
-	}
 
-	// Block warnings
+	/**
+	 * Warnings
+	 */
+
 	&.has-warning .editor-block-list__block-edit {
 		position: relative;
 		min-height: 250px;
@@ -64,7 +60,11 @@
 		background-image: linear-gradient( to bottom, transparent, #fff );
 	}
 
-	// simpler style for a block that has cursor focus (but hasn't been selected)
+
+	/**
+	 * Hovered Block style
+	 */
+
 	&.is-selected > .editor-block-mover:before,
 	&.is-hovered > .editor-block-mover:before,
 	&.is-selected > .editor-block-settings-menu:before,
@@ -106,17 +106,42 @@
 		border-left: none;
 	}
 
+
+	/**
+	 * Selected Block style
+	 */
+
+	.editor-block-list__block-edit {
+		position: relative;
+
+		&:before {
+			z-index: z-index( '.editor-block-list__block-edit:before' );
+			content: '';
+			position: absolute;
+			top: -$block-padding;
+			right: -$block-padding;
+			bottom: -$block-padding;
+			left: -$block-padding;
+			outline: 1px solid transparent;
+		}
+
+	}
+
 	// focused block-style
-	&.is-selected:before {
+	&.is-selected > .editor-block-list__block-edit:before {
 		outline: 1px solid $light-gray-500;
 	}
 
 	// give reusable blocks a dashed outline
-	&.is-reusable.is-selected:before {
+	&.is-reusable.is-selected > .editor-block-list__block-edit:before {
 		outline: 1px dashed $light-gray-500;
 	}
 
-	// selection style for textarea
+
+	/**
+	 * Selection Style
+	 */
+
 	::-moz-selection {
 		background: $blue-medium-highlight;
 	}
@@ -130,10 +155,12 @@
 		background: transparent;
 	}
 
-	&.is-multi-selected:before {
+	&.is-multi-selected .editor-block-list__block-edit:before {
 		background: $blue-medium-highlight;
 	}
 
+
+	// @todo, this appears to be unused
 	.iframe-overlay {
 		position: relative;
 	}
@@ -218,10 +245,24 @@
 
 	// Full-wide
 	&[data-align="full"] {
-		padding-left: 0;
-		padding-right: 0;
 
-		&:before {
+		// compensate for main container padding
+		@include break-small() {
+			margin-left: -$block-side-ui-padding;
+			margin-right: -$block-side-ui-padding;
+		}
+
+		.editor-block-list__block-edit {
+			margin-left: -$block-padding;
+			margin-right: -$block-padding;
+
+			@include break-small() {
+				margin-left: -$block-side-ui-padding - $block-padding;
+				margin-right: -$block-side-ui-padding - $block-padding;
+			}
+		}
+
+		.editor-block-list__block-edit:before {
 			left: 0;
 			right: 0;
 			border-left-width: 0;
@@ -272,11 +313,11 @@
 	}
 
 	// Dropzones
-	& > .components-drop-zone {
+	& .components-drop-zone {
 		border: none;
 		top: -4px;
 		bottom: -3px;
-		margin: 0 $block-mover-padding-visible;
+		margin: 0 $block-side-ui-padding;
 		border-radius: 0;
 
 		.components-drop-zone__content {
@@ -294,7 +335,11 @@
 		}
 	}
 
-	// Left and right side UI
+
+	/**
+	 * Left and right side UI
+	 */
+
 	> .editor-block-settings-menu,
 	> .editor-block-mover {
 		position: absolute;
@@ -304,12 +349,12 @@
 
 	// Right side UI
 	> .editor-block-settings-menu {
-		right: $block-mover-margin;
+		right: #{ -1 * $block-mover-margin - $block-padding + 2px };
 		padding-top: 2px;
 
 		// Mobile
 		display: none;
-		@include break-small {
+		@include break-small() {
 			display: flex;
 			flex-direction: column;
 		}
@@ -317,13 +362,13 @@
 
 	// Left side UI
 	> .editor-block-mover {
-		left: $block-mover-margin + 2px;
+		left: -$block-mover-margin - $block-padding + 4px;
 		padding-top: 6px;
 		z-index: z-index( '.editor-block-mover' );
 
 		// Mobile
 		display: none;
-		@include break-small {
+		@include break-small() {
 			display: block;
 		}
 	}
@@ -334,6 +379,10 @@
 		flex-direction: row;
 		margin-top: $item-spacing;
 
+		@include break-small() {
+			display: none;
+		}
+
 		// Movers, inserter, trash & ellipsis
 		.editor-inserter {
 			position: relative;
@@ -360,6 +409,7 @@
 
 		// Movers
 		.editor-block-mover {
+			display: flex;
 			margin-right: auto;
 
 			.editor-inserter,
@@ -386,7 +436,7 @@
 
 .editor-block-list__insertion-point-indicator {
 	position: absolute;
-	top: 16px;
+	top: $block-padding - 1px; // Half the empty space between two blocks, minus the 2px height
 	height: 2px;
 	left: 0;
 	right: 0;
@@ -399,13 +449,14 @@
 	border: none;
 	display: block;
 	top: 0;
-	height: 34px; // Matches the whole empty space between two blocks
+	height: $block-padding * 2; // Matches the whole empty space between two blocks
 	width: 100%;
 	cursor: pointer;
+	padding: 0;	// Unstyle inherited padding from core button
 
 	&:before {
 		position: absolute;
-		top: 16px;
+		top: $block-padding - 1px; // Half the empty space between two blocks, minus the 2px height
 		height: 2px;
 		left: $block-padding;
 		right: $block-padding;
@@ -438,34 +489,24 @@
 	}
 }
 
+// In between blocks
 .editor-block-list__block > .editor-block-list__insertion-point {
 	position: absolute;
-	bottom: -19px;
-	height: 34px; // Matches the whole empty space between two blocks
+	bottom: -$block-padding;
+	height: $block-padding * 2; // Matches the whole empty space between two blocks
 	top: auto;
 	left: 0;
 	right: 0;
-
-	@include break-small {
-		left: $block-mover-padding-visible;
-		right: $block-mover-padding-visible;
-	}
 }
 
+// Before the first block
 .editor-block-list__layout > .editor-block-list__insertion-point {
 	position: relative;
+	top: -$block-padding;
 	margin-left: auto;
 	margin-right: auto;
-	top: -19px;
 	left: 0;
 	right: 0;
-
-	.editor-block-list__insertion-point-inserter:before {
-		@include break-small {
-			left: $block-mover-padding-visible;
-			right: $block-mover-padding-visible;
-		}
-	}
 }
 
 .editor-block-list__block .editor-block-list__block-html-textarea {
@@ -514,9 +555,10 @@
 	// put toolbar snugly to side edges on mobile
 	margin-left: -$block-padding - 1px;	// stack borders
 	margin-right: -$block-padding - 1px;
+
 	@include break-small() {
-		margin-left: auto;
-		margin-right: auto;
+		margin-left: -$block-padding - $block-side-ui-padding - 1px;	// stack borders
+		margin-right: -$block-padding - $block-side-ui-padding - 1px;
 	}
 
 	// on mobile, toolbars fix differently
@@ -556,17 +598,13 @@
 	& > * {
 		pointer-events: auto;
 	}
-
-	@include break-small() {
-		margin-left: - $block-padding - 1px;
-		margin-right: - $block-padding - 1px;
-	}
 }
 
+// @todo: verify
 .editor-block-list__side-inserter {
 	position: absolute;
-	top: 10px;
-	right: 10px;
+	top: $item-spacing;
+	right: $item-spacing;
 	display: none;
 
 	@include break-small {
@@ -588,4 +626,6 @@
 		left: 10px;
 		right: auto;
 	}
+	top: $item-spacing;
+	right: $item-spacing;
 }
diff --git a/editor/components/block-mover/style.scss b/editor/components/block-mover/style.scss
index 5e85bcf0ad04c..f15d16345db7a 100644
--- a/editor/components/block-mover/style.scss
+++ b/editor/components/block-mover/style.scss
@@ -1,4 +1,4 @@
-// Mover icon buttons$
+// Mover icon buttons
 .editor-block-mover__control {
 	display: block;
 	padding: 2px;
diff --git a/editor/components/block-toolbar/style.scss b/editor/components/block-toolbar/style.scss
index 03d83c75351ab..f015989f05fe0 100644
--- a/editor/components/block-toolbar/style.scss
+++ b/editor/components/block-toolbar/style.scss
@@ -3,6 +3,7 @@
 	overflow: auto; // allow horizontal scrolling on mobile
 	flex-grow: 1;
 	width: 100%;
+	background: $white;
 
 	.components-toolbar {
 		border: none;
diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss
index b0d2c652b3510..60bb0bdaa29f0 100644
--- a/editor/components/default-block-appender/style.scss
+++ b/editor/components/default-block-appender/style.scss
@@ -2,6 +2,17 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 
 .editor-default-block-appender {
 	.editor-default-block-appender__content {
+		border: none;
+		background: none;
+		box-shadow: none;
+		display: block;
+		margin: 0;
+		max-width: none; // fixes a bleed issue from the admin
+		padding: $block-padding;
+		height: $empty-paragraph-height;
+		font-size: $editor-font-size;
+		cursor: text;
+		width: 100%;
 		height: $empty-paragraph-height;
 		color: $dark-gray-300;
 		outline: 1px solid transparent;
@@ -53,27 +64,14 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 			left: 10px;
 			right: auto;
 		}
-	}
-}
-
-.editor-default-block-appender__content,
-input[type=text].editor-default-block-appender__content {
-	border: none;
-	background: none;
-	box-shadow: none;
-	display: block;
-	width: 100%;
-	height: $empty-paragraph-height;
-	font-size: $editor-font-size;
-	cursor: text;
-	margin: 0;
-	max-width: none;	// fixes a bleed issue from the admin
 
-	&:focus {
-		outline: 1px solid $light-gray-500;
+		&:hover,
+		&:focus {
+			outline: 1px solid $light-gray-500;
+		}
 	}
-}
 
-.editor-default-block-appender .components-drop-zone__content-icon {
-	display: none;
+	.components-drop-zone__content-icon {
+		display: none;
+	}
 }

From ba7ace193e979efb80d6a69f6c010e81c4f93c04 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 13 Mar 2018 10:24:28 +0100
Subject: [PATCH 2/8] Fix _some_ breakage per rebase.

More fixes to come.
---
 edit-post/components/visual-editor/style.scss | 1 +
 editor/components/block-list/style.scss       | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
index 45408969242d7..f9e4fc27ec9b8 100644
--- a/edit-post/components/visual-editor/style.scss
+++ b/edit-post/components/visual-editor/style.scss
@@ -121,4 +121,5 @@
 
 .edit-post-visual-editor .editor-block-list__layout > .editor-block-list__insertion-point {
 	max-width: $content-width;
+	position: relative;
 }
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index a376da654a4fb..b35d345b58aeb 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -600,7 +600,6 @@
 	}
 }
 
-// @todo: verify
 .editor-block-list__side-inserter {
 	position: absolute;
 	top: $item-spacing;
@@ -608,7 +607,7 @@
 	display: none;
 
 	@include break-small {
-		right: $block-mover-padding-visible + 10px;
+		right: $block-side-ui-padding + 10px;
 		display: block;
 	}
 }

From 2a3047965f8a3bfc0c1f9bfd137d07fead436784 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 13 Mar 2018 10:56:37 +0100
Subject: [PATCH 3/8] Try to simplify the quick-buttons in the appender

More work to do still.
---
 editor/components/block-list/style.scss       | 29 ---------
 .../default-block-appender/style.scss         | 65 ++++++++++---------
 .../inserter-with-shortcuts/style.scss        |  6 +-
 3 files changed, 38 insertions(+), 62 deletions(-)

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index b35d345b58aeb..9086a1d6c020d 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -599,32 +599,3 @@
 		pointer-events: auto;
 	}
 }
-
-.editor-block-list__side-inserter {
-	position: absolute;
-	top: $item-spacing;
-	right: $item-spacing;
-	display: none;
-
-	@include break-small {
-		right: $block-side-ui-padding + 10px;
-		display: block;
-	}
-}
-
-.editor-block-list__empty-block-inserter {
-	position: absolute;
-		top: 10px;
-		right: 10px;
-
-	.editor-inserter__toggle {
-		border-radius: 50%;
-	}
-
-	@include break-small {
-		left: 10px;
-		right: auto;
-	}
-	top: $item-spacing;
-	right: $item-spacing;
-}
diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss
index 60bb0bdaa29f0..4291f66e1bcae 100644
--- a/editor/components/default-block-appender/style.scss
+++ b/editor/components/default-block-appender/style.scss
@@ -23,20 +23,9 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 		border-radius: 50%;
 	}
 
-	.editor-inserter-with-shortcuts {
-		position: absolute;
-			top: 10px;
-			right: 58px;
-		display: none;
-
-		.components-icon-button {
-			color: $light-gray-700;
-			transition: color 0.2s;
-		}
-
-		@include break-small {
-			display: flex;
-		}
+	.editor-inserter-with-shortcuts .components-icon-button {
+		color: $light-gray-700;
+		transition: color 0.2s;
 	}
 
 	&:hover {
@@ -53,25 +42,41 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 		}
 	}
 
-	.editor-inserter {
-		opacity: 0;
-		position: absolute;
-			top: 10px;
-			right: 10px;
-		transition: opacity 0.2s;
+	// Dropzone
+	.components-drop-zone__content-icon {
+		display: none;
+	}
+}
 
-		@include break-small {
-			left: 10px;
-			right: auto;
-		}
+// Left side inserter icon
+.editor-block-list__empty-block-inserter,
+.editor-inserter {
+	opacity: 0;
+	position: absolute;
+		top: $item-spacing;
+		right: $item-spacing;
+	transition: opacity 0.2s;
 
-		&:hover,
-		&:focus {
-			outline: 1px solid $light-gray-500;
-		}
+	@include break-small {
+		left: -$block-side-ui-padding;
+		right: auto;
 	}
 
-	.components-drop-zone__content-icon {
-		display: none;
+	.editor-inserter__toggle {
+		border-radius: 50%;
+	}
+}
+
+// Quick block insertion icons on the right
+.editor-inserter-with-shortcuts,
+.editor-block-list__side-inserter {
+	position: absolute;
+	top: $item-spacing;
+	right: $item-spacing;
+	display: none;
+
+	@include break-small {
+		right: -$block-padding;
+		display: flex;
 	}
 }
diff --git a/editor/components/inserter-with-shortcuts/style.scss b/editor/components/inserter-with-shortcuts/style.scss
index ca174cdf31115..11acdf449f419 100644
--- a/editor/components/inserter-with-shortcuts/style.scss
+++ b/editor/components/inserter-with-shortcuts/style.scss
@@ -9,8 +9,8 @@
 }
 
 .editor-inserter-with-shortcuts__block {
-	margin-right: 5px;
-	width: 36px;
-	height: 36px;
+	margin-right: $block-spacing;
+	width: $icon-button-size;
+	height: $icon-button-size;
 	padding-top: 8px;
 }

From e98d0ae55772c9decd96295f1fbab689d20a339c Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 13 Mar 2018 11:06:11 +0100
Subject: [PATCH 4/8] Fix issues with positioning.

---
 editor/components/default-block-appender/style.scss | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss
index 4291f66e1bcae..d898958039105 100644
--- a/editor/components/default-block-appender/style.scss
+++ b/editor/components/default-block-appender/style.scss
@@ -50,8 +50,7 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 
 // Left side inserter icon
 .editor-block-list__empty-block-inserter,
-.editor-inserter {
-	opacity: 0;
+.editor-default-block-appender .editor-inserter {
 	position: absolute;
 		top: $item-spacing;
 		right: $item-spacing;
@@ -68,11 +67,10 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 }
 
 // Quick block insertion icons on the right
-.editor-inserter-with-shortcuts,
-.editor-block-list__side-inserter {
+.editor-inserter-with-shortcuts {
 	position: absolute;
 	top: $item-spacing;
-	right: $item-spacing;
+	right: $block-padding;
 	display: none;
 
 	@include break-small {

From d99b8e02eede08adc66e2a1a85c84ae8ae1e3bdf Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 13 Mar 2018 11:18:04 +0100
Subject: [PATCH 5/8] Fix so it's the same as master.

Would like to optimize the CSS a bit further.
---
 .../components/default-block-appender/style.scss   | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss
index d898958039105..2f33fe1872edd 100644
--- a/editor/components/default-block-appender/style.scss
+++ b/editor/components/default-block-appender/style.scss
@@ -19,13 +19,15 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 		transition: 0.2s outline;
 	}
 
-	.editor-inserter__toggle {
-		border-radius: 50%;
+	.editor-inserter {
+		opacity: 0;
 	}
 
-	.editor-inserter-with-shortcuts .components-icon-button {
-		color: $light-gray-700;
-		transition: color 0.2s;
+	.editor-inserter-with-shortcuts {
+		.components-icon-button {
+			color: $light-gray-700;
+			transition: color 0.2s;
+		}
 	}
 
 	&:hover {
@@ -74,7 +76,7 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 	display: none;
 
 	@include break-small {
-		right: -$block-padding;
+		right: 0;
 		display: flex;
 	}
 }

From de3cb32998a40e3707268b8fd655cfff66891d1f Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 13 Mar 2018 11:32:55 +0100
Subject: [PATCH 6/8] Clean up appender CSS.

---
 editor/components/default-block-appender/style.scss | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss
index 2f33fe1872edd..783c41beedfbc 100644
--- a/editor/components/default-block-appender/style.scss
+++ b/editor/components/default-block-appender/style.scss
@@ -19,10 +19,7 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 		transition: 0.2s outline;
 	}
 
-	.editor-inserter {
-		opacity: 0;
-	}
-
+	// Show quick insertion icons faded until hover
 	.editor-inserter-with-shortcuts {
 		.components-icon-button {
 			color: $light-gray-700;
@@ -30,6 +27,11 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 		}
 	}
 
+	// Don't show inserter until mousing
+	.editor-inserter {
+		opacity: 0;
+	}
+
 	&:hover {
 		.editor-inserter-with-shortcuts {
 			opacity: 1;
@@ -55,7 +57,7 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 .editor-default-block-appender .editor-inserter {
 	position: absolute;
 		top: $item-spacing;
-		right: $item-spacing;
+		right: $item-spacing;	// show on the right on mobile
 	transition: opacity 0.2s;
 
 	@include break-small {

From e87bb0bcc4c488070899ca86856f7dcca5a61fad Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Thu, 15 Mar 2018 10:23:52 +0100
Subject: [PATCH 7/8] Fix regression per rebase.

---
 edit-post/components/visual-editor/style.scss | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
index f9e4fc27ec9b8..162bfcb62656a 100644
--- a/edit-post/components/visual-editor/style.scss
+++ b/edit-post/components/visual-editor/style.scss
@@ -27,7 +27,7 @@
 .edit-post-visual-editor .editor-writing-flow__click-redirect {
 	// Collapse to minimum height of 50px, to fully occupy editor bottom pad.
 	height: 50px;
-	width: $visual-editor-max-width;
+	width: $content-width;
 	// Offset for: Visual editor padding, block (default appender) margin.
 	margin: #{ -1 * $block-spacing } auto -50px;
 }
@@ -95,6 +95,7 @@
 
 .edit-post-visual-editor .editor-default-block-appender {
 	// Default to centered and content-width, like blocks
+	max-width: $content-width;
 	margin-left: auto;
 	margin-right: auto;
 	position: relative;
@@ -106,11 +107,11 @@
 	}
 
 	@include break-small() {
-		padding: 0 $block-mover-padding-visible;	// don't subtract 1px border because it's a border not an outline
+		padding: 0 $block-side-ui-padding;	// don't subtract 1px border because it's a border not an outline
 
 		.components-drop-zone {
-			left: $block-mover-padding-visible;
-			right: $block-mover-padding-visible;
+			left: $block-side-ui-padding;
+			right: $block-side-ui-padding;
 		}
 
 		.editor-default-block-appender__content {

From 5723e689a4341c8910cc9355b374e4353acc241d Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Thu, 15 Mar 2018 10:27:10 +0100
Subject: [PATCH 8/8] Remove regressed padding.

---
 edit-post/components/visual-editor/style.scss | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
index 162bfcb62656a..da33bcec81e75 100644
--- a/edit-post/components/visual-editor/style.scss
+++ b/edit-post/components/visual-editor/style.scss
@@ -107,13 +107,6 @@
 	}
 
 	@include break-small() {
-		padding: 0 $block-side-ui-padding;	// don't subtract 1px border because it's a border not an outline
-
-		.components-drop-zone {
-			left: $block-side-ui-padding;
-			right: $block-side-ui-padding;
-		}
-
 		.editor-default-block-appender__content {
 			padding: 0 $block-padding;
 		}