From 8f221f5c0569e3b91cdd7e2eaf1de0934d206bde Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Fri, 8 Jun 2018 11:12:28 +0200
Subject: [PATCH 1/3] Fix regressions with horizontal scrollbar for wide and
 fullwide

This also positions the toolbar a little bit more accurately when wide and fullwide.
---
 edit-post/components/visual-editor/style.scss | 16 +++---
 editor/components/block-list/style.scss       | 55 +++++++++++++------
 .../default-block-appender/style.scss         |  6 +-
 editor/components/post-title/style.scss       | 19 ++++++-
 4 files changed, 67 insertions(+), 29 deletions(-)

diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
index 75e9a154646a8..324fff367d27f 100644
--- a/edit-post/components/visual-editor/style.scss
+++ b/edit-post/components/visual-editor/style.scss
@@ -50,8 +50,8 @@
 		}
 
 		&[data-align="full"] > .editor-block-contextual-toolbar,
-		&[data-align="wide"] > .editor-block-contextual-toolbar { // don't affect nested block toolbars
-			max-width: $content-width + 2;	// 1px border left and right
+		&[data-align="wide"] > .editor-block-contextual-toolbar { // Don't affect nested block toolbars.
+			max-width: $content-width + $parent-block-padding; // Add 1px border left and right.
 			margin-left: auto;
 			margin-right: auto;
 		}
@@ -69,8 +69,8 @@
 // The base width of the title should match that of blocks even if it isn't a block
 .editor-post-title {
 	@include break-small() {
-		padding-left: $block-side-ui-padding;
-		padding-right: $block-side-ui-padding;
+		padding-left: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance;
+		padding-right: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance;
 	}
 }
 .edit-post-visual-editor .editor-post-title__block {
@@ -78,13 +78,13 @@
 	margin-right: auto;
 	max-width: $content-width;
 
-	// stack borders
+	// Stack borders.
 	> div {
-		margin-left: -1px;
-		margin-right: -1px;
+		margin-left: 0;
+		margin-right: 0;
 	}
 
-	// include space for side UI on desktops
+	// Include space for side UI on desktops.
 	@include break-small() {
 		> div {
 			margin-left: -$block-side-ui-width;
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index 3584c26626524..40b245cffaee3 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -104,11 +104,11 @@
 }
 
 .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
+	// 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;
+		padding-left: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance;
+		padding-right: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance;
 	}
 
 	// Don't add side padding for nested blocks, and compensate for block padding
@@ -221,14 +221,19 @@
 			transition: outline .1s linear;
 			pointer-events: none;
 
-			// show wider padding for top level blocks
-			right: -$parent-block-padding;
-			left: -$parent-block-padding;
 			top: -$block-padding;
 			bottom: -$block-padding;
+			right: -$block-padding;
+			left: -$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
+		// Show smaller padding for child blocks.
 		.editor-block-list__block-edit:before {
 			right: -$block-padding;
 			left: -$block-padding;
@@ -346,16 +351,25 @@
 	// Alignments
 	&[data-align="left"],
 	&[data-align="right"] {
-		// Without z-index, won't be clickable as "above" adjacent content
+		// Without z-index, won't be clickable as "above" adjacent content.
 		z-index: z-index( '.editor-block-list__block {core/image aligned left or right}' );
 		width: 100%;
 
-		// When images are floated, the block itself should collapse to zero height
+		// When images are floated, the block itself should collapse to zero height.
 		margin-bottom: 0;
+		height: 0;
 
-		// Hide block outline when an image is floated
-		&:before {
-			content: none;
+		// Hide block outline when an image is floated.
+		.editor-block-list__block-edit {
+
+			&:before {
+				content: none;
+			}
+		}
+
+		// The padding collapses, but the outline is still 1px to compensate for. 
+		.editor-block-contextual-toolbar {
+			margin-bottom: 1px;
 		}
 	}
 
@@ -432,6 +446,7 @@
 		> .editor-block-mover {
 			display: none;
 		}
+
 		@include break-wide() {
 			> .editor-block-mover {
 				display: block;
@@ -455,10 +470,10 @@
 			right: -$border-width;
 		}
 		
-		// compensate for main container padding, subtract border
+		// Compensate for main container padding and subtract border.
 		@include break-small() {
-			margin-left: -$block-side-ui-padding + $border-width;
-			margin-right: -$block-side-ui-padding + $border-width;
+			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;
 		}
 
 		> .editor-block-list__block-edit {
@@ -470,7 +485,7 @@
 				margin-right: -$block-side-ui-padding - $block-padding;
 			}
 
-			// this explicitly sets the width of the block, to override the fit-content from the image block
+			// This explicitly sets the width of the block, to override the fit-content from the image block.
 			figure {
 				width: 100%;
 			}
@@ -856,7 +871,11 @@
 	z-index: z-index( '.editor-block-list__breadcrumb' );
 
 	// Position in the top right of the border
-	right: -$block-parent-side-ui-clearance;
+	right: -$block-side-ui-clearance;
+
+	@include break-small() {
+		right: -$block-parent-side-ui-clearance;
+	}
 	top: 0;
 
 	// Nested
diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss
index 68c229dfaa9cc..3a5c27b33580e 100644
--- a/editor/components/default-block-appender/style.scss
+++ b/editor/components/default-block-appender/style.scss
@@ -74,7 +74,7 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 	right: $item-spacing;	// show on the right on mobile
 
 	@include break-small {
-		left: -$icon-button-size - $block-side-ui-clearance - $block-parent-side-ui-clearance;
+		left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance;
 		right: auto;
 	}
 
@@ -85,6 +85,10 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 	.editor-inserter__toggle {
 		transition: opacity 0.2s;
 		border-radius: 50%;
+		width: $block-side-ui-width;
+		height: $block-side-ui-width;
+		top: 4px;
+		padding: 4px;
 
 		// use opacity to work in various editor styles
 		&:not( :hover ) {
diff --git a/editor/components/post-title/style.scss b/editor/components/post-title/style.scss
index 76a5fc757ad9b..fe2aa732a1052 100644
--- a/editor/components/post-title/style.scss
+++ b/editor/components/post-title/style.scss
@@ -9,15 +9,30 @@
 	.editor-post-title__input {
 		display: block;
 		width: 100%;
-		padding: #{ $block-padding + 5px } $parent-block-padding;
 		margin: 0;
 		box-shadow: none;
-		border: 1px solid transparent;
 		background: transparent;
 		font-family: $editor-font;
 		line-height: $default-line-height;
 		transition: border .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-top: 1px solid transparent;
+		border-bottom: 1px solid transparent;
+		border-left: 0;
+		border-right: 0;
+
+		@include break-small() {
+			border: 1px solid transparent;
+		}
+
 		// Match h1 heading
 		font-size: 2.441em;
 		font-weight: 600;

From acca9d447c4ca7f83f7c203908b2cc7e3e4df623 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 21 Jun 2018 10:15:40 +0200
Subject: [PATCH 2/3] Address feedback.

---
 edit-post/assets/stylesheets/_variables.scss  | 2 ++
 edit-post/components/visual-editor/style.scss | 4 ++--
 editor/components/block-list/style.scss       | 5 ++---
 editor/components/post-title/style.scss       | 9 ++++-----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss
index a8e69e19f88c0..c8a14b37c19d0 100644
--- a/edit-post/assets/stylesheets/_variables.scss
+++ b/edit-post/assets/stylesheets/_variables.scss
@@ -52,6 +52,8 @@ $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;
+
 // Buttons & UI Widgets
 $button-style__radius-roundrect: 4px;
 $button-style__radius-round: 50%;
diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
index 324fff367d27f..709b39468a323 100644
--- a/edit-post/components/visual-editor/style.scss
+++ b/edit-post/components/visual-editor/style.scss
@@ -69,8 +69,8 @@
 // The base width of the title should match that of blocks even if it isn't a block
 .editor-post-title {
 	@include break-small() {
-		padding-left: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance;
-		padding-right: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance;
+		padding-left: $block-container-side-padding;
+		padding-right: $block-container-side-padding;
 	}
 }
 .edit-post-visual-editor .editor-post-title__block {
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index 40b245cffaee3..e1c2050a51bc2 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -107,8 +107,8 @@
 	// 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-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance;
-		padding-right: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance;
+		padding-left: $block-container-side-padding;
+		padding-right: $block-container-side-padding;
 	}
 
 	// Don't add side padding for nested blocks, and compensate for block padding
@@ -361,7 +361,6 @@
 
 		// Hide block outline when an image is floated.
 		.editor-block-list__block-edit {
-
 			&:before {
 				content: none;
 			}
diff --git a/editor/components/post-title/style.scss b/editor/components/post-title/style.scss
index fe2aa732a1052..de84d289ee0bf 100644
--- a/editor/components/post-title/style.scss
+++ b/editor/components/post-title/style.scss
@@ -24,13 +24,12 @@
 		}
 
 		// Stack borders on mobile.
-		border-top: 1px solid transparent;
-		border-bottom: 1px solid transparent;
-		border-left: 0;
-		border-right: 0;
+		border: 1px solid transparent;
+		border-left-width: 0;
+		border-right-width: 0;
 
 		@include break-small() {
-			border: 1px solid transparent;
+			border-width: 1px;
 		}
 
 		// Match h1 heading

From 2f7c85e664f22635ef27f52cdee886887ef3b70e Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 21 Jun 2018 11:12:54 +0200
Subject: [PATCH 3/3] Fix issue with mobile toolbar being cut on fullwide

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

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index e1c2050a51bc2..5ed138efdead7 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -593,6 +593,14 @@
 			display: block;
 		}
 	}
+}
+
+
+/**
+ * Mobile unified toolbar.
+ */
+
+.editor-block-list__block {
 
 	// Show side UI inline below the block on mobile.
 	.editor-block-list__block-mobile-toolbar {
@@ -654,6 +662,12 @@
 			float: left;
 		}
 	}
+
+	// sth
+	&[data-align="full"] .editor-block-list__block-mobile-toolbar {
+		margin-left: 0;
+		margin-right: 0;
+	}
 }