diff --git a/components/toolbar/style.scss b/components/toolbar/style.scss
index f827b169fa05e..5afce2004382d 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 10f63ad75823c..c05d4ffc3ad17 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
+// When using CSS grid, margins do not collapse on the container.
 .wp-block-columns .editor-block-list__layout {
 	margin-left: 0;
 	margin-right: 0;
@@ -31,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/core-blocks/gallery/editor.scss b/core-blocks/gallery/editor.scss
index cbe95fcb30861..e47a6f8312ec5 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/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss
index 56394bab048cd..e4844ef629a8b 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 e209c450521cb..c8dd4f9e9c035 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 fd6245e5dd299..41d08213520eb 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 9e60e86a2bb52..0337b9dfd2dc1 100644
--- a/edit-post/components/visual-editor/style.scss
+++ b/edit-post/components/visual-editor/style.scss
@@ -2,11 +2,16 @@
 	position: relative;
 	padding: 50px 0;
 
+	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;
 	}
 
@@ -50,11 +55,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-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;
+
+			.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-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/block.js b/editor/components/block-list/block.js
index 929b2fcd03e81..710d9c5ceccd9 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,
@@ -522,7 +524,6 @@ export class BlockListBlock extends Component {
 					className="editor-block-list__block-edit"
 					data-block={ uid }
 				>
-
 					<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 d66969f992462..a70977d41fb3b 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,27 @@
 		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,
+	.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;
+	}
+}
 
 .editor-block-list__layout .editor-block-list__block {
 	position: relative;
@@ -145,23 +162,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
 	 */
@@ -183,36 +183,10 @@
 		}
 	 }
 
-	/**
-	 * 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
 	 */
+
 	.editor-block-list__block-edit {
 		position: relative;
 
@@ -224,10 +198,11 @@
 			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() {
@@ -246,11 +221,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;
@@ -307,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;
@@ -413,8 +384,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 - $block-side-ui-clearance;
 			bottom: auto;
 			min-height: 0;
 			height: auto;
@@ -426,13 +397,8 @@
 			}
 		}
 
-		> .editor-block-mover {
-			left: 10px;
-		}
-
 		> .editor-block-settings-menu {
-			right: 10px;
-			width: $block-side-ui-width * 2;
+			width: $block-side-ui-width;
 			flex-direction: row;
 		}
 
@@ -441,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;
@@ -470,6 +436,16 @@
 		> .editor-block-list__breadcrumb {
 			right: -$block-padding;
 		}
+
+		// Position ellipsis.
+		> .editor-block-settings-menu {
+			right: -$block-padding + $block-side-ui-clearance;
+		}
+
+		// Position mover
+		> .editor-block-mover {
+			left: -$block-padding + $border-width;
+		}
 	}
 
 	// Full-wide
@@ -495,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%;
 			}
@@ -507,6 +484,16 @@
 			border-left-width: 0;
 			border-right-width: 0;
 		}
+
+		// Position ellipsis.
+		> .editor-block-settings-menu {
+			right: $block-side-ui-clearance;
+		}
+
+		// Position mover
+		> .editor-block-mover {
+			left: $border-width;
+		}
 	}
 
 	// Clear floats
@@ -539,23 +526,28 @@
 
 
 /**
- * Left and right side UI
+ * 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;
-		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;
 	}
 
-	// Elevate when selected or hovered
+	// Position depending on whether selected or not.
+	> .editor-block-settings-menu,
+	> .editor-block-mover {
+		top: -$block-padding - $border-width;
+	}
+
+	// Elevate when block is selected or hovered.
 	@include break-small() {
 		&.is-multi-selected,
 		&.is-selected,
@@ -619,11 +611,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 +625,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;
 		}
 
@@ -676,7 +670,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;
@@ -687,6 +681,7 @@
 /**
  * In-Canvas Inserter
  */
+
 .editor-block-list .editor-inserter {
 	margin: $item-spacing;
 	cursor: move; // Fallback for IE/Edge < 14
@@ -716,7 +711,6 @@
 	}
 
 	position: absolute;
-	top: 0;
 	bottom: auto;
 	left: 0;
 	right: 0;
@@ -724,6 +718,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,42 +798,35 @@
 
 
 /**
- * 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;
 	text-align: left;
 	pointer-events: none;
-	height: $block-toolbar-height;
 
 	// 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;
 		}
 	}
 
@@ -848,17 +838,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 - $block-side-ui-width - $border-width;
-		margin-right: -$parent-block-padding - $block-side-ui-width - $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 - $block-side-ui-width - $border-width;
-			margin-right: -$block-padding - $block-side-ui-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.
@@ -872,13 +862,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 +910,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 +935,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 +1006,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 ddea50def9bfd..eca87d7c7c6b6 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 49d9d289719bc..d972bc0ba581a 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 1fedaad2e9d6f..389659b29aa2d 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 3a5c27b33580e..1b0ec86de0d87 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;
diff --git a/editor/components/warning/style.scss b/editor/components/warning/style.scss
index 4adcbd1bd2b31..87fb4a16158da 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;
 }
diff --git a/test/e2e/specs/adding-blocks.test.js b/test/e2e/specs/adding-blocks.test.js
index 993082692c3d8..06bbdadb13b21 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