From e3740df1e5158165486165e9a85d6fe41a108f7b Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 12 Jun 2018 09:41:58 +0200
Subject: [PATCH 1/6] Add right border when block toolbar scrolls.

---
 editor/components/block-list/style.scss    | 8 ++++++--
 editor/components/block-toolbar/style.scss | 5 ++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index 76e5b770e6ec8..75ea86aeffd46 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -813,9 +813,13 @@
 	width: 100%;
 	background: $white;
 	border: 1px solid $light-gray-500;
-	border-right: none;
 
-	// this prevents floats from messing up the position
+	// Hide right border on desktop, where the .components-toolbar instead has a right border.
+	@include break-small() {
+		border-right: none;
+	}
+
+	// This prevents floats from messing up the position.
 	position: absolute;
 	left: 0;
 
diff --git a/editor/components/block-toolbar/style.scss b/editor/components/block-toolbar/style.scss
index 8b1c5641f4238..33ba95efb95c4 100644
--- a/editor/components/block-toolbar/style.scss
+++ b/editor/components/block-toolbar/style.scss
@@ -3,10 +3,10 @@
 	flex-grow: 1;
 	width: 100%;
 	background: $white;
-	overflow: auto; // allow horizontal scrolling on mobile
+	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
 
-	// allow overflow on desktop
+	// Allow overflow on desktop.
 	@include break-small() {
 		overflow: inherit;
 	}
@@ -18,7 +18,6 @@
 		border-right: 1px solid $light-gray-500;
 	}
 
-	// this should probably have its own class
 	> div {
 		display: flex;
 	}

From 83ae1ea8c7cfb025389ee11cc8982453f1ccfbdb Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 12 Jun 2018 09:45:46 +0200
Subject: [PATCH 2/6] Remove transformations from Block More menu.

---
 editor/components/block-settings-menu/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/editor/components/block-settings-menu/index.js b/editor/components/block-settings-menu/index.js
index b12603023067e..1c57035949118 100644
--- a/editor/components/block-settings-menu/index.js
+++ b/editor/components/block-settings-menu/index.js
@@ -19,7 +19,6 @@ import './style.scss';
 import BlockModeToggle from './block-mode-toggle';
 import BlockRemoveButton from './block-remove-button';
 import BlockDuplicateButton from './block-duplicate-button';
-import BlockTransformations from './block-transformations';
 import SharedBlockSettings from './shared-block-settings';
 import UnknownConverter from './unknown-converter';
 import _BlockSettingsMenuFirstItem from './block-settings-menu-first-item';
@@ -100,7 +99,6 @@ export class BlockSettingsMenu extends Component {
 							{ count === 1 && <UnknownConverter uid={ firstBlockUID } role="menuitem" /> }
 							<BlockDuplicateButton uids={ uids } rootUID={ rootUID } role="menuitem" />
 							{ count === 1 && <SharedBlockSettings uid={ firstBlockUID } onToggle={ onClose } itemsRole="menuitem" /> }
-							<BlockTransformations uids={ uids } onClick={ onClose } itemsRole="menuitem" />
 						</NavigableMenu>
 					) }
 				/>

From 32ae6087e440e9a14214b6970861a2bcd2d625d3 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 12 Jun 2018 10:11:07 +0200
Subject: [PATCH 3/6] Polish mobile toolbar.

---
 edit-post/assets/stylesheets/_variables.scss |  2 +-
 editor/components/block-list/style.scss      | 21 ++++++++++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss
index 735eabf6c9681..e3209bd3a4d05 100644
--- a/edit-post/assets/stylesheets/_variables.scss
+++ b/edit-post/assets/stylesheets/_variables.scss
@@ -39,7 +39,7 @@ $block-controls-height: 36px;
 $icon-button-size: 36px;
 $icon-button-size-small: 24px;
 $inserter-tabs-height: 36px;
-$block-toolbar-height: 37px;
+$block-toolbar-height: $block-controls-height + 1px;
 
 // 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
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index 75ea86aeffd46..7f090c600ec7f 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -581,17 +581,27 @@
 		}
 	}
 
-	// Show side UI inline below the block on mobile
+	// Show side UI inline below the block on mobile.
 	.editor-block-list__block-mobile-toolbar {
 		display: flex;
 		flex-direction: row;
-		margin-top: $item-spacing;
+		margin-top: $item-spacing + $block-toolbar-height; // Make room for the formatting bar above. 
+		margin-right: -$block-padding;
+		margin-bottom: -$block-padding - 1px; // Include border.
+		margin-left: -$block-padding;
+		border-top: 1px solid $light-gray-500;
 
 		@include break-small() {
 			display: none;
 		}
 
-		// Movers, inserter, trash & ellipsis
+		// Show a shadow below the selected block to imply separation.
+		box-shadow: $shadow-below-only;
+		@include break-mobile() {
+			box-shadow: none;
+		}
+
+		// Movers, inserter, trash & ellipsis.
 		.editor-inserter {
 			position: relative;
 			left: auto;
@@ -753,10 +763,10 @@
 
 	// Position toolbar below the block on mobile
 	position: absolute;
-	bottom: -$block-toolbar-height + 1px;
+	//bottom: -$block-toolbar-height + 1px;
+	bottom: $block-toolbar-height;
 	left: $block-padding;
 	right: $block-padding;
-	box-shadow: $shadow-below-only;
 
 	// Position the contextual toolbar above the block, add 1px to each to stack borders
 	@include break-mobile() {
@@ -764,7 +774,6 @@
 		bottom: auto;
 		left: auto;
 		right: auto;
-		box-shadow: none;
 		margin-top: -$block-toolbar-height - 1px;
 		margin-bottom: $block-padding + 1px;
 	}

From 805e6b8036d990eda1411b6f2b61b6ae759dcba2 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 12 Jun 2018 10:13:46 +0200
Subject: [PATCH 4/6] Don't show sibling inserter on mobile.

---
 editor/components/block-list/style.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index 7f090c600ec7f..c67f343e7d51e 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -669,7 +669,12 @@
 }
 
 .editor-block-list__insertion-point-inserter {
-	display: flex;
+	// Don't show on mobile.
+	display: none;
+	@include break-mobile() {
+		display: flex;
+	}
+
 	position: absolute;
 	top: 0;
 	bottom: auto;

From 04626666c18f52d08bfbccf9713f3a95d3dd8e76 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Wed, 13 Jun 2018 09:00:17 +0200
Subject: [PATCH 5/6] Address feedback and fix typo.

The typo was a actually committed in https://github.com/WordPress/gutenberg/pull/6408/files but this fixes it.
---
 edit-post/assets/stylesheets/_variables.scss |  3 +-
 editor/components/block-list/style.scss      | 95 ++++++++++----------
 editor/components/block-toolbar/style.scss   |  3 +-
 3 files changed, 50 insertions(+), 51 deletions(-)

diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss
index e3209bd3a4d05..a8e69e19f88c0 100644
--- a/edit-post/assets/stylesheets/_variables.scss
+++ b/edit-post/assets/stylesheets/_variables.scss
@@ -35,11 +35,12 @@ $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.
 
 // Block UI
+$border-width: 1px;
 $block-controls-height: 36px;
 $icon-button-size: 36px;
 $icon-button-size-small: 24px;
 $inserter-tabs-height: 36px;
-$block-toolbar-height: $block-controls-height + 1px;
+$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
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index c67f343e7d51e..dec49ed6063d6 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -4,12 +4,12 @@
 		box-shadow: $shadow-popover;
 
 		@include break-small {
-			left: -$block-parent-side-ui-clearance - 1px;
-			right: -$block-parent-side-ui-clearance - 1px;
+			left: -$block-parent-side-ui-clearance - $border-width;
+			right: -$block-parent-side-ui-clearance - $border-width;
 
 			.editor-block-list__layout & {
-				left: -1px;
-				right: -1px;
+				left: -$border-width;
+				right: -$border-width;
 			}
 		}
 	}
@@ -113,17 +113,17 @@
 
 	// Don't add side padding for nested blocks, and compensate for block padding
 	.editor-block-list__block & {
-		// compensate for side UI
+		// Compensate for side UI.
 		padding-left: 0;
 		padding-right: 0;
 
-		// compensate for block padding horizontally
+		// Compensate for block padding horizontally.
 		margin-left: -$block-padding;
 		margin-right: -$block-padding;
 
-		// compensate for block padding and collapsing margins vertically
-		margin-top: -$block-padding + 1px;
-		margin-top: -$block-padding + 1px;
+		// Compensate for block padding and collapsing margins vertically.
+		margin-top: -$block-padding + $border-width;
+		margin-bottom: -$block-padding + $border-width;
 	}
 }
 
@@ -138,9 +138,8 @@
 
 	@include break-small() {
 		// The block mover needs to stay inside the block to allow clicks when hovering the block
-		// subtract 1px for border width
-		padding-left: $block-padding + $block-side-ui-padding - 1px;
-		padding-right: $block-padding + $block-side-ui-padding - 1px;
+		padding-left: $block-padding + $block-side-ui-padding - $border-width;
+		padding-right: $block-padding + $block-side-ui-padding - $border-width;
 	}
 
 	// Prevent collapsing margins @todo try and revisit this, it's conducive to theming to allow these to collapse
@@ -218,7 +217,7 @@
 			z-index: z-index( '.editor-block-list__block-edit:before' );
 			content: '';
 			position: absolute;
-			outline: 1px solid transparent;
+			outline: $border-width solid transparent;
 			transition: outline .1s linear;
 			pointer-events: none;
 
@@ -241,7 +240,7 @@
 	// Selected style
 	&.is-selected > .editor-block-list__block-edit:before {
 		// use opacity to work in various editor styles
-		outline: 1px solid $dark-opacity-light-500;
+		outline: $border-width solid $dark-opacity-light-500;
 		top: -$block-padding;
 		bottom: -$block-padding;
 
@@ -252,7 +251,7 @@
 
 	// Hover style
 	&.is-hovered > .editor-block-list__block-edit:before {
-		outline: 1px solid theme( outlines );
+		outline: $border-width solid theme( outlines );
 	}
 }
 
@@ -337,7 +336,7 @@
 	// Shared blocks
 	&.is-shared > .editor-block-list__block-edit:before {
 		// use opacity to work in various editor styles
-		outline: 1px dashed $dark-opacity-light-500;
+		outline: $border-width dashed $dark-opacity-light-500;
 
 		.is-dark-theme & {
 			outline-color: $light-opacity-light-500;
@@ -391,7 +390,7 @@
 		// Mover and settings above
 		> .editor-block-mover,
 		> .editor-block-settings-menu {
-			top: -$block-side-ui-width - 1px; // move upwards the height of the button +1px for border
+			top: -$block-side-ui-width - $border-width; // Move upwards the height of the button & border.
 			bottom: auto;
 			min-height: 0;
 			height: auto;
@@ -426,7 +425,7 @@
 
 		// Position hover label on the right
 		> .editor-block-list__breadcrumb {
-			right: -1px;
+			right: -$border-width;
 		}
 
 		// Hide mover until wide breakpoints, or it might be covered by toolbar
@@ -453,13 +452,13 @@
 
 		// Position hover label on the right
 		> .editor-block-list__breadcrumb {
-			right: -1px;
+			right: -$border-width;
 		}
 		
 		// compensate for main container padding, subtract border
 		@include break-small() {
-			margin-left: -$block-side-ui-padding + 1px;
-			margin-right: -$block-side-ui-padding + 1px;
+			margin-left: -$block-side-ui-padding + $border-width;
+			margin-right: -$block-side-ui-padding + $border-width;
 		}
 
 		> .editor-block-list__block-edit {
@@ -585,11 +584,11 @@
 	.editor-block-list__block-mobile-toolbar {
 		display: flex;
 		flex-direction: row;
-		margin-top: $item-spacing + $block-toolbar-height; // Make room for the formatting bar above. 
+		margin-top: $item-spacing + $block-toolbar-height; // Make room for the height of the block toolbar above. 
 		margin-right: -$block-padding;
-		margin-bottom: -$block-padding - 1px; // Include border.
+		margin-bottom: -$block-padding - $border-width;
 		margin-left: -$block-padding;
-		border-top: 1px solid $light-gray-500;
+		border-top: $border-width solid $light-gray-500;
 
 		@include break-small() {
 			display: none;
@@ -601,7 +600,7 @@
 			box-shadow: none;
 		}
 
-		// Movers, inserter, trash & ellipsis.
+		// Movers, inserter, trash, and ellipsis.
 		.editor-inserter {
 			position: relative;
 			left: auto;
@@ -661,7 +660,7 @@
 
 .editor-block-list__insertion-point-indicator {
 	position: absolute;
-	top: calc( 50% - 1px);
+	top: calc( 50% - $border-width );
 	height: 2px;
 	left: 0;
 	right: 0;
@@ -701,7 +700,7 @@
 	// Show a line indicator when hovering, but this is unclickable
 	&:before {
 		position: absolute;
-		top: calc( 50% - 1px);
+		top: calc( 50% - #{ $border-width } );
 		height: 2px;
 		left: 0;
 		right: 0;
@@ -724,8 +723,8 @@
 		top: -$block-padding - $block-spacing / 2;
 		height: $block-padding * 2; // Matches the whole empty space between two blocks
 		bottom: auto;
-		left: -1px;
-		right: -1px;
+		left: -$border-width;
+		right: -$border-width;
 	}
 
 	&[data-align="full"] > .editor-block-list__insertion-point {
@@ -766,50 +765,48 @@
 	pointer-events: none;
 	height: $block-toolbar-height;
 
-	// Position toolbar below the block on mobile
+	// Position toolbar below the block on mobile.
 	position: absolute;
-	//bottom: -$block-toolbar-height + 1px;
 	bottom: $block-toolbar-height;
 	left: $block-padding;
 	right: $block-padding;
 
-	// Position the contextual toolbar above the block, add 1px to each to stack borders
+	// Position the contextual toolbar above the block.
 	@include break-mobile() {
 		position: sticky;
 		bottom: auto;
 		left: auto;
 		right: auto;
-		margin-top: -$block-toolbar-height - 1px;
-		margin-bottom: $block-padding + 1px;
+		margin-top: -$block-toolbar-height - $border-width;
+		margin-bottom: $block-padding + $border-width;
 	}
 
 	@include break-small() {
-		top: -1px;	// stack borders
+		top: -$border-width;
 	}
 
-	// Floated items have special needs for the contextual toolbar position
+	// Floated items have special needs for the contextual toolbar position.
 	.editor-block-list__block[data-align="left"] &,
 	.editor-block-list__block[data-align="right"] & {
-		margin-bottom: 1px;
-		margin-top: -$block-toolbar-height - 1px;
+		margin-bottom: $border-width;
+		margin-top: -$block-toolbar-height - $border-width;
 	}
 
-	// put toolbar snugly to side edges on mobile
-	margin-left: -$block-padding - 1px;	// stack borders
-	margin-right: -$block-padding - 1px;
+	// Put toolbar snugly to side edges on mobile.
+	margin-left: -$block-padding - $border-width;
+	margin-right: -$block-padding - $border-width;
 
 	@include break-small() {
-		// stack borders
-		margin-left: -$parent-block-padding - $block-side-ui-width - 1px;
-		margin-right: -$parent-block-padding - $block-side-ui-width - 1px;
+		margin-left: -$parent-block-padding - $block-side-ui-width - $border-width;
+		margin-right: -$parent-block-padding - $block-side-ui-width - $border-width;
 
-		// position toolbar for nested
+		// Position toolbar for nested contexts.
 		.editor-block-list__block & {
-			margin-left: -$block-padding - $block-side-ui-width - 1px;
-			margin-right: -$block-padding - $block-side-ui-padding - 1px;
+			margin-left: -$block-padding - $block-side-ui-width - $border-width;
+			margin-right: -$block-padding - $block-side-ui-padding - $border-width;
 		}
 
-		// except for wide elements, this causes a horizontal scrollbar
+		// ... Except for wide elements, this causes a horizontal scrollbar.
 		[data-align="full"] & {
 			margin-left: -$block-padding - $block-side-ui-width;
 			margin-right: -$block-padding - $block-side-ui-width;
@@ -826,7 +823,7 @@
 .editor-block-contextual-toolbar .editor-block-toolbar {
 	width: 100%;
 	background: $white;
-	border: 1px solid $light-gray-500;
+	border: $border-width solid $light-gray-500;
 
 	// Hide right border on desktop, where the .components-toolbar instead has a right border.
 	@include break-small() {
diff --git a/editor/components/block-toolbar/style.scss b/editor/components/block-toolbar/style.scss
index 33ba95efb95c4..1fedaad2e9d6f 100644
--- a/editor/components/block-toolbar/style.scss
+++ b/editor/components/block-toolbar/style.scss
@@ -15,9 +15,10 @@
 		border: none;
 
 		// Add a right border to show as separator in the block toolbar.
-		border-right: 1px solid $light-gray-500;
+		border-right: $border-width solid $light-gray-500;
 	}
 
+	// This should be refactored to have its own class to target.
 	> div {
 		display: flex;
 	}

From 47374b10ee2fb0b086d47c34429bb2c32f0d49cc Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Wed, 13 Jun 2018 11:25:34 +0200
Subject: [PATCH 6/6] Address feedback on comments.

---
 editor/components/block-list/style.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index dec49ed6063d6..0b2c228fc836c 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -390,7 +390,7 @@
 		// Mover and settings above
 		> .editor-block-mover,
 		> .editor-block-settings-menu {
-			top: -$block-side-ui-width - $border-width; // Move upwards the height of the button & border.
+			top: -$block-side-ui-width - $border-width; // This moves the menu up by the height of the button + border.
 			bottom: auto;
 			min-height: 0;
 			height: auto;
@@ -792,7 +792,7 @@
 		margin-top: -$block-toolbar-height - $border-width;
 	}
 
-	// Put toolbar snugly to side edges on mobile.
+	// Make block toolbar full width on mobile.
 	margin-left: -$block-padding - $border-width;
 	margin-right: -$block-padding - $border-width;
 
@@ -806,7 +806,7 @@
 			margin-right: -$block-padding - $block-side-ui-padding - $border-width;
 		}
 
-		// ... Except for wide elements, this causes a horizontal scrollbar.
+		// Except for wide elements, this causes a horizontal scrollbar.
 		[data-align="full"] & {
 			margin-left: -$block-padding - $block-side-ui-width;
 			margin-right: -$block-padding - $block-side-ui-width;