From 97f4f7994a94a56567ac8f7faca57d02c974d6bf Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 12 Jun 2018 10:47:22 +0200
Subject: [PATCH 1/9] Allow collapsing margins & adjust block toolbar

This PR refactors how the block toolbar is positioned. Because we use sticky, the toolbar is part of the flow of the block itself. In this PR it uses translate to pull it out of the flow, making the positioning more resilient.

The primary purpose of this PR is to allow margins to collapse. When two margins meet, and no borders or paddings are present, they collapse. I.e. a `p` with a 20px margin next to a similar `p` will have only 20px margin between them, not 40px, because the two siblings collapse to whichever margin is the largest. By allowing margins on blocks to collapse, we can make it easier to theme the editor to look like the frontend.
---
 components/toolbar/style.scss                 |   7 +-
 core-blocks/columns/editor.scss               |   1 +
 edit-post/assets/stylesheets/_variables.scss  |   3 +-
 edit-post/assets/stylesheets/_z-index.scss    |   1 +
 .../header/header-toolbar/style.scss          |  20 +-
 edit-post/components/visual-editor/style.scss |  28 ++-
 editor/components/block-list/block.js         |   7 +-
 editor/components/block-list/style.scss       | 193 +++++++++++-------
 editor/components/block-mover/style.scss      |   2 +
 .../components/block-settings-menu/style.scss |   2 +
 editor/components/block-toolbar/style.scss    |  19 +-
 .../default-block-appender/style.scss         |  51 ++---
 12 files changed, 215 insertions(+), 119 deletions(-)

diff --git a/components/toolbar/style.scss b/components/toolbar/style.scss
index f827b169fa05e4..5afce2004382db 100644
--- a/components/toolbar/style.scss
+++ b/components/toolbar/style.scss
@@ -7,7 +7,12 @@
 
 div.components-toolbar {
 	&> div {
-		display: inline-flex;
+		// IE11 does not support `position: sticky`, or Flex very well, so use block.
+		display: inline-block;
+		@supports ( position: sticky ) {
+			display: inline-flex;
+		}
+
 		margin: 0;
 	}
 
diff --git a/core-blocks/columns/editor.scss b/core-blocks/columns/editor.scss
index 10f63ad75823c8..e9649ae0de7e93 100644
--- a/core-blocks/columns/editor.scss
+++ b/core-blocks/columns/editor.scss
@@ -1,6 +1,7 @@
 // These margins make sure that nested blocks stack/overlay with the parent block chrome
 // This is sort of an experiment at making sure the editor looks as much like the end result as possible
 // Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere
+// Note that when using CSS grid, margins do not collapse on the container
 .wp-block-columns .editor-block-list__layout {
 	margin-left: 0;
 	margin-right: 0;
diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss
index 56394bab048cdf..e4844ef629a8b1 100644
--- a/edit-post/assets/stylesheets/_variables.scss
+++ b/edit-post/assets/stylesheets/_variables.scss
@@ -24,11 +24,12 @@ $admin-bar-height-big: 46px;
 $admin-sidebar-width: 160px;
 $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
+$empty-paragraph-height: $text-editor-font-size * 4;
 
 // Visuals
 $shadow-popover: 0 3px 30px rgba( $dark-gray-900, .1 );
 $shadow-toolbar: 0 2px 10px rgba( $dark-gray-900, .1 ), 0 0 2px rgba( $dark-gray-900, .1 );
-$shadow-below-only: 0 5px 10px rgba( $dark-gray-900, .1 ), 0 2px 2px rgba( $dark-gray-900, .1 );
+$shadow-below-only: 0 5px 10px rgba( $dark-gray-900, .05 ), 0 2px 2px rgba( $dark-gray-900, .05 );
 $shadow-modal: 0 3px 30px rgba( $dark-gray-900, .2 );
 
 // Editor Widths
diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
index e209c450521cb9..c8dd4f9e9c035b 100644
--- a/edit-post/assets/stylesheets/_z-index.scss
+++ b/edit-post/assets/stylesheets/_z-index.scss
@@ -20,6 +20,7 @@ $z-layers: (
 	'.editor-block-contextual-toolbar': 21,
 	'.components-popover__close': 5,
 	'.editor-block-list__insertion-point': 5,
+	'.editor-inserter-with-shortcuts': 5,
 	'.core-blocks-gallery-item__inline-menu': 20,
 	'.editor-url-input__suggestions': 30,
 	'.edit-post-header': 30,
diff --git a/edit-post/components/header/header-toolbar/style.scss b/edit-post/components/header/header-toolbar/style.scss
index fd6245e5dd299a..41d08213520ebb 100644
--- a/edit-post/components/header/header-toolbar/style.scss
+++ b/edit-post/components/header/header-toolbar/style.scss
@@ -1,4 +1,4 @@
-// hide all action buttons except the inserter on mobile
+// Hide all action buttons except the inserter on mobile.
 .edit-post-header-toolbar > .components-button {
 	display: none;
 
@@ -18,15 +18,25 @@
 	}
 }
 
+// Block toolbar when fixed to the top of the screen.
 .edit-post-header-toolbar__block-toolbar {
-	// stacked toolbar
+	// Stack toolbar below Editor Bar.
 	position: absolute;
 	top: $header-height;
 	left: 0;
 	right: 0;
 	background: $white;
-	border-bottom: 1px solid $light-gray-500;
 	min-height: $block-toolbar-height;
+	border-bottom: 1px solid $light-gray-500;
+
+	.editor-block-toolbar  {
+		border-left: none;
+	}
+
+	.editor-block-toolbar .components-toolbar {
+		border-top: none;
+		border-bottom: none;
+	}
 
 	.is-sidebar-opened & {
 		display: none;
@@ -39,8 +49,8 @@
 		}
 	}
 
-	// merge toolbars after this breakpoint
-	@include break-large {	// we should try and lower this breakpoint through an ellipsis overflow feature
+	// Move toolbar into top Editor Bar.
+	@include break-large {
 		padding-left: $item-spacing;
 		position: static;
 		left: auto;
diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
index 9e60e86a2bb520..df4ae931287681 100644
--- a/edit-post/components/visual-editor/style.scss
+++ b/edit-post/components/visual-editor/style.scss
@@ -2,6 +2,7 @@
 	position: relative;
 	padding: 50px 0;
 
+	.editor-default-block-appender__content, // The default appender should match a single paragraph.
 	&,
 	& p {
 		font-family: $editor-font;
@@ -50,11 +51,28 @@
 			margin-right: -$block-side-ui-width;
 		}
 
-		&[data-align="full"] > .editor-block-contextual-toolbar,
-		&[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;
+		// Center the block toolbar on wide and full-wide blocks.
+		// Use specific selector to not affect nested block toolbars.
+		&[data-align="wide"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar,
+		&[data-align="full"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar {
+			width: calc( 100% + #{ $parent-block-padding + $parent-block-padding + $border-width + $border-width } );
+			height: 0px; // This collapses the container to an invisible element without margin.
+			text-align: center;
+
+			.editor-block-toolbar {
+				max-width: $content-width + $block-padding + $block-padding;
+				width: 100%;
+				position: relative;
+			}
+		}
+
+		// The centering math changes when a fullwide image doesn't have block padding.
+		&[data-align="full"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar {
+			width: calc( 100% + #{ $block-padding + $block-padding } );
+
+			.editor-block-toolbar {
+				max-width: $content-width - $border-width - $border-width;
+			}
 		}
 	}
 
diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
index 929b2fcd03e813..a8af6b15b27e10 100644
--- a/editor/components/block-list/block.js
+++ b/editor/components/block-list/block.js
@@ -401,7 +401,8 @@ export class BlockListBlock extends Component {
 		// Empty paragraph blocks should always show up as unselected.
 		const showEmptyBlockSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock;
 		const showSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock;
-		const shouldAppearSelected = ! showSideInserter && ( isSelected || hasSelectedInnerBlock ) && ! isTypingWithinBlock;
+		const shouldAppearSelected = ! showSideInserter && isSelected && ! isTypingWithinBlock;
+		const shouldAppearSelectedParent = ! showSideInserter && hasSelectedInnerBlock && ! isTypingWithinBlock;
 		// We render block movers and block settings to keep them tabbale even if hidden
 		const shouldRenderMovers = ( isSelected || hoverArea === 'left' ) && ! showEmptyBlockSideInserter && ! isMultiSelecting && ! isPartOfMultiSelection && ! isTypingWithinBlock;
 		const shouldRenderBlockSettings = ( isSelected || hoverArea === 'right' ) && ! isMultiSelecting && ! isPartOfMultiSelection && ! isTypingWithinBlock;
@@ -421,6 +422,7 @@ export class BlockListBlock extends Component {
 			'has-warning': ! isValid || !! error,
 			'is-selected': shouldAppearSelected,
 			'is-multi-selected': isPartOfMultiSelection,
+			'is-selected-parent': shouldAppearSelectedParent,
 			'is-hovered': isHovered && ! isEmptyDefaultBlock,
 			'is-shared': isSharedBlock( blockType ),
 			'is-hidden': dragging,
@@ -513,7 +515,6 @@ export class BlockListBlock extends Component {
 					/>
 				) }
 				{ shouldShowBreadcrumb && <BlockBreadcrumb uid={ uid } isHidden={ ! ( isHovered || isSelected ) || hoverArea !== 'left' } /> }
-				{ shouldShowContextualToolbar && <BlockContextualToolbar /> }
 				{ isFirstMultiSelected && <BlockMultiControls rootUID={ rootUID } /> }
 				<IgnoreNestedEvents
 					ref={ this.bindBlockNode }
@@ -522,7 +523,7 @@ export class BlockListBlock extends Component {
 					className="editor-block-list__block-edit"
 					data-block={ uid }
 				>
-
+					{ shouldShowContextualToolbar && <BlockContextualToolbar /> }
 					<BlockCrashBoundary onError={ this.onBlockError }>
 						{ isValid && mode === 'visual' && (
 							<BlockEdit
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index d66969f9924629..c9e8d05a66e9ed 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -103,6 +103,11 @@
 	}
 }
 
+
+/**
+ * General layout
+ */
+
 .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.
@@ -121,15 +126,26 @@
 		margin-left: -$block-padding;
 		margin-right: -$block-padding;
 
-		// Compensate for block padding and collapsing margins vertically.
-		margin-top: -$block-padding + $border-width;
-		margin-bottom: -$block-padding + $border-width;
+		// Compensate for block padding.
+		margin-top: -$block-padding;
+		margin-bottom: -$block-padding;
 	}
-}
 
-/**
- * General layout
- */
+	// Adjust the spacing of the appender, or the first block, to sit near the title.
+	.editor-default-block-appender .editor-default-block-appender__content,
+	.editor-block-list__block:first-child .editor-block-list__block-edit {
+		margin-top: $block-padding - $block-spacing / 2;
+	}
+
+	// Space every block, and the default appender, using margins.
+	// This allows margins to collapse, which gives a better representation of how it looks on the frontend.
+	.editor-default-block-appender__content,
+	.editor-block-list__block .editor-block-list__block-edit,
+	.editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit { // Explicitly target nested blocks, as those need to override the preceeding rule.
+		margin-top: $block-padding * 2 + $block-spacing;
+		margin-bottom: $block-padding * 2 + $block-spacing;
+	}
+}
 
 .editor-block-list__layout .editor-block-list__block {
 	position: relative;
@@ -145,23 +161,6 @@
 		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
-	padding-top: 1px;
-	padding-bottom: 1px;
-
-	// 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;
-
-		// Prevent collapsing margins @todo try and revisit this, it's conducive to theming to allow these to collapse
-		padding-top: 1px;
-		padding-bottom: 1px;
-	}
-
-	margin-bottom: $block-spacing;
-
 	/**
 	 * Notices
 	 */
@@ -213,6 +212,7 @@
 	/**
 	 * Block outline layout
 	 */
+
 	.editor-block-list__block-edit {
 		position: relative;
 
@@ -224,6 +224,9 @@
 			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;
@@ -246,11 +249,10 @@
 	}
 
 	// Selected style
+	&.is-selected-parent > .editor-block-list__block-edit:before,
 	&.is-selected > .editor-block-list__block-edit:before {
 		// use opacity to work in various editor styles
 		outline: $border-width solid $dark-opacity-light-500;
-		top: -$block-padding;
-		bottom: -$block-padding;
 
 		.is-dark-theme & {
 			outline-color: $light-opacity-light-500;
@@ -413,8 +415,8 @@
 		// Mover and settings above
 		> .editor-block-mover,
 		> .editor-block-settings-menu {
-			// This moves the menu up by 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 + padding.
+			top: -$block-side-ui-width - $block-padding - $border-width;
 			bottom: auto;
 			min-height: 0;
 			height: auto;
@@ -427,11 +429,11 @@
 		}
 
 		> .editor-block-mover {
-			left: 10px;
+			left: $parent-block-padding;
 		}
 
 		> .editor-block-settings-menu {
-			right: 10px;
+			right: $parent-block-padding;
 			width: $block-side-ui-width * 2;
 			flex-direction: row;
 		}
@@ -539,7 +541,7 @@
 
 
 /**
- * Left and right side UI
+ * Left and right side UI, & Unified toolbar on Mobile
  */
 
 .editor-block-list__block {
@@ -548,13 +550,18 @@
 	> .editor-block-settings-menu,
 	> .editor-block-mover {
 		position: absolute;
-		top: 0;
 		width: $block-side-ui-width + $block-side-ui-clearance;
 		// stretch to fill half of the available space to increase hoverable area
 		height: 100%;
 		max-height: $block-side-ui-width * 4;
 	}
 
+	// Position depending on whether selected or not.
+	> .editor-block-settings-menu,
+	> .editor-block-mover {
+		top: -$block-padding - $border-width;
+	}
+
 	// Elevate when selected or hovered
 	@include break-small() {
 		&.is-multi-selected,
@@ -619,11 +626,13 @@
 		display: flex;
 		flex-direction: row;
 		// Make room for the height of the block toolbar above.
-		margin-top: $item-spacing + $block-toolbar-height;
+		margin-top: $item-spacing + $block-toolbar-height - $block-padding;
 		margin-right: -$block-padding;
-		margin-bottom: -$block-padding - $border-width;
 		margin-left: -$block-padding;
 		border-top: $border-width solid $light-gray-500;
+		height: $block-toolbar-height;
+
+		transform: translateY( #{ $block-padding + $border-width } );
 
 		@include break-small() {
 			display: none;
@@ -631,7 +640,7 @@
 
 		// Show a shadow below the selected block to imply separation.
 		box-shadow: $shadow-below-only;
-		@include break-mobile() {
+		@include break-small() {
 			box-shadow: none;
 		}
 
@@ -687,6 +696,7 @@
 /**
  * In-Canvas Inserter
  */
+
 .editor-block-list .editor-inserter {
 	margin: $item-spacing;
 	cursor: move; // Fallback for IE/Edge < 14
@@ -716,7 +726,6 @@
 	}
 
 	position: absolute;
-	top: 0;
 	bottom: auto;
 	left: 0;
 	right: 0;
@@ -724,6 +733,9 @@
 	height: $block-padding * 2;
 	justify-content: center;
 
+	// Position above block.
+	top: -$block-padding;
+
 	// Show a clickable plus.
 	.editor-block-list__insertion-point-button {
 		margin-top: -4px;
@@ -801,10 +813,10 @@
 
 
 /**
- * Block Toolbar
+ * Block Toolbar when contextual.
  */
 
- .editor-block-list__block .editor-block-contextual-toolbar {
+.editor-block-list__block .editor-block-contextual-toolbar {
 	position: sticky;
 	z-index: z-index( '.editor-block-contextual-toolbar' );
 	white-space: nowrap;
@@ -814,29 +826,23 @@
 
 	// Position toolbar below the block on mobile.
 	position: absolute;
-	bottom: $block-toolbar-height;
-	left: $block-padding;
-	right: $block-padding;
+	bottom: $block-toolbar-height - $block-padding;
+	left: 0;
+	right: 0;
 
-	@include break-small() {
-		top: -$border-width;
-	}
+	// Paint the borders on the toolbar itself on mobile.
+	border-top: 1px solid $light-gray-500;
+	.components-toolbar {
+		border-top: none;
+		border-bottom: none;
 
-	// Position the contextual toolbar above the block.
-	@include break-mobile() {
-		position: relative;
-		top: auto;
-		bottom: auto;
-		left: auto;
-		right: auto;
-		margin-top: -$block-toolbar-height - $border-width;
-		margin-bottom: $block-padding + $border-width;
+	}
 
-		// IE11 does not support `position: sticky`.
-		@supports (position: sticky) {
-			position: sticky;
-			// Avoid appearance of double border when toolbar sticks at the top of the editor.
-			top: -$border-width;
+	@include break-small() {
+		border-top: none;
+		.components-toolbar {
+			border-top: 1px solid $light-gray-500;
+			border-bottom: 1px solid $light-gray-500;
 		}
 	}
 
@@ -852,13 +858,13 @@
 	margin-right: -$block-padding - $border-width;
 
 	@include break-small() {
-		margin-left: -$parent-block-padding - $block-side-ui-width - $border-width;
-		margin-right: -$parent-block-padding - $block-side-ui-width - $border-width;
+		margin-left: -$parent-block-padding - $border-width;
+		margin-right: -$parent-block-padding - $border-width;
 
 		// Position toolbar for nested contexts.
 		.editor-block-list__block & {
-			margin-left: -$block-padding - $block-side-ui-width - $border-width;
-			margin-right: -$block-padding - $block-side-ui-padding - $border-width;
+			margin-left: -$block-padding - $border-width;
+			margin-right: -$block-padding - $border-width;
 		}
 
 		// Except for wide elements, this causes a horizontal scrollbar.
@@ -872,13 +878,47 @@
 	& > * {
 		pointer-events: auto;
 	}
+}
 
+// Enable toolbar footprint collapsing
+.editor-block-contextual-toolbar {
+	// Position the contextual toolbar above the block.
+	.editor-block-list__block & {
+		@include break-small() {
+			bottom: auto;
+			left: auto;
+			right: auto;
+			box-shadow: none;
+
+			// Move the block toolbar out of the flow using translate.
+			transform: translateY( -$block-toolbar-height -$block-padding -$border-width );
+
+			// IE11 does not support `position: sticky`.
+			@supports ( position: sticky ) {
+				position: sticky;
+
+				// Compensate for translate, so the sticky sticks to the top.
+				top: $block-toolbar-height + $block-padding;
+			}
+
+			// This is an important one. Because the toolbar is sticky, it's part of the flow.
+			// It behaves as relative, in other words, until it reaches an edge and then behaves as fixed.
+			// But by applying a float, we take it out of this flow. The benefit is that we don't need to compensate for margins.
+			// In turn, this allows margins on sibling elements to collapse to parent elements.
+			float: left;
+		}
+	}
+
+	.editor-block-list__block[data-align="right"] & {
+		@include break-small() {
+			float: right;
+		}
+	}
 }
 
+// Position the block toolbar when contextual.
 .editor-block-contextual-toolbar .editor-block-toolbar {
 	width: 100%;
-	background: $white;
-	border: $border-width solid $light-gray-500;
 
 	// Hide right border on desktop, where the .components-toolbar instead has a right border.
 	@include break-small() {
@@ -886,8 +926,10 @@
 	}
 
 	// This prevents floats from messing up the position.
-	position: absolute;
-	left: 0;
+	@include break-small() {
+		position: absolute;
+		left: 0;
+	}
 
 	.editor-block-list__block[data-align="right"] & {
 		/*!rtl:begin:ignore*/
@@ -909,21 +951,19 @@
 	}
 }
 
+
 /**
  * Hover label
  */
- .editor-block-list__breadcrumb {
+
+.editor-block-list__breadcrumb {
 	position: absolute;
 	line-height: 1;
 	z-index: z-index( '.editor-block-list__breadcrumb' );
 
-	// Position in the top right of the border
-	right: -$block-side-ui-clearance;
-
-	@include break-small() {
-		right: -$block-parent-side-ui-clearance;
-	}
-	top: 0;
+	// Position in the top right of the border.
+	right: -$block-parent-side-ui-clearance;
+	top: -$block-padding - $border-width;
 
 	// Nested
 	.editor-block-list__block-edit & {
@@ -982,5 +1022,10 @@
 			left: 0;
 			right: 0;
 		}
+
+		// Don't use this for full-wide blocks, as there's no clearance to accommodate extra area on the side.
+		&[data-align="full"]:before {
+			content: none;
+		}
 	}
 }
diff --git a/editor/components/block-mover/style.scss b/editor/components/block-mover/style.scss
index ddea50def9bfd2..eca87d7c7c6b66 100644
--- a/editor/components/block-mover/style.scss
+++ b/editor/components/block-mover/style.scss
@@ -1,4 +1,6 @@
 .editor-block-mover {
+	min-height: $empty-paragraph-height;
+
 	opacity: 0;
 
 	&.is-visible {
diff --git a/editor/components/block-settings-menu/style.scss b/editor/components/block-settings-menu/style.scss
index 49d9d289719bcf..d972bc0ba581a4 100644
--- a/editor/components/block-settings-menu/style.scss
+++ b/editor/components/block-settings-menu/style.scss
@@ -1,4 +1,6 @@
 .editor-block-settings-menu {
+	min-height: $empty-paragraph-height;
+
 	line-height: 1;
 }
 
diff --git a/editor/components/block-toolbar/style.scss b/editor/components/block-toolbar/style.scss
index 1fedaad2e9d6fd..389659b29aa2d2 100644
--- a/editor/components/block-toolbar/style.scss
+++ b/editor/components/block-toolbar/style.scss
@@ -2,7 +2,6 @@
 	display: inline-flex;
 	flex-grow: 1;
 	width: 100%;
-	background: $white;
 	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
 
@@ -11,8 +10,14 @@
 		overflow: inherit;
 	}
 
+	// Show a left border on the parent container.
+	border-left: $border-width solid $light-gray-500;
+
+	// The component is born with a border, but we only need some of them.
 	.components-toolbar {
-		border: none;
+		border: 0; 
+		border-top: $border-width solid $light-gray-500;
+		border-bottom: $border-width solid $light-gray-500;
 
 		// Add a right border to show as separator in the block toolbar.
 		border-right: $border-width solid $light-gray-500;
@@ -20,10 +25,10 @@
 
 	// This should be refactored to have its own class to target.
 	> div {
-		display: flex;
+		// IE11 does not support `position: sticky`, or Flex very well, so use block.
+		display: block;
+		@supports ( position: sticky ) {
+			display: flex;
+		}
 	}
 }
-
-.editor-block-toolbar .editor-block-switcher {
-	display: inline-flex;
-}
diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss
index 3a5c27b33580e2..1b0ec86de0d87d 100644
--- a/editor/components/default-block-appender/style.scss
+++ b/editor/components/default-block-appender/style.scss
@@ -1,26 +1,19 @@
-$empty-paragraph-height: $text-editor-font-size * 4;
-
 .editor-default-block-appender {
 	input[type=text].editor-default-block-appender__content { // needs specificity
 		border: none;
 		background: none;
 		box-shadow: none;
 		display: block;
-		margin: 0;
+		margin-left: 0;
+		margin-right: 0;
 		max-width: none; // fixes a bleed issue from the admin
-		padding: $block-padding;
-		font-size: $editor-font-size;
-		font-family: $editor-font;
 		cursor: text;
 		width: 100%;
-		font-family: $editor-font;
 		outline: 1px solid transparent;
 		transition: 0.2s outline;
 
-		// match the height of an empty paragraph
-		// to prevent margins from collapsing we add 1px padding top and bottom to both .editor-block-list__block and .editor-block-list__block-edit (coming to a total of 4px extra)
-		// @todo: revisit when we allow margins to collapse
-		height: $empty-paragraph-height + 4px;
+		// Emulate the dimensions of a paragraph block.
+		padding: 0 #{ $block-padding + $border-width };
 
 		// use opacity to work in various editor styles
 		color: $dark-opacity-300;
@@ -30,7 +23,7 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 		}
 	}
 
-	// Show quick insertion icons faded until hover
+	// Show quick insertion icons faded until hover.
 	.editor-inserter-with-shortcuts {
 		opacity: .5;
 		transition: opacity 0.2s;
@@ -49,7 +42,7 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 		opacity: 1;
 	}
 
-	// Show the inserter if mousing over or there is a tip
+	// Show the inserter if mousing over or there is a tip.
 	&:not( .has-tip ) {
 		.editor-inserter__toggle:not( [aria-expanded="true"] ) {
 			opacity: 0;
@@ -60,18 +53,32 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 		}
 	}
 
-	// Dropzone
+	// Dropzone.
 	.components-drop-zone__content-icon {
 		display: none;
 	}
 }
 
-// Left side inserter icon
+// Quick shortcuts, left and right.
+.editor-block-list__empty-block-inserter, // Empty paragraph
+.editor-default-block-appender .editor-inserter, // Empty appender
+.editor-inserter-with-shortcuts { // Right side quick shortcuts
+	position: absolute;
+	top: 0;
+
+	// Change the size of the buttons to match that of the default paragraph height.
+	.components-icon-button {
+		width: $block-side-ui-width;
+		height: $block-side-ui-width;
+		padding: 4px;
+		margin-right: 12px;
+	}
+}
+
+// Left side.
 .editor-block-list__empty-block-inserter,
 .editor-default-block-appender .editor-inserter {
-	position: absolute;
-	top: $item-spacing;
-	right: $item-spacing;	// show on the right on mobile
+	right: $item-spacing; // Show to the right on mobile.
 
 	@include break-small {
 		left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance;
@@ -87,7 +94,6 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 		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
@@ -101,12 +107,11 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 	}
 }
 
-// Quick block insertion icons on the right
+// Quick block insertion icons on the right side.
 .editor-inserter-with-shortcuts {
-	position: absolute;
-	top: $item-spacing;
 	right: $block-padding;
-	display: none;
+	display: none; // Don't show on mobile.
+	z-index: z-index( '.editor-inserter-with-shortcuts' ); // Elevate above the sibling inserter.
 
 	@include break-small {
 		right: 0;

From fc3186db95f8561e75a008566ffe5e3cef60400b Mon Sep 17 00:00:00 2001
From: "Matthew Riley MacPherson (tofumatt)" <hi@tofumatt.com>
Date: Wed, 4 Jul 2018 02:38:24 +0100
Subject: [PATCH 2/9] docs: Tweak comment in CSS

---
 core-blocks/columns/editor.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core-blocks/columns/editor.scss b/core-blocks/columns/editor.scss
index e9649ae0de7e93..9787a20b1464b4 100644
--- a/core-blocks/columns/editor.scss
+++ b/core-blocks/columns/editor.scss
@@ -1,7 +1,7 @@
 // These margins make sure that nested blocks stack/overlay with the parent block chrome
 // This is sort of an experiment at making sure the editor looks as much like the end result as possible
 // Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere
-// Note that when using CSS grid, margins do not collapse on the container
+// When using CSS grid, margins do not collapse on the container.
 .wp-block-columns .editor-block-list__layout {
 	margin-left: 0;
 	margin-right: 0;

From 18d20b5e79af87e0eb07a7ad14059dbe0c0021db Mon Sep 17 00:00:00 2001
From: "Matthew Riley MacPherson (tofumatt)" <hi@tofumatt.com>
Date: Wed, 4 Jul 2018 02:39:13 +0100
Subject: [PATCH 3/9] fix: Multi-block selection on mouse movement after
 mouseDown

---
 editor/components/block-list/block.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
index a8af6b15b27e10..710d9c5ceccd9c 100644
--- a/editor/components/block-list/block.js
+++ b/editor/components/block-list/block.js
@@ -515,6 +515,7 @@ export class BlockListBlock extends Component {
 					/>
 				) }
 				{ shouldShowBreadcrumb && <BlockBreadcrumb uid={ uid } isHidden={ ! ( isHovered || isSelected ) || hoverArea !== 'left' } /> }
+				{ shouldShowContextualToolbar && <BlockContextualToolbar /> }
 				{ isFirstMultiSelected && <BlockMultiControls rootUID={ rootUID } /> }
 				<IgnoreNestedEvents
 					ref={ this.bindBlockNode }
@@ -523,7 +524,6 @@ export class BlockListBlock extends Component {
 					className="editor-block-list__block-edit"
 					data-block={ uid }
 				>
-					{ shouldShowContextualToolbar && <BlockContextualToolbar /> }
 					<BlockCrashBoundary onError={ this.onBlockError }>
 						{ isValid && mode === 'visual' && (
 							<BlockEdit

From d3e3d38fa14c26232026a611820b2149b9fe7852 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 4 Jul 2018 09:45:26 +0200
Subject: [PATCH 4/9] Fix rebase issues, part 1

- Fixed toolbar position on mobile.
- Fixed toolbar position on desktop breakpoints
- Fixed appender regression
- Fixed issue with warning blocks having no hover or selected outlines.
- Fixed positioning of ellipsis on wide blocks.
- Fixed issue with full-wide gallery.
---
 core-blocks/gallery/editor.scss               |  9 ++-
 edit-post/components/visual-editor/style.scss |  6 +-
 editor/components/block-list/style.scss       | 67 +++++++------------
 3 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/core-blocks/gallery/editor.scss b/core-blocks/gallery/editor.scss
index cbe95fcb308614..e47a6f8312ec55 100644
--- a/core-blocks/gallery/editor.scss
+++ b/core-blocks/gallery/editor.scss
@@ -1,12 +1,19 @@
 .wp-block-gallery.components-placeholder {
 	margin: 0px;
 }
+
+// Allow gallery items to go edge to edge.
 .gutenberg .wp-block-gallery:not( .components-placeholder ) {
-	// Allow gallery items to go edge to edge.
 	margin-left: -8px;
 	margin-right: -8px;
 }
 
+// Don't use negative margins when full-wide.
+.gutenberg [data-align="full"] .wp-block-gallery:not( .components-placeholder ) {
+	margin-left: auto;
+	margin-right: auto;
+}
+
 .blocks-gallery-item {
 
 	.is-selected {
diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
index df4ae931287681..04c2a30ae9a204 100644
--- a/edit-post/components/visual-editor/style.scss
+++ b/edit-post/components/visual-editor/style.scss
@@ -2,12 +2,16 @@
 	position: relative;
 	padding: 50px 0;
 
-	.editor-default-block-appender__content, // The default appender should match a single paragraph.
+	input[type="text"].editor-default-block-appender__content, // The default appender should match a single paragraph. Needs specificity.
 	&,
 	& p {
 		font-family: $editor-font;
 		font-size: $editor-font-size;
 		line-height: $editor-line-height;
+	}
+
+	&,
+	& p {
 		color: $dark-gray-700;
 	}
 
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index c9e8d05a66e9ed..58ae44f09548e6 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -141,7 +141,8 @@
 	// This allows margins to collapse, which gives a better representation of how it looks on the frontend.
 	.editor-default-block-appender__content,
 	.editor-block-list__block .editor-block-list__block-edit,
-	.editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit { // Explicitly target nested blocks, as those need to override the preceeding rule.
+	.editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit,
+	.editor-block-list__layout .editor-default-block-appender .editor-default-block-appender__content { // Explicitly target nested blocks, as those need to override the preceeding rule.
 		margin-top: $block-padding * 2 + $block-spacing;
 		margin-bottom: $block-padding * 2 + $block-spacing;
 	}
@@ -182,33 +183,6 @@
 		}
 	 }
 
-	/**
-	 * Warnings
-	 */
-
-	&.has-warning .editor-block-list__block-edit {
-		position: relative;
-		min-height: 250px;
-		max-height: 500px;
-		overflow: hidden;
-
-		> :not( .editor-warning ) {
-			pointer-events: none;
-			user-select: none;
-		}
-	}
-
-	&.has-warning .editor-block-list__block-edit:after {
-		content: '';
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		background-color: rgba( $white, 0.6 );
-		background-image: linear-gradient( to bottom, transparent, $white );
-	}
-
 	/**
 	 * Block outline layout
 	 */
@@ -229,8 +203,6 @@
 			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() {
@@ -309,10 +281,10 @@
 
 	// Warnings
 	 &.has-warning .editor-block-list__block-edit {
-		position: relative;
+		//position: relative;
 		min-height: 250px;
 		max-height: 500px;
-		overflow: hidden;
+		//overflow: hidden;
 
 		> :not( .editor-warning ) {
 			pointer-events: none;
@@ -416,7 +388,7 @@
 		> .editor-block-mover,
 		> .editor-block-settings-menu {
 			// This moves the menu up by the height of the button + border + padding.
-			top: -$block-side-ui-width - $block-padding - $border-width;
+			top: -$block-side-ui-width - $block-padding - $block-side-ui-clearance;
 			bottom: auto;
 			min-height: 0;
 			height: auto;
@@ -433,8 +405,7 @@
 		}
 
 		> .editor-block-settings-menu {
-			right: $parent-block-padding;
-			width: $block-side-ui-width * 2;
+			width: $block-side-ui-width;
 			flex-direction: row;
 		}
 
@@ -472,6 +443,13 @@
 		> .editor-block-list__breadcrumb {
 			right: -$block-padding;
 		}
+
+		// Position ellipsis.
+		> .editor-block-settings-menu {
+			right: -$block-padding + $block-side-ui-clearance;
+			width: $block-side-ui-width;
+			flex-direction: row;
+		}
 	}
 
 	// Full-wide
@@ -509,6 +487,13 @@
 			border-left-width: 0;
 			border-right-width: 0;
 		}
+
+		// Position ellipsis.
+		> .editor-block-settings-menu {
+			right: $block-side-ui-clearance;
+			width: $block-side-ui-width;
+			flex-direction: row;
+		}
 	}
 
 	// Clear floats
@@ -854,17 +839,17 @@
 	}
 
 	// Make block toolbar full width on mobile.
-	margin-left: -$block-padding - $border-width;
-	margin-right: -$block-padding - $border-width;
+	margin-left: -$border-width;
+	margin-right: -$border-width;
 
 	@include break-small() {
-		margin-left: -$parent-block-padding - $border-width;
-		margin-right: -$parent-block-padding - $border-width;
+		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: -$block-padding - $border-width;
-			margin-right: -$block-padding - $border-width;
+			margin-left: -$parent-block-padding - $block-padding - $border-width;
+			margin-right: -$parent-block-padding - $block-padding - $border-width;
 		}
 
 		// Except for wide elements, this causes a horizontal scrollbar.

From b8454a917aa8bcd3d0155f4dcb24cae6a2a73796 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 4 Jul 2018 10:35:07 +0200
Subject: [PATCH 5/9] Fix rebase issues, part 2.

- Fixed a few typos and an issue with warnings. This will be revisited in a future patch also being worked on separately.
- Fixed position of toolbar on wide and fullwide.
- Fixed positioning of mover on wide and fullwide.
- Fixed issue with additional margins in columns block.
- Fixed issue with the invisible toolbar on the Column (singular) block breaking the layout. This also fixed an issue with the hover label and sibling inserter positioning on the column.
---
 core-blocks/columns/editor.scss               |  8 ++++++
 edit-post/components/visual-editor/style.scss | 12 ++++-----
 editor/components/block-list/style.scss       | 25 +++++++++----------
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/core-blocks/columns/editor.scss b/core-blocks/columns/editor.scss
index 9787a20b1464b4..c05d4ffc3ad176 100644
--- a/core-blocks/columns/editor.scss
+++ b/core-blocks/columns/editor.scss
@@ -32,6 +32,14 @@
 	}
 }
 
+// Flex container margins do not collapse: https://www.w3.org/TR/css-flexbox-1/#flex-containers.
+// Therefore, let's at least not add any additional margins here.
+.editor-block-list__layout .editor-block-list__block[data-type="core/columns"] > .editor-block-list__block-edit,
+.editor-block-list__layout .editor-block-list__block[data-type="core/column"] > .editor-block-list__block-edit {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
 .wp-block-columns {
 	display: block;
 
diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
index 04c2a30ae9a204..0337b9dfd2dc1c 100644
--- a/edit-post/components/visual-editor/style.scss
+++ b/edit-post/components/visual-editor/style.scss
@@ -57,9 +57,9 @@
 
 		// Center the block toolbar on wide and full-wide blocks.
 		// Use specific selector to not affect nested block toolbars.
-		&[data-align="wide"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar,
-		&[data-align="full"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar {
-			width: calc( 100% + #{ $parent-block-padding + $parent-block-padding + $border-width + $border-width } );
+		&[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.
 			height: 0px; // This collapses the container to an invisible element without margin.
 			text-align: center;
 
@@ -71,9 +71,9 @@
 		}
 
 		// The centering math changes when a fullwide image doesn't have block padding.
-		&[data-align="full"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar {
-			width: calc( 100% + #{ $block-padding + $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.
+		
 			.editor-block-toolbar {
 				max-width: $content-width - $border-width - $border-width;
 			}
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index 58ae44f09548e6..f672394e4a1ad1 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -281,10 +281,7 @@
 
 	// Warnings
 	 &.has-warning .editor-block-list__block-edit {
-		//position: relative;
 		min-height: 250px;
-		max-height: 500px;
-		//overflow: hidden;
 
 		> :not( .editor-warning ) {
 			pointer-events: none;
@@ -400,10 +397,6 @@
 			}
 		}
 
-		> .editor-block-mover {
-			left: $parent-block-padding;
-		}
-
 		> .editor-block-settings-menu {
 			width: $block-side-ui-width;
 			flex-direction: row;
@@ -447,8 +440,11 @@
 		// Position ellipsis.
 		> .editor-block-settings-menu {
 			right: -$block-padding + $block-side-ui-clearance;
-			width: $block-side-ui-width;
-			flex-direction: row;
+		}
+	
+		// Position mover
+		> .editor-block-mover {
+			left: -$block-padding + $border-width;
 		}
 	}
 
@@ -491,8 +487,11 @@
 		// Position ellipsis.
 		> .editor-block-settings-menu {
 			right: $block-side-ui-clearance;
-			width: $block-side-ui-width;
-			flex-direction: row;
+		}
+
+		// Position mover
+		> .editor-block-mover {
+			left: $border-width;
 		}
 	}
 
@@ -670,7 +669,7 @@
 		}
 	}
 
-	// sth
+	// Reset negative margins on mobile for full-width.
 	&[data-align="full"] .editor-block-list__block-mobile-toolbar {
 		margin-left: 0;
 		margin-right: 0;
@@ -807,7 +806,7 @@
 	white-space: nowrap;
 	text-align: left;
 	pointer-events: none;
-	height: $block-toolbar-height;
+	//height: $block-toolbar-height;
 
 	// Position toolbar below the block on mobile.
 	position: absolute;

From dbe1ea1c847d6706614503dacc59d3ea124b8688 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 4 Jul 2018 10:45:26 +0200
Subject: [PATCH 6/9] Fix rebase issues, part 3.

- Fixed a regression in IE.
- Fixed the position of editor warning after the refactor.
---
 editor/components/warning/style.scss | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/editor/components/warning/style.scss b/editor/components/warning/style.scss
index 4adcbd1bd2b315..87fb4a16158da7 100644
--- a/editor/components/warning/style.scss
+++ b/editor/components/warning/style.scss
@@ -1,21 +1,18 @@
 .editor-warning {
 	z-index: z-index( '.editor-warning' );
 	position: absolute;
-	top: 15px;
-	left: 50%;
-	transform: translateX( -50% );
+	top: 0;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-around;
 	align-items: center;
-	width: 96%;
 	max-width: 780px;
+	width: calc( 100% - #{ $parent-block-padding * 2 + $block-padding * 2 } );
 	padding: 20px;
 	background-color: $white;
 	border: 1px solid $light-gray-500;
 	text-align: center;
 	line-height: $default-line-height;
-	box-shadow: $shadow-popover;
 	font-family: $default-font;
 	font-size: $default-font-size;
 }

From ffb3f5dca33bfed42d9e629fd95701bf8e69288a Mon Sep 17 00:00:00 2001
From: "Matthew Riley MacPherson (tofumatt)" <hi@tofumatt.com>
Date: Wed, 4 Jul 2018 12:17:43 +0100
Subject: [PATCH 7/9] chore: Typo tweaks

---
 editor/components/block-list/style.scss | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index f672394e4a1ad1..8a98fd94885fbe 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -142,7 +142,7 @@
 	.editor-default-block-appender__content,
 	.editor-block-list__block .editor-block-list__block-edit,
 	.editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit,
-	.editor-block-list__layout .editor-default-block-appender .editor-default-block-appender__content { // Explicitly target nested blocks, as those need to override the preceeding rule.
+	.editor-block-list__layout .editor-default-block-appender .editor-default-block-appender__content { // Explicitly target nested blocks, as those need to override the preceding rule.
 		margin-top: $block-padding * 2 + $block-spacing;
 		margin-bottom: $block-padding * 2 + $block-spacing;
 	}
@@ -407,7 +407,7 @@
 			float: left;
 		}
 
-		// There is no side UI clearance on fullwide elements, so they are simply not draggable on the sides
+		// There is no side UI clearance on full-wide elements, so they are simply not draggable on the sides
 		> .editor-block-list__block-draggable {
 			left: 0;
 			right: 0;
@@ -441,7 +441,7 @@
 		> .editor-block-settings-menu {
 			right: -$block-padding + $block-side-ui-clearance;
 		}
-	
+
 		// Position mover
 		> .editor-block-mover {
 			left: -$block-padding + $border-width;
@@ -471,7 +471,8 @@
 				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
+			// `width: fit-content` from the image block.
 			figure {
 				width: 100%;
 			}
@@ -525,12 +526,12 @@
 
 
 /**
- * Left and right side UI, & Unified toolbar on Mobile
+ * Left and right side UI; Unified toolbar on Mobile
  */
 
 .editor-block-list__block {
 
-	// Left and right
+	// Left and right block settings and mover.
 	> .editor-block-settings-menu,
 	> .editor-block-mover {
 		position: absolute;
@@ -546,7 +547,7 @@
 		top: -$block-padding - $border-width;
 	}
 
-	// Elevate when selected or hovered
+	// Elevate when block is selected or hovered.
 	@include break-small() {
 		&.is-multi-selected,
 		&.is-selected,

From 783cff960a159f3abd72f288011f9787f1eb6e47 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 5 Jul 2018 11:53:39 +0200
Subject: [PATCH 8/9] Remove comment.

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

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index 8a98fd94885fbe..a70977d41fb3be 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -807,7 +807,6 @@
 	white-space: nowrap;
 	text-align: left;
 	pointer-events: none;
-	//height: $block-toolbar-height;
 
 	// Position toolbar below the block on mobile.
 	position: absolute;

From 9e51819bd485b7ce51599d5a947de1c075b42829 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Thu, 5 Jul 2018 12:56:43 +0200
Subject: [PATCH 9/9] Tests: Make adding blocks e2e test pass by refering the
 area below editor explicitly

---
 test/e2e/specs/adding-blocks.test.js | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/test/e2e/specs/adding-blocks.test.js b/test/e2e/specs/adding-blocks.test.js
index 993082692c3d8b..06bbdadb13b216 100644
--- a/test/e2e/specs/adding-blocks.test.js
+++ b/test/e2e/specs/adding-blocks.test.js
@@ -10,23 +10,9 @@ describe( 'adding blocks', () => {
 		await newPost();
 	} );
 
-	/**
-	 * Given a Puppeteer ElementHandle, clicks below its bounding box.
-	 *
-	 * @param {Puppeteer.ElementHandle} elementHandle Element handle.
-	 *
-	 * @return {Promise} Promise resolving when click occurs.
-	 */
-	async function clickBelow( elementHandle ) {
-		const box = await elementHandle.boundingBox();
-		const x = box.x + ( box.width / 2 );
-		const y = box.y + box.height + 1;
-		return page.mouse.click( x, y );
-	}
-
 	it( 'Should insert content using the placeholder and the regular inserter', async () => {
 		// Click below editor to focus last field (block appender)
-		await clickBelow( await page.$( '.editor-default-block-appender' ) );
+		await page.click( '.editor-writing-flow__click-redirect' );
 		expect( await page.$( '[data-type="core/paragraph"]' ) ).not.toBeNull();
 
 		// Up to return back to title. Assumes that appender results in focus