From 50fc9558812ab7675a60312ef682e3d257bab809 Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Thu, 19 Dec 2019 14:56:07 +0100
Subject: [PATCH 01/10] Lighter block DOM: contextual toolbar in popover

---
 .../block-list/block-contextual-toolbar.js    |   3 +-
 .../src/components/block-list/block.js        |  52 +++---
 .../src/components/block-list/breadcrumb.js   |   4 +-
 .../src/components/block-list/style.scss      |  68 ++++----
 .../block-library/src/columns/editor.scss     |   8 +-
 packages/components/src/popover/index.js      |  12 +-
 packages/components/src/popover/utils.js      | 154 +++++++++++++-----
 .../block-hierarchy-navigation.test.js        |   8 +-
 .../various/keyboard-navigable-blocks.test.js |   3 +-
 .../edit-post/src/components/layout/index.js  |   1 +
 10 files changed, 207 insertions(+), 106 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js
index ce9a1c8578084..a40c06b5f9fa4 100644
--- a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js
+++ b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js
@@ -9,13 +9,14 @@ import { __ } from '@wordpress/i18n';
 import NavigableToolbar from '../navigable-toolbar';
 import { BlockToolbar } from '../';
 
-function BlockContextualToolbar( { focusOnMount } ) {
+function BlockContextualToolbar( { focusOnMount, ...props } ) {
 	return (
 		<NavigableToolbar
 			focusOnMount={ focusOnMount }
 			className="block-editor-block-contextual-toolbar"
 			/* translators: accessibility text for the block toolbar */
 			aria-label={ __( 'Block tools' ) }
+			{ ...props }
 		>
 			<BlockToolbar />
 		</NavigableToolbar>
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 294cb91e60b9e..ea64e0102a573 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -22,7 +22,7 @@ import {
 	isUnmodifiedDefaultBlock,
 	getUnregisteredTypeHandlerName,
 } from '@wordpress/blocks';
-import { KeyboardShortcuts, withFilters } from '@wordpress/components';
+import { KeyboardShortcuts, withFilters, Popover } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	withDispatch,
@@ -522,6 +522,7 @@ function BlockListBlock( {
 			// If the toolbar is being shown because of being forced
 			// it should focus the toolbar right after the mount.
 			focusOnMount={ isForcingContextualToolbar.current }
+			data-align={ wrapperProps ? wrapperProps[ 'data-align' ] : undefined }
 		/>
 	);
 
@@ -576,31 +577,44 @@ function BlockListBlock( {
 					/>
 				) }
 				{ shouldRenderMovers && ( moverDirection === 'vertical' ) && blockMover }
-				{ shouldShowBreadcrumb && (
-					<BlockBreadcrumb
-						clientId={ clientId }
-						ref={ breadcrumb }
-					/>
-				) }
-
 				{ ( isCapturingDescendantToolbars ) && (
 					// A slot made available on all ancestors of the selected Block
 					// to allow child Blocks to render their toolbars into the DOM
 					// of the appropriate parent.
 					<ChildToolbarSlot />
 				) }
-
-				{ ( ! ( hasAncestorCapturingToolbars ) ) && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && renderBlockContextualToolbar() }
-
-				{ ( hasAncestorCapturingToolbars ) && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && (
-					// If the parent Block is set to consume toolbars of the child Blocks
-					// then render the child Block's toolbar into the Slot provided
-					// by the parent.
-					<ChildToolbar>
-						{ renderBlockContextualToolbar() }
-					</ChildToolbar>
+				{ ( shouldShowBreadcrumb || shouldShowContextualToolbar || isForcingContextualToolbar.current ) && (
+					<Popover
+						noArrow
+						animate={ false }
+						// Position above the anchor, pop out towards the right,
+						// and position in the left corner.
+						// To do: refactor `Popover` to make this prop clearer.
+						position="top right left"
+						focusOnMount={ false }
+						anchorRef={ blockNodeRef.current }
+						className="block-editor-block-list__block-popover"
+						__unstableSticky={ isPartOfMultiSelection ? '.wp-block.is-multi-selected' : true }
+						__unstableSlotName="block-toolbar"
+					>
+						{ ! hasAncestorCapturingToolbars && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && renderBlockContextualToolbar() }
+						{ hasAncestorCapturingToolbars && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && (
+							// If the parent Block is set to consume toolbars of the child Blocks
+							// then render the child Block's toolbar into the Slot provided
+							// by the parent.
+							<ChildToolbar>
+								{ renderBlockContextualToolbar() }
+							</ChildToolbar>
+						) }
+						{ shouldShowBreadcrumb && (
+							<BlockBreadcrumb
+								clientId={ clientId }
+								ref={ breadcrumb }
+								data-align={ wrapperProps ? wrapperProps[ 'data-align' ] : undefined }
+							/>
+						) }
+					</Popover>
 				) }
-
 				{
 					! isNavigationMode &&
 					! shouldShowContextualToolbar &&
diff --git a/packages/block-editor/src/components/block-list/breadcrumb.js b/packages/block-editor/src/components/block-list/breadcrumb.js
index 5d8d4517472cc..89c8f0e0c4c91 100644
--- a/packages/block-editor/src/components/block-list/breadcrumb.js
+++ b/packages/block-editor/src/components/block-list/breadcrumb.js
@@ -18,11 +18,11 @@ import BlockTitle from '../block-title';
  * @param {string}   props.clientId        Client ID of block.
  * @return {WPComponent} The component to be rendered.
  */
-const BlockBreadcrumb = forwardRef( ( { clientId }, ref ) => {
+const BlockBreadcrumb = forwardRef( ( { clientId, ...props }, ref ) => {
 	const { setNavigationMode } = useDispatch( 'core/block-editor' );
 
 	return (
-		<div className="block-editor-block-list__breadcrumb">
+		<div className="block-editor-block-list__breadcrumb" { ...props }>
 			<Toolbar>
 				<Button ref={ ref } onClick={ () => setNavigationMode( false ) }>
 					<BlockTitle clientId={ clientId } />
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 40276e541e03c..c27c8cd93163c 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -344,17 +344,6 @@
 		}
 	}
 
-	// Unlike most explicit left/right alignments, this one should be flipped by the auto-RTL system.
-	&[data-align="left"] .block-editor-block-contextual-toolbar {
-		left: 0;
-		right: auto;
-	}
-
-	&[data-align="right"] .block-editor-block-contextual-toolbar {
-		left: auto;
-		right: 0;
-	}
-
 	// Position the sticky toolbar correctly beyond the mobile breakpoint.
 	@include break-small() {
 		&[data-align="right"] .block-editor-block-contextual-toolbar,
@@ -774,12 +763,6 @@
 		text-align: left;
 		pointer-events: none;
 
-		// Position toolbar below the block on mobile.
-		position: absolute;
-		bottom: $block-toolbar-height - $block-padding - $border-width;
-		left: -$block-padding;
-		right: -$block-padding;
-
 		// Paint the borders on the toolbar itself on mobile.
 		border-top: $border-width solid $light-gray-800;
 		.components-toolbar {
@@ -860,9 +843,6 @@
 			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;
@@ -910,11 +890,6 @@
 
 		// Hide right border on desktop, where the .components-toolbar instead has a right border.
 		border-right: none;
-
-		// This prevents floats from messing up the position of the block toolbar on floats-adjacent blocks when selected.
-		position: absolute;
-		left: $border-width;
-		top: $border-width;
 	}
 }
 
@@ -924,14 +899,9 @@
  */
 .block-editor-block-list__breadcrumb {
 	display: block;
-	position: absolute;
 	line-height: 1;
 	z-index: z-index(".block-editor-block-list__breadcrumb");
 
-	// Position in the top left of the border.
-	left: -$block-padding;
-	top: -$block-toolbar-height - $block-padding;
-
 	.components-toolbar {
 		display: flex;
 		background: $white;
@@ -1009,3 +979,41 @@
 		margin-bottom: auto;
 	}
 }
+
+.components-popover.block-editor-block-list__block-popover {
+	z-index: 29;
+
+	.components-popover__content {
+		margin-left: 0 !important;
+		min-width: auto;
+		background: none;
+		border: none;
+		box-shadow: none;
+		overflow-y: visible;
+		// Allow clicks through the wrapper for the block movers, which may be
+		// positioned next to the toolbar.
+		pointer-events: none;
+
+		> * {
+			pointer-events: all;
+		}
+
+		.block-editor-block-contextual-toolbar,
+		.block-editor-block-list__breadcrumb {
+			margin-bottom: $block-padding - $border-width;
+			margin-left: - $block-padding;
+		}
+
+		// Make space for the block movers. Ideally they should move within the
+		// toolbar.
+		.block-editor-block-contextual-toolbar {
+			&[data-align="wide"] {
+				margin-left: 86px;
+			}
+
+			&[data-align="full"] {
+				margin-left: 86 + 2 * $block-padding;
+			}
+		}
+	}
+}
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 7c4be56fe335f..612f6c5677450 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -9,6 +9,10 @@
 	}
 }
 
+.components-popover .editor-block-contextual-toolbar[data-type="core/column"] {
+	margin-left: 0;
+}
+
 .wp-block-columns {
 	display: block;
 
@@ -91,10 +95,6 @@
 					right: 0;
 				}
 
-				> .block-editor-block-contextual-toolbar {
-					margin-left: -$border-width;
-				}
-
 				// Zero out margins.
 				> [data-block] {
 					margin-top: 0;
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index 223bbb5032afb..c619db0aa5988 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -224,6 +224,8 @@ const Popover = ( {
 	animate = true,
 	onClickOutside,
 	onFocusOutside,
+	__unstableSticky,
+	__unstableSlotName = SLOT_NAME,
 	/* eslint-enable no-unused-vars */
 	...contentProps
 } ) => {
@@ -276,7 +278,7 @@ const Popover = ( {
 				yAxis,
 				contentHeight,
 				contentWidth,
-			} = computePopoverPosition( anchor, contentRect.current, position );
+			} = computePopoverPosition( anchor, contentRect.current, position, __unstableSticky, anchorRef );
 
 			setClass( containerEl, 'is-without-arrow', noArrow || ( xAxis === 'center' && yAxis === 'middle' ) );
 			setAttribute( containerEl, 'data-x-axis', xAxis );
@@ -337,6 +339,7 @@ const Popover = ( {
 		anchorRef,
 		shouldAnchorIncludePadding,
 		position,
+		__unstableSticky,
 	] );
 
 	useFocusContentOnMount( focusOnMount, contentRef );
@@ -452,8 +455,8 @@ const Popover = ( {
 			{ ( { getSlot } ) => {
 				// In case there is no slot context in which to render,
 				// default to an in-place rendering.
-				if ( getSlot && getSlot( SLOT_NAME ) ) {
-					content = <Fill name={ SLOT_NAME }>{ content }</Fill>;
+				if ( getSlot && getSlot( __unstableSlotName ) ) {
+					content = <Fill name={ __unstableSlotName }>{ content }</Fill>;
 				}
 
 				return (
@@ -469,6 +472,7 @@ const Popover = ( {
 
 const PopoverContainer = Popover;
 
-PopoverContainer.Slot = () => <Slot bubblesVirtually name={ SLOT_NAME } />;
+PopoverContainer.Slot = ( { name = SLOT_NAME } ) =>
+	<Slot bubblesVirtually name={ name } />;
 
 export default PopoverContainer;
diff --git a/packages/components/src/popover/utils.js b/packages/components/src/popover/utils.js
index 9379e6d2786c0..9d0c936c8bd1a 100644
--- a/packages/components/src/popover/utils.js
+++ b/packages/components/src/popover/utils.js
@@ -1,3 +1,7 @@
+/**
+ * WordPress dependencies
+ */
+import { getScrollContainer } from '@wordpress/dom';
 
 /**
  * Module constants
@@ -8,14 +12,18 @@ const isRTL = () => document.documentElement.dir === 'rtl';
 /**
  * Utility used to compute the popover position over the xAxis
  *
- * @param {Object} anchorRect       Anchor Rect.
- * @param {Object} contentSize      Content Size.
- * @param {string} xAxis            Desired xAxis.
- * @param {string} chosenYAxis      yAxis to be used.
+ * @param {Object}  anchorRect  Anchor Rect.
+ * @param {Object}  contentSize Content Size.
+ * @param {string}  xAxis       Desired xAxis.
+ * @param {string}  corner      Desired corner.
+ * @param {boolean} sticky      Whether or not to stick the popover to the
+ *                              scroll container edge when part of the anchor
+ *                              leaves view.
+ * @param {string}  chosenYAxis yAxis to be used.
  *
  * @return {Object} Popover xAxis position and constraints.
  */
-export function computePopoverXAxisPosition( anchorRect, contentSize, xAxis, chosenYAxis ) {
+export function computePopoverXAxisPosition( anchorRect, contentSize, xAxis, corner, sticky, chosenYAxis ) {
 	const { width } = contentSize;
 	// Correct xAxis for RTL support
 	if ( xAxis === 'left' && isRTL() ) {
@@ -33,30 +41,48 @@ export function computePopoverXAxisPosition( anchorRect, contentSize, xAxis, cho
 			( anchorMidPoint + ( width / 2 ) > window.innerWidth ? window.innerWidth - anchorMidPoint : ( width / 2 ) )
 		),
 	};
-	const leftAlignmentX = chosenYAxis === 'middle' ? anchorRect.left : anchorMidPoint;
+
+	let leftAlignmentX = anchorRect.left;
+
+	if ( corner === 'right' ) {
+		leftAlignmentX = anchorRect.right;
+	} else if ( chosenYAxis !== 'middle' ) {
+		leftAlignmentX = anchorMidPoint;
+	}
+
+	let rightAlignmentX = anchorRect.right;
+
+	if ( corner === 'left' ) {
+		rightAlignmentX = anchorRect.left;
+	} else if ( chosenYAxis !== 'middle' ) {
+		rightAlignmentX = anchorMidPoint;
+	}
+
 	const leftAlignment = {
 		popoverLeft: leftAlignmentX,
 		contentWidth: leftAlignmentX - width > 0 ? width : leftAlignmentX,
 	};
-	const rightAlignmentX = chosenYAxis === 'middle' ? anchorRect.right : anchorMidPoint;
 	const rightAlignment = {
 		popoverLeft: rightAlignmentX,
 		contentWidth: rightAlignmentX + width > window.innerWidth ? window.innerWidth - rightAlignmentX : width,
 	};
 
 	// Choosing the x axis
-	let chosenXAxis;
+	let chosenXAxis = xAxis;
 	let contentWidth = null;
-	if ( xAxis === 'center' && centerAlignment.contentWidth === width ) {
-		chosenXAxis = 'center';
-	} else if ( xAxis === 'left' && leftAlignment.contentWidth === width ) {
-		chosenXAxis = 'left';
-	} else if ( xAxis === 'right' && rightAlignment.contentWidth === width ) {
-		chosenXAxis = 'right';
-	} else {
-		chosenXAxis = leftAlignment.contentWidth > rightAlignment.contentWidth ? 'left' : 'right';
-		const chosenWidth = chosenXAxis === 'left' ? leftAlignment.contentWidth : rightAlignment.contentWidth;
-		contentWidth = chosenWidth !== width ? chosenWidth : null;
+
+	if ( ! sticky ) {
+		if ( xAxis === 'center' && centerAlignment.contentWidth === width ) {
+			chosenXAxis = 'center';
+		} else if ( xAxis === 'left' && leftAlignment.contentWidth === width ) {
+			chosenXAxis = 'left';
+		} else if ( xAxis === 'right' && rightAlignment.contentWidth === width ) {
+			chosenXAxis = 'right';
+		} else {
+			chosenXAxis = leftAlignment.contentWidth > rightAlignment.contentWidth ? 'left' : 'right';
+			const chosenWidth = chosenXAxis === 'left' ? leftAlignment.contentWidth : rightAlignment.contentWidth;
+			contentWidth = chosenWidth !== width ? chosenWidth : null;
+		}
 	}
 
 	let popoverLeft;
@@ -78,17 +104,55 @@ export function computePopoverXAxisPosition( anchorRect, contentSize, xAxis, cho
 /**
  * Utility used to compute the popover position over the yAxis
  *
- * @param {Object} anchorRect       Anchor Rect.
- * @param {Object} contentSize      Content Size.
- * @param {string} yAxis            Desired yAxis.
+ * @param {Object}  anchorRect  Anchor Rect.
+ * @param {Object}  contentSize Content Size.
+ * @param {string}  yAxis       Desired yAxis.
+ * @param {string}  corner      Desired corner.
+ * @param {boolean} sticky      Whether or not to stick the popover to the
+ *                              scroll container edge when part of the anchor
+ *                              leaves view.
+ * @param {Element} anchorRef   The anchor element.
  *
  * @return {Object} Popover xAxis position and constraints.
  */
-export function computePopoverYAxisPosition( anchorRect, contentSize, yAxis ) {
+export function computePopoverYAxisPosition( anchorRect, contentSize, yAxis, corner, sticky, anchorRef ) {
 	const { height } = contentSize;
 
+	if ( sticky ) {
+		let topEl = anchorRef;
+		let bottomEl = anchorRef;
+
+		if ( typeof sticky === 'string' ) {
+			const elements = document.querySelectorAll( sticky );
+
+			if ( elements.length ) {
+				topEl = elements[ 0 ];
+				bottomEl = elements[ elements.length - 1 ];
+			}
+		}
+
+		const scrollContainerEl = getScrollContainer( topEl ) || document.body;
+		const scrollRect = scrollContainerEl.getBoundingClientRect();
+		const topRect = topEl.getBoundingClientRect();
+		const bottomRect = bottomEl.getBoundingClientRect();
+
+		if ( topRect.top - height <= scrollRect.top ) {
+			return {
+				yAxis,
+				popoverTop: Math.min( bottomRect.bottom, scrollRect.top + height ),
+			};
+		}
+	}
+
 	// y axis alignment choices
-	const anchorMidPoint = anchorRect.top + ( anchorRect.height / 2 );
+	let anchorMidPoint = anchorRect.top + ( anchorRect.height / 2 );
+
+	if ( corner === 'bottom' ) {
+		anchorMidPoint = anchorRect.bottom;
+	} else if ( corner === 'top' ) {
+		anchorMidPoint = anchorRect.top;
+	}
+
 	const middleAlignment = {
 		popoverTop: anchorMidPoint,
 		contentHeight: (
@@ -96,6 +160,7 @@ export function computePopoverYAxisPosition( anchorRect, contentSize, yAxis ) {
 			( anchorMidPoint + ( height / 2 ) > window.innerHeight ? window.innerHeight - anchorMidPoint : ( height / 2 ) )
 		),
 	};
+
 	const topAlignment = {
 		popoverTop: anchorRect.top,
 		contentHeight: anchorRect.top - HEIGHT_OFFSET - height > 0 ? height : anchorRect.top - HEIGHT_OFFSET,
@@ -106,18 +171,21 @@ export function computePopoverYAxisPosition( anchorRect, contentSize, yAxis ) {
 	};
 
 	// Choosing the y axis
-	let chosenYAxis;
+	let chosenYAxis = yAxis;
 	let contentHeight = null;
-	if ( yAxis === 'middle' && middleAlignment.contentHeight === height ) {
-		chosenYAxis = 'middle';
-	} else if ( yAxis === 'top' && topAlignment.contentHeight === height ) {
-		chosenYAxis = 'top';
-	} else if ( yAxis === 'bottom' && bottomAlignment.contentHeight === height ) {
-		chosenYAxis = 'bottom';
-	} else {
-		chosenYAxis = topAlignment.contentHeight > bottomAlignment.contentHeight ? 'top' : 'bottom';
-		const chosenHeight = chosenYAxis === 'top' ? topAlignment.contentHeight : bottomAlignment.contentHeight;
-		contentHeight = chosenHeight !== height ? chosenHeight : null;
+
+	if ( ! sticky ) {
+		if ( yAxis === 'middle' && middleAlignment.contentHeight === height ) {
+			chosenYAxis = 'middle';
+		} else if ( yAxis === 'top' && topAlignment.contentHeight === height ) {
+			chosenYAxis = 'top';
+		} else if ( yAxis === 'bottom' && bottomAlignment.contentHeight === height ) {
+			chosenYAxis = 'bottom';
+		} else {
+			chosenYAxis = topAlignment.contentHeight > bottomAlignment.contentHeight ? 'top' : 'bottom';
+			const chosenHeight = chosenYAxis === 'top' ? topAlignment.contentHeight : bottomAlignment.contentHeight;
+			contentHeight = chosenHeight !== height ? chosenHeight : null;
+		}
 	}
 
 	let popoverTop;
@@ -140,17 +208,21 @@ export function computePopoverYAxisPosition( anchorRect, contentSize, yAxis ) {
  * Utility used to compute the popover position and the content max width/height for a popover
  * given its anchor rect and its content size.
  *
- * @param {Object} anchorRect       Anchor Rect.
- * @param {Object} contentSize      Content Size.
- * @param {string} position         Position.
+ * @param {Object}  anchorRect  Anchor Rect.
+ * @param {Object}  contentSize Content Size.
+ * @param {string}  position    Position.
+ * @param {boolean} sticky      Whether or not to stick the popover to the
+ *                              scroll container edge when part of the anchor
+ *                              leaves view.
+ * @param {Element} anchorRef   The anchor element.
  *
  * @return {Object} Popover position and constraints.
  */
-export function computePopoverPosition( anchorRect, contentSize, position = 'top' ) {
-	const [ yAxis, xAxis = 'center' ] = position.split( ' ' );
+export function computePopoverPosition( anchorRect, contentSize, position = 'top', sticky, anchorRef ) {
+	const [ yAxis, xAxis = 'center', corner ] = position.split( ' ' );
 
-	const yAxisPosition = computePopoverYAxisPosition( anchorRect, contentSize, yAxis );
-	const xAxisPosition = computePopoverXAxisPosition( anchorRect, contentSize, xAxis, yAxisPosition.yAxis );
+	const yAxisPosition = computePopoverYAxisPosition( anchorRect, contentSize, yAxis, corner, sticky, anchorRef );
+	const xAxisPosition = computePopoverXAxisPosition( anchorRect, contentSize, xAxis, corner, sticky, yAxisPosition.yAxis );
 
 	return {
 		...xAxisPosition,
diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
index 2dc5dc1f6cc54..77fe92cbb0db3 100644
--- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
@@ -24,7 +24,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.click( '[aria-label="Two columns; equal split"]' );
 
 		// Add a paragraph in the first column.
-		await pressKeyTimes( 'Tab', 3 ); // Tab to inserter.
+		await page.keyboard.press( 'Tab' ); // Tab to inserter.
 		await page.keyboard.press( 'Enter' ); // Activate inserter.
 		await page.keyboard.type( 'Paragraph' );
 		await pressKeyTimes( 'Tab', 3 ); // Tab to paragraph result.
@@ -51,7 +51,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await lastColumnsBlockMenuItem.click();
 
 		// Insert text in the last column block.
-		await pressKeyTimes( 'Tab', 3 ); // Tab to inserter.
+		await page.keyboard.press( 'Tab' ); // Tab to inserter.
 		await page.keyboard.press( 'Enter' ); // Activate inserter.
 		await page.keyboard.type( 'Paragraph' );
 		await pressKeyTimes( 'Tab', 3 ); // Tab to paragraph result.
@@ -66,7 +66,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.click( '[aria-label="Two columns; equal split"]' );
 
 		// Add a paragraph in the first column.
-		await pressKeyTimes( 'Tab', 3 ); // Tab to inserter.
+		await page.keyboard.press( 'Tab' ); // Tab to inserter.
 		await page.keyboard.press( 'Enter' ); // Activate inserter.
 		await page.keyboard.type( 'Paragraph' );
 		await pressKeyTimes( 'Tab', 3 ); // Tab to paragraph result.
@@ -94,7 +94,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.waitForSelector( '.is-selected[data-type="core/column"]' );
 
 		// Insert text in the last column block
-		await pressKeyTimes( 'Tab', 3 ); // Tab to inserter.
+		await page.keyboard.press( 'Tab' ); // Tab to inserter.
 		await page.keyboard.press( 'Enter' ); // Activate inserter.
 		await page.keyboard.type( 'Paragraph' );
 		await pressKeyTimes( 'Tab', 3 ); // Tab to paragraph result.
diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
index 5135f5cd0dd68..644a7b46f526e 100644
--- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
@@ -23,6 +23,8 @@ const navigateToContentEditorTop = async () => {
 };
 
 const tabThroughParagraphBlock = async ( paragraphText ) => {
+	await tabThroughBlockToolbar();
+
 	await page.keyboard.press( 'Tab' );
 	await expect( await getActiveLabel() ).toBe( 'Block: Paragraph' );
 
@@ -30,7 +32,6 @@ const tabThroughParagraphBlock = async ( paragraphText ) => {
 	await expect( await getActiveLabel() ).toBe( 'Add block' );
 
 	await tabThroughBlockMoverControl();
-	await tabThroughBlockToolbar();
 
 	await page.keyboard.press( 'Tab' );
 	await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index dcbb360ee3cc1..34fc6fd96928d 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -104,6 +104,7 @@ function Layout() {
 					content={
 						<>
 							<EditorNotices />
+							<Popover.Slot name="block-toolbar" />
 							{ ( mode === 'text' || ! isRichEditingEnabled ) && <TextEditor /> }
 							{ isRichEditingEnabled && mode === 'visual' && <VisualEditor /> }
 							<div className="edit-post-layout__metaboxes">

From c8643aed47e53f771505a3dc9647e86b94aa6598 Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Fri, 20 Dec 2019 10:13:08 +0100
Subject: [PATCH 02/10] Movers in toolbar (same style as master)

---
 .../block-list/block-contextual-toolbar.js    |   4 +-
 .../src/components/block-list/block.js        |  33 +-----
 .../components/block-list/multi-controls.js   |  39 -------
 .../src/components/block-list/style.scss      | 101 ++----------------
 .../src/components/block-mover/index.js       |   6 +-
 .../src/components/block-mover/style.scss     |  95 ++++++----------
 .../src/components/block-toolbar/index.js     |  13 ++-
 .../block-library/src/columns/editor.scss     |   5 +-
 .../various/keyboard-navigable-blocks.test.js |   3 +-
 9 files changed, 59 insertions(+), 240 deletions(-)
 delete mode 100644 packages/block-editor/src/components/block-list/multi-controls.js

diff --git a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js
index a40c06b5f9fa4..9c6ccb22a7fbe 100644
--- a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js
+++ b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js
@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
 import NavigableToolbar from '../navigable-toolbar';
 import { BlockToolbar } from '../';
 
-function BlockContextualToolbar( { focusOnMount, ...props } ) {
+function BlockContextualToolbar( { focusOnMount, moverDirection, ...props } ) {
 	return (
 		<NavigableToolbar
 			focusOnMount={ focusOnMount }
@@ -18,7 +18,7 @@ function BlockContextualToolbar( { focusOnMount, ...props } ) {
 			aria-label={ __( 'Block tools' ) }
 			{ ...props }
 		>
-			<BlockToolbar />
+			<BlockToolbar moverDirection={ moverDirection } />
 		</NavigableToolbar>
 	);
 }
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index ea64e0102a573..2a843867c1354 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -36,7 +36,6 @@ import { compose, pure, ifCondition } from '@wordpress/compose';
  * Internal dependencies
  */
 import BlockEdit from '../block-edit';
-import BlockMover from '../block-mover';
 import BlockDropZone from '../block-drop-zone';
 import BlockInvalidWarning from './block-invalid-warning';
 import BlockCrashWarning from './block-crash-warning';
@@ -44,7 +43,6 @@ import BlockCrashBoundary from './block-crash-boundary';
 import BlockHtml from './block-html';
 import BlockBreadcrumb from './breadcrumb';
 import BlockContextualToolbar from './block-contextual-toolbar';
-import BlockMultiControls from './multi-controls';
 import BlockInsertionPoint from './insertion-point';
 import IgnoreNestedEvents from '../ignore-nested-events';
 import Inserter from '../inserter';
@@ -421,13 +419,6 @@ function BlockListBlock( {
 		! hasFixedToolbar &&
 		isHovered &&
 		! isEmptyDefaultBlock;
-	// We render block movers and block settings to keep them tabbale even if hidden
-	const shouldRenderMovers =
-		! isNavigationMode &&
-		isSelected &&
-		! showEmptyBlockSideInserter &&
-		! isPartOfMultiSelection &&
-		! isTypingWithinBlock;
 	const shouldShowBreadcrumb = isNavigationMode && isSelected;
 	const shouldShowContextualToolbar =
 		! isNavigationMode &&
@@ -479,13 +470,6 @@ function BlockListBlock( {
 		};
 	}
 	const blockElementId = `block-${ clientId }`;
-	const blockMover = (
-		<BlockMover
-			clientIds={ clientId }
-			isHidden={ ! isSelected }
-			__experimentalOrientation={ moverDirection }
-		/>
-	);
 
 	// We wrap the BlockEdit component in a div that hides it when editing in
 	// HTML mode. This allows us to render all of the ancillary pieces
@@ -522,7 +506,9 @@ function BlockListBlock( {
 			// If the toolbar is being shown because of being forced
 			// it should focus the toolbar right after the mount.
 			focusOnMount={ isForcingContextualToolbar.current }
+			data-type={ name }
 			data-align={ wrapperProps ? wrapperProps[ 'data-align' ] : undefined }
+			moverDirection={ moverDirection }
 		/>
 	);
 
@@ -564,19 +550,7 @@ function BlockListBlock( {
 				clientId={ clientId }
 				rootClientId={ rootClientId }
 			/> }
-			<div
-				className={ classnames(
-					'block-editor-block-list__block-edit',
-					{ 'has-mover-inside': moverDirection === 'horizontal' },
-				) }
-			>
-				{ isFirstMultiSelected && (
-					<BlockMultiControls
-						rootClientId={ rootClientId }
-						moverDirection={ moverDirection }
-					/>
-				) }
-				{ shouldRenderMovers && ( moverDirection === 'vertical' ) && blockMover }
+			<div className="block-editor-block-list__block-edit">
 				{ ( isCapturingDescendantToolbars ) && (
 					// A slot made available on all ancestors of the selected Block
 					// to allow child Blocks to render their toolbars into the DOM
@@ -642,7 +616,6 @@ function BlockListBlock( {
 						{ isValid && mode === 'html' && (
 							<BlockHtml clientId={ clientId } />
 						) }
-						{ shouldRenderMovers && ( moverDirection === 'horizontal' ) && blockMover }
 						{ ! isValid && [
 							<BlockInvalidWarning
 								key="invalid-warning"
diff --git a/packages/block-editor/src/components/block-list/multi-controls.js b/packages/block-editor/src/components/block-list/multi-controls.js
deleted file mode 100644
index 2f49ca2ca0a3b..0000000000000
--- a/packages/block-editor/src/components/block-list/multi-controls.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { withSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import BlockMover from '../block-mover';
-
-function BlockListMultiControls( {
-	multiSelectedBlockClientIds,
-	isSelecting,
-	moverDirection,
-} ) {
-	if ( isSelecting ) {
-		return null;
-	}
-
-	return (
-		<BlockMover
-			clientIds={ multiSelectedBlockClientIds }
-			__experimentalOrientation={ moverDirection }
-		/>
-	);
-}
-
-export default withSelect( ( select ) => {
-	const {
-		getMultiSelectedBlockClientIds,
-		isMultiSelecting,
-	} = select( 'core/block-editor' );
-	const clientIds = getMultiSelectedBlockClientIds();
-
-	return {
-		multiSelectedBlockClientIds: clientIds,
-		isSelecting: isMultiSelecting(),
-	};
-} )( BlockListMultiControls );
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index c27c8cd93163c..488854e6a7e44 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -99,9 +99,6 @@
 
 	.block-editor-block-list__block-edit {
 		position: relative;
-		&.has-mover-inside > [data-block] {
-			display: flex;
-		}
 
 		&::before {
 			z-index: z-index(".block-editor-block-list__block-edit::before");
@@ -553,81 +550,6 @@
 }
 
 
-/**
- * Mobile unified toolbar.
- */
-
-.block-editor-block-list__block {
-
-	// Show side UI inline below the block on mobile.
-	.block-editor-block-list__block-mobile-toolbar {
-		display: flex;
-		flex-direction: row;
-
-		// Make room for the height of the block toolbar above.
-		transform: translateY($block-padding + $border-width);
-		margin-top: $block-toolbar-height;
-		margin-right: -$block-padding;
-		margin-left: -$block-padding;
-		border-top: $border-width solid $light-gray-800;
-		height: $block-toolbar-height;
-
-		@include break-small() {
-			display: none;
-		}
-
-		// Add a white background to prevent the block's left border from showing through.
-		background-color: $white;
-
-		// Show a shadow below the selected block to imply separation.
-		box-shadow: $shadow-below-only;
-		@include break-small() {
-			box-shadow: none;
-		}
-
-		// Movers, inserter, trash, and ellipsis.
-		.block-editor-inserter {
-			position: relative;
-			left: auto;
-			top: auto;
-			margin: 0;
-		}
-
-		.block-editor-inserter__toggle,
-		.block-editor-block-mover__control {
-			width: $icon-button-size;
-			height: $icon-button-size;
-			border-radius: $radius-round-rectangle;
-			padding: 3px;
-			margin: 0;
-			justify-content: center;
-			align-items: center;
-
-			.dashicon {
-				margin: auto;
-			}
-		}
-
-		// Movers
-		.block-editor-block-mover {
-			display: flex;
-			margin-right: auto;
-
-			.block-editor-inserter,
-			.block-editor-block-mover__control {
-				float: left;
-			}
-		}
-	}
-
-	// Reset negative margins on mobile for full-width.
-	&[data-align="full"] .block-editor-block-list__block-mobile-toolbar {
-		margin-left: 0;
-		margin-right: 0;
-	}
-}
-
-
 /**
  * In-Canvas Inserter
  */
@@ -990,13 +912,6 @@
 		border: none;
 		box-shadow: none;
 		overflow-y: visible;
-		// Allow clicks through the wrapper for the block movers, which may be
-		// positioned next to the toolbar.
-		pointer-events: none;
-
-		> * {
-			pointer-events: all;
-		}
 
 		.block-editor-block-contextual-toolbar,
 		.block-editor-block-list__breadcrumb {
@@ -1004,16 +919,12 @@
 			margin-left: - $block-padding;
 		}
 
-		// Make space for the block movers. Ideally they should move within the
-		// toolbar.
-		.block-editor-block-contextual-toolbar {
-			&[data-align="wide"] {
-				margin-left: 86px;
-			}
-
-			&[data-align="full"] {
-				margin-left: 86 + 2 * $block-padding;
-			}
+		.block-editor-block-contextual-toolbar[data-align="full"] {
+			margin-left: 0;
 		}
 	}
+
+	.is-dragging-components-draggable & {
+		opacity: 0;
+	}
 }
diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index 3e5f4588f9c40..758e808e2b19e 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { IconButton } from '@wordpress/components';
+import { IconButton, Toolbar } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -86,7 +86,7 @@ export class BlockMover extends Component {
 		// to an unfocused state (body as active element) without firing blur on,
 		// the rendering parent, leaving it unable to react to focus out.
 		return (
-			<div className={ classnames( 'block-editor-block-mover', { 'is-visible': isFocused || ! isHidden, 'is-horizontal': orientation === 'horizontal' } ) }>
+			<Toolbar className={ classnames( 'block-editor-block-mover', { 'is-visible': isFocused || ! isHidden, 'is-horizontal': orientation === 'horizontal' } ) }>
 				<IconButton
 					className="block-editor-block-mover__control"
 					onClick={ isFirst ? null : onMoveUp }
@@ -154,7 +154,7 @@ export class BlockMover extends Component {
 						)
 					}
 				</span>
-			</div>
+			</Toolbar>
 		);
 	}
 }
diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index 27feba375d839..796557574d917 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -1,5 +1,10 @@
-.block-editor-block-mover {
-	@include break-small() {
+@include break-small() {
+	.block-editor-block-contextual-toolbar:not([data-align="wide"]):not([data-align="full"])
+	.block-editor-block-mover:not(.is-horizontal) {
+		display: block;
+		position: absolute;
+		top: $block-toolbar-height;
+		left: - $block-side-ui-width - 10;
 		opacity: 0;
 		background: $white;
 		border: 1px solid $dark-opacity-light-800;
@@ -11,32 +16,33 @@
 			@include edit-post__fade-in-animation;
 		}
 
-		&:hover {
-			box-shadow: $shadow-toolbar;
-		}
-
-		// 24px is the smallest size of a good pressable button.
-		// With 3 pieces of side UI, that comes to a total of 72px.
-		// To vertically center against a 56px paragraph, move upwards 72px - 56px / 2.
-		margin-top: -$grid-size;
-	}
-
-	&.is-horizontal {
-		margin-top: 5px; // The height of the appender is 36px. This pushes down the mover to be centered according to that.
-		margin-right: $grid-size;
-		padding-right: 0;
-		min-height: auto;
-		width: ($icon-button-size-small * 2) + ($border-width * 2);
-		height: $icon-button-size-small + ($border-width * 2);
-		display: flex;
-
 		.block-editor-block-mover__control {
-			width: $icon-button-size-small;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 0;
+			border: none;
+
+			// Carefully adjust the size of the side UI to fit one paragraph of text (56px).
+			width: $block-side-ui-width;
 			height: $icon-button-size-small;
 
 			svg {
-				width: $icon-button-size-small;
-				padding: 3px;
+				width: $block-side-ui-width;
+				height: $icon-button-size-small;
+				padding: #{ ($block-side-ui-width - $icon-button-size-small) / 2 } #{ ($block-side-ui-width - 18px) / 2 }; // This makes the SVG fill the whole available area, without scaling the artwork.
+			}
+
+			&[aria-disabled="true"] {
+				cursor: default;
+				pointer-events: none;
+				color: $dark-opacity-300;
+			}
+
+			color: $dark-opacity-300;
+
+			&:focus:not(:disabled) {
+				background-color: transparent;
 			}
 		}
 	}
@@ -50,47 +56,6 @@
 	}
 }
 
-// Mover icon buttons.
-.block-editor-block-mover__control {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-	padding: 0;
-	border: none;
-	box-shadow: none;
-
-	// Carefully adjust the size of the side UI to fit one paragraph of text (56px).
-	width: $block-side-ui-width;
-	height: $icon-button-size-small;
-
-	svg {
-		width: $block-side-ui-width;
-		height: $icon-button-size-small;
-		padding: #{ ($block-side-ui-width - $icon-button-size-small) / 2 } #{ ($block-side-ui-width - 18px) / 2 }; // This makes the SVG fill the whole available area, without scaling the artwork.
-	}
-
-	&[aria-disabled="true"] {
-		cursor: default;
-		pointer-events: none;
-		color: $dark-opacity-300;
-	}
-
-	@include break-small() {
-		color: $dark-opacity-300;
-
-		&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
-			background-color: transparent;
-			box-shadow: none;
-		}
-
-		&:focus:not(:disabled) {
-			background-color: transparent;
-		}
-	}
-
-}
-
 .block-editor-block-mover__control-drag-handle {
 	cursor: move; // Fallback for IE/Edge < 14
 	cursor: grab;
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 499d5ee9050d3..f468c91dabeb4 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -9,12 +9,12 @@ import { useSelect } from '@wordpress/data';
 
 import BlockControls from '../block-controls';
 import BlockFormatControls from '../block-format-controls';
-import BlockMobileToolbar from '../block-mobile-toolbar';
 import BlockSettingsMenu from '../block-settings-menu';
 import BlockSwitcher from '../block-switcher';
 import MultiBlocksSwitcher from '../block-switcher/multi-blocks-switcher';
+import BlockMover from '../block-mover';
 
-export default function BlockToolbar() {
+export default function BlockToolbar( { moverDirection } ) {
 	const { blockClientIds, isValid, mode } = useSelect( ( select ) => {
 		const {
 			getBlockMode,
@@ -41,6 +41,10 @@ export default function BlockToolbar() {
 	if ( blockClientIds.length > 1 ) {
 		return (
 			<div className="block-editor-block-toolbar">
+				<BlockMover
+					clientIds={ blockClientIds }
+					__experimentalOrientation={ moverDirection }
+				/>
 				<MultiBlocksSwitcher />
 				<BlockSettingsMenu clientIds={ blockClientIds } />
 			</div>
@@ -49,9 +53,12 @@ export default function BlockToolbar() {
 
 	return (
 		<div className="block-editor-block-toolbar">
+			<BlockMover
+				clientIds={ blockClientIds }
+				__experimentalOrientation={ moverDirection }
+			/>
 			{ mode === 'visual' && isValid && (
 				<>
-					{ blockClientIds.length === 1 && <BlockMobileToolbar clientId={ blockClientIds[ 0 ] } /> }
 					<BlockSwitcher clientIds={ blockClientIds } />
 					<BlockControls.Slot bubblesVirtually className="block-editor-block-toolbar__slot" />
 					<BlockFormatControls.Slot bubblesVirtually className="block-editor-block-toolbar__slot" />
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 612f6c5677450..e4d1a00429875 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -9,7 +9,10 @@
 	}
 }
 
-.components-popover .editor-block-contextual-toolbar[data-type="core/column"] {
+// Ideally all block toolbars should be positioned the same.
+.components-popover.block-editor-block-list__block-popover
+.components-popover__content
+.block-editor-block-contextual-toolbar[data-type="core/column"] {
 	margin-left: 0;
 }
 
diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
index 644a7b46f526e..4543f0efd374d 100644
--- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
@@ -23,6 +23,7 @@ const navigateToContentEditorTop = async () => {
 };
 
 const tabThroughParagraphBlock = async ( paragraphText ) => {
+	await tabThroughBlockMoverControl();
 	await tabThroughBlockToolbar();
 
 	await page.keyboard.press( 'Tab' );
@@ -31,8 +32,6 @@ const tabThroughParagraphBlock = async ( paragraphText ) => {
 	await page.keyboard.press( 'Tab' );
 	await expect( await getActiveLabel() ).toBe( 'Add block' );
 
-	await tabThroughBlockMoverControl();
-
 	await page.keyboard.press( 'Tab' );
 	await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
 	await expect( await page.evaluate( () =>

From ea8baaa97a56137ef73aaf4b8182b1b36028d728 Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Fri, 20 Dec 2019 13:55:31 +0100
Subject: [PATCH 03/10] Smooth repositioning on move

---
 .../src/components/block-list/block.js        |  2 +-
 packages/components/src/popover/index.js      | 40 +++++++++++++++++--
 packages/components/src/popover/style.scss    |  3 +-
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 2a843867c1354..5391efaeda9f6 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -566,7 +566,7 @@ function BlockListBlock( {
 						// To do: refactor `Popover` to make this prop clearer.
 						position="top right left"
 						focusOnMount={ false }
-						anchorRef={ blockNodeRef.current }
+						anchorRef={ wrapper.current }
 						className="block-editor-block-list__block-popover"
 						__unstableSticky={ isPartOfMultiSelection ? '.wp-block.is-multi-selected' : true }
 						__unstableSlotName="block-toolbar"
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index c619db0aa5988..e333055f5bd4b 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -254,7 +254,7 @@ const Popover = ( {
 			return;
 		}
 
-		const refresh = () => {
+		const refresh = ( { noSubpixels } = {} ) => {
 			const anchor = computeAnchorRect(
 				anchorRefFallback,
 				anchorRect,
@@ -280,11 +280,27 @@ const Popover = ( {
 				contentWidth,
 			} = computePopoverPosition( anchor, contentRect.current, position, __unstableSticky, anchorRef );
 
+			if ( typeof popoverTop === 'number' && typeof popoverLeft === 'number' ) {
+				// Translate clashes with animated popovers.
+				if ( animate ) {
+					setStyle( containerEl, 'top', popoverTop + 'px' );
+					setStyle( containerEl, 'left', popoverLeft + 'px' );
+				} else {
+					let x = popoverLeft;
+					let y = popoverTop;
+
+					if ( noSubpixels === true ) {
+						x = Math.round( x );
+						y = Math.round( y );
+					}
+
+					setStyle( containerEl, 'transform', `translate(${ x }px, ${ y }px)` );
+				}
+			}
+
 			setClass( containerEl, 'is-without-arrow', noArrow || ( xAxis === 'center' && yAxis === 'middle' ) );
 			setAttribute( containerEl, 'data-x-axis', xAxis );
 			setAttribute( containerEl, 'data-y-axis', yAxis );
-			setStyle( containerEl, 'top', typeof popoverTop === 'number' ? popoverTop + 'px' : '' );
-			setStyle( containerEl, 'left', typeof popoverLeft === 'number' ? popoverLeft + 'px' : '' );
 			setStyle( contentEl, 'maxHeight', typeof contentHeight === 'number' ? contentHeight + 'px' : '' );
 			setStyle( contentEl, 'maxWidth', typeof contentWidth === 'number' ? contentWidth + 'px' : '' );
 
@@ -309,6 +325,11 @@ const Popover = ( {
 			window.requestAnimationFrame( refresh );
 		};
 
+		// Scroll and attribute observation may render the popover on subpixels,
+		// which is good for a smooth transition, but at the end, it needs to
+		// rendered on pixels so the content is not blurry.
+		const intervalCallback = () => refresh( { noSubpixels: true } );
+
 		/*
 		 * There are sometimes we need to reposition or resize the popover that
 		 * are not handled by the resize/scroll window events (i.e. CSS changes
@@ -316,7 +337,7 @@ const Popover = ( {
 		 *
 		 * For these situations, we refresh the popover every 0.5s
 		 */
-		const intervalHandle = window.setInterval( refresh, 500 );
+		const intervalHandle = window.setInterval( intervalCallback, 500 );
 
 		// Sometimes a click trigger a layout change that affects the popover
 		// position. This is an opportunity to immediately refresh rather than
@@ -325,12 +346,23 @@ const Popover = ( {
 		window.addEventListener( 'resize', refresh );
 		window.addEventListener( 'scroll', refresh, true );
 
+		let observer;
+
+		if ( anchorRef && ! ( anchorRef instanceof window.Range ) ) {
+			observer = new window.MutationObserver( refresh );
+			observer.observe( anchorRef, { attributes: true } );
+		}
+
 		return () => {
 			window.clearTimeout( timeoutId );
 			window.clearInterval( intervalHandle );
 			window.removeEventListener( 'resize', refresh );
 			window.removeEventListener( 'scroll', refresh, true );
 			window.addEventListener( 'click', refreshOnAnimationFrame );
+
+			if ( observer ) {
+				observer.disconnect();
+			}
 		};
 	}, [
 		isExpanded,
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index f9b89cd371184..a077de513f4a0 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -4,7 +4,8 @@ $arrow-size: 8px;
 .components-popover {
 	position: fixed;
 	z-index: z-index(".components-popover");
-	left: 50%;
+	top: 0;
+	left: 0;
 
 	// Hide the popover element until the position has been calculated. The position
 	// cannot be calculated until the popover element is rendered because the

From 26220fa24aa41e29b1df62e66c08d361e42a8e45 Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Fri, 20 Dec 2019 15:06:43 +0100
Subject: [PATCH 04/10] Fix e2e test

---
 packages/e2e-test-utils/src/transform-block-to.js | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/e2e-test-utils/src/transform-block-to.js b/packages/e2e-test-utils/src/transform-block-to.js
index 5c105363ca74b..2bf0b5d559a35 100644
--- a/packages/e2e-test-utils/src/transform-block-to.js
+++ b/packages/e2e-test-utils/src/transform-block-to.js
@@ -1,20 +1,13 @@
-/**
- * Internal dependencies
- */
-import { pressKeyWithModifier } from './press-key-with-modifier';
-
 /**
  * Converts editor's block type.
  *
  * @param {string} name Block name.
  */
 export async function transformBlockTo( name ) {
-	// Transition to block toolbar by key combination.
-	await pressKeyWithModifier( 'alt', 'F10' );
-
-	// Press Enter in the focused toggle button.
-	const switcherToggle = await page.waitForSelector( '.block-editor-block-switcher__toggle:focus' );
-	await switcherToggle.press( 'Enter' );
+	await page.mouse.move( 0, 0 );
+	await page.mouse.move( 10, 10 );
+	const switcherToggle = await page.waitForSelector( '.block-editor-block-switcher__toggle' );
+	await switcherToggle.click();
 
 	// Find the block button option within the switcher popover.
 	const switcher = await page.$( '.block-editor-block-switcher__container' );

From 3dfb30d1d4b5f227707675493bc92b781e531cb5 Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Fri, 20 Dec 2019 15:27:34 +0100
Subject: [PATCH 05/10] Only translate for animation

---
 packages/components/src/popover/index.js | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index e333055f5bd4b..1c9e99832e808 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -281,20 +281,15 @@ const Popover = ( {
 			} = computePopoverPosition( anchor, contentRect.current, position, __unstableSticky, anchorRef );
 
 			if ( typeof popoverTop === 'number' && typeof popoverLeft === 'number' ) {
-				// Translate clashes with animated popovers.
-				if ( animate ) {
+				// Translate clashes with animated and arrow popovers.
+				if ( animate || ! noArrow || noSubpixels ) {
 					setStyle( containerEl, 'top', popoverTop + 'px' );
 					setStyle( containerEl, 'left', popoverLeft + 'px' );
+					setStyle( containerEl, 'transform' );
 				} else {
-					let x = popoverLeft;
-					let y = popoverTop;
-
-					if ( noSubpixels === true ) {
-						x = Math.round( x );
-						y = Math.round( y );
-					}
-
-					setStyle( containerEl, 'transform', `translate(${ x }px, ${ y }px)` );
+					setStyle( containerEl, 'top' );
+					setStyle( containerEl, 'left' );
+					setStyle( containerEl, 'transform', `translate(${ popoverLeft }px, ${ popoverTop }px)` );
 				}
 			}
 

From 494faa2712ae8cba5574974be48963ac217b9583 Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Mon, 23 Dec 2019 10:28:52 +0100
Subject: [PATCH 06/10] Address feedback

---
 packages/base-styles/_z-index.scss                         | 2 ++
 packages/block-editor/src/components/block-list/style.scss | 2 +-
 packages/block-editor/src/components/block-mover/index.js  | 6 +++---
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index fc8c72660ab3e..e3318841e57bc 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -82,6 +82,8 @@ $z-layers: (
 	// .edit-post-header { z-index: 30 }
 	".components-notice-list": 29,
 
+	// Above the block list, under the header.
+	".block-editor-block-list__block-popover": 29,
 
 	// Show snackbars above everything (similar to popovers)
 	".components-snackbar-list": 100000,
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 488854e6a7e44..98e3c5a737aad 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -903,7 +903,7 @@
 }
 
 .components-popover.block-editor-block-list__block-popover {
-	z-index: 29;
+	z-index: z-index(".block-editor-block-list__block-popover");
 
 	.components-popover__content {
 		margin-left: 0 !important;
diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index 758e808e2b19e..2b1185c182987 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { IconButton, Toolbar } from '@wordpress/components';
+import { IconButton, ToolbarGroup } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -86,7 +86,7 @@ export class BlockMover extends Component {
 		// to an unfocused state (body as active element) without firing blur on,
 		// the rendering parent, leaving it unable to react to focus out.
 		return (
-			<Toolbar className={ classnames( 'block-editor-block-mover', { 'is-visible': isFocused || ! isHidden, 'is-horizontal': orientation === 'horizontal' } ) }>
+			<ToolbarGroup className={ classnames( 'block-editor-block-mover', { 'is-visible': isFocused || ! isHidden, 'is-horizontal': orientation === 'horizontal' } ) }>
 				<IconButton
 					className="block-editor-block-mover__control"
 					onClick={ isFirst ? null : onMoveUp }
@@ -154,7 +154,7 @@ export class BlockMover extends Component {
 						)
 					}
 				</span>
-			</Toolbar>
+			</ToolbarGroup>
 		);
 	}
 }

From 2c345a5b5aac1382f60cd161993a6616da51a6bb Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Mon, 23 Dec 2019 13:56:53 +0100
Subject: [PATCH 07/10] Specify subpixel direction to work around Chrome bug

---
 .../src/components/block-list/block.js        |  3 ++
 packages/components/src/popover/index.js      | 35 +++++++++++--------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 5391efaeda9f6..b0f1e0c209c8a 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -570,6 +570,9 @@ function BlockListBlock( {
 						className="block-editor-block-list__block-popover"
 						__unstableSticky={ isPartOfMultiSelection ? '.wp-block.is-multi-selected' : true }
 						__unstableSlotName="block-toolbar"
+						// Allow subpixel positioning for the block movement animation.
+						__unstableAllowVerticalSubpixelPosition={ moverDirection !== 'horizontal' }
+						__unstableAllowHorizontalSubpixelPosition={ moverDirection === 'horizontal' }
 					>
 						{ ! hasAncestorCapturingToolbars && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && renderBlockContextualToolbar() }
 						{ hasAncestorCapturingToolbars && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && (
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index 1c9e99832e808..d80afde854e30 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -226,6 +226,8 @@ const Popover = ( {
 	onFocusOutside,
 	__unstableSticky,
 	__unstableSlotName = SLOT_NAME,
+	__unstableAllowVerticalSubpixelPosition,
+	__unstableAllowHorizontalSubpixelPosition,
 	/* eslint-enable no-unused-vars */
 	...contentProps
 } ) => {
@@ -254,7 +256,7 @@ const Popover = ( {
 			return;
 		}
 
-		const refresh = ( { noSubpixels } = {} ) => {
+		const refresh = ( { subpixels } = {} ) => {
 			const anchor = computeAnchorRect(
 				anchorRefFallback,
 				anchorRect,
@@ -281,15 +283,18 @@ const Popover = ( {
 			} = computePopoverPosition( anchor, contentRect.current, position, __unstableSticky, anchorRef );
 
 			if ( typeof popoverTop === 'number' && typeof popoverLeft === 'number' ) {
-				// Translate clashes with animated and arrow popovers.
-				if ( animate || ! noArrow || noSubpixels ) {
-					setStyle( containerEl, 'top', popoverTop + 'px' );
+				if ( subpixels && __unstableAllowVerticalSubpixelPosition ) {
 					setStyle( containerEl, 'left', popoverLeft + 'px' );
-					setStyle( containerEl, 'transform' );
-				} else {
 					setStyle( containerEl, 'top' );
+					setStyle( containerEl, 'transform', `translateY(${ popoverTop }px)` );
+				} else if ( subpixels && __unstableAllowHorizontalSubpixelPosition ) {
+					setStyle( containerEl, 'top', popoverTop + 'px' );
 					setStyle( containerEl, 'left' );
-					setStyle( containerEl, 'transform', `translate(${ popoverLeft }px, ${ popoverTop }px)` );
+					setStyle( containerEl, 'transform', `translate(${ popoverLeft }px)` );
+				} else {
+					setStyle( containerEl, 'top', popoverTop + 'px' );
+					setStyle( containerEl, 'left', popoverLeft + 'px' );
+					setStyle( containerEl, 'transform' );
 				}
 			}
 
@@ -320,11 +325,6 @@ const Popover = ( {
 			window.requestAnimationFrame( refresh );
 		};
 
-		// Scroll and attribute observation may render the popover on subpixels,
-		// which is good for a smooth transition, but at the end, it needs to
-		// rendered on pixels so the content is not blurry.
-		const intervalCallback = () => refresh( { noSubpixels: true } );
-
 		/*
 		 * There are sometimes we need to reposition or resize the popover that
 		 * are not handled by the resize/scroll window events (i.e. CSS changes
@@ -332,7 +332,7 @@ const Popover = ( {
 		 *
 		 * For these situations, we refresh the popover every 0.5s
 		 */
-		const intervalHandle = window.setInterval( intervalCallback, 500 );
+		const intervalHandle = window.setInterval( refresh, 500 );
 
 		// Sometimes a click trigger a layout change that affects the popover
 		// position. This is an opportunity to immediately refresh rather than
@@ -343,8 +343,11 @@ const Popover = ( {
 
 		let observer;
 
-		if ( anchorRef && ! ( anchorRef instanceof window.Range ) ) {
-			observer = new window.MutationObserver( refresh );
+		if ( anchorRef && (
+			__unstableAllowVerticalSubpixelPosition ||
+			__unstableAllowHorizontalSubpixelPosition
+		) ) {
+			observer = new window.MutationObserver( () => refresh( { subpixels: true } ) );
 			observer.observe( anchorRef, { attributes: true } );
 		}
 
@@ -367,6 +370,8 @@ const Popover = ( {
 		shouldAnchorIncludePadding,
 		position,
 		__unstableSticky,
+		__unstableAllowVerticalSubpixelPosition,
+		__unstableAllowHorizontalSubpixelPosition,
 	] );
 
 	useFocusContentOnMount( focusOnMount, contentRef );

From 3bd6f0781b3b2e8bc9972e2c09b67974dd26053b Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Mon, 23 Dec 2019 14:49:21 +0100
Subject: [PATCH 08/10] Remove dead CSS

---
 .../src/components/block-list/style.scss      | 301 ------------------
 1 file changed, 301 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 98e3c5a737aad..6e624c54de821 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -1,12 +1,3 @@
-.block-editor-block-list__layout .components-draggable__clone {
-	// Hide the Block UI when dragging the block.
-	// This ensures the page scroll properly (no sticky elements).
-	.block-editor-block-contextual-toolbar {
-		// It's probably okay to use !important here to avoid over-complicating the selector.
-		display: none !important;
-	}
-}
-
 .block-editor-block-list__layout .block-editor-block-list__block.is-selected { // Needs specificity to override inherited styles.
 	// While block is being dragged, dim the slot dragged from, and hide some UI.
 	&.is-dragging {
@@ -21,11 +12,6 @@
 		> .block-editor-block-list__block-edit > * > * {
 			visibility: hidden;
 		}
-
-		.block-editor-block-mover,
-		.block-editor-block-contextual-toolbar {
-			display: none;
-		}
 	}
 
 	> .block-editor-block-list__block-edit .reusable-block-edit-panel * {
@@ -190,12 +176,6 @@
 				box-shadow: 0 0 0 2px $blue-medium-focus-dark;
 			}
 		}
-		.block-editor-block-toolbar {
-			left: $border-width + $border-width + $block-padding;
-		}
-		.block-editor-block-mover {
-			margin-left: $block-padding;
-		}
 
 		// Provide exceptions for placeholders.
 		.components-placeholder {
@@ -323,30 +303,6 @@
 			// This margin won't collapse on its own, so zero it out.
 			margin-top: 0;
 		}
-
-		// Keep a 1px margin to compensate for the border/outline.
-		.block-editor-block-contextual-toolbar {
-			margin-bottom: $border-width;
-		}
-
-		// Position toolbar better on mobile.
-		.block-editor-block-contextual-toolbar {
-			width: auto;
-			border-bottom: $border-width solid $light-gray-800;
-			bottom: auto;
-
-			@include break-small() {
-				border-bottom: none;
-			}
-		}
-	}
-
-	// Position the sticky toolbar correctly beyond the mobile breakpoint.
-	@include break-small() {
-		&[data-align="right"] .block-editor-block-contextual-toolbar,
-		&[data-align="left"] .block-editor-block-contextual-toolbar {
-			top: $block-padding;
-		}
 	}
 
 	// Left.
@@ -358,16 +314,6 @@
 			margin-right: 2em;
 			/*!rtl:end:ignore*/
 		}
-
-		// Align block toolbar to floated content.
-		@include break-small() {
-			.block-editor-block-toolbar {
-				/*!rtl:begin:ignore*/
-				left: $block-padding;
-				right: auto;
-				/*!rtl:end:ignore*/
-			}
-		}
 	}
 
 	// Right.
@@ -379,80 +325,12 @@
 			margin-left: 2em;
 			/*!rtl:end:ignore*/
 		}
-
-		// Align block toolbar to floated content.
-		@include break-small() {
-			.block-editor-block-toolbar {
-				/*!rtl:begin:ignore*/
-				right: $block-padding;
-				left: auto;
-				/*!rtl:end:ignore*/
-			}
-		}
 	}
 
 	// Wide and full-wide.
 	&[data-align="full"],
 	&[data-align="wide"] {
 		clear: both;
-
-		// Without z-index, the block toolbar will be below an adjecent float
-		z-index: z-index(".block-editor-block-list__block {core/image aligned wide or fullwide}");
-
-		// Mover and settings above
-		&.is-multi-selected > .block-editor-block-mover,
-		> .block-editor-block-list__block-edit > .block-editor-block-mover {
-			// This moves the menu up by the height of the button + border + padding.
-			top: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - ( $border-width * 2 );
-			bottom: auto;
-			min-height: 0;
-			height: auto;
-			width: auto;
-
-			&::before {
-				content: none;
-			}
-		}
-
-		&.is-multi-selected > .block-editor-block-mover .block-editor-block-mover__control,
-		> .block-editor-block-list__block-edit > .block-editor-block-mover .block-editor-block-mover__control {
-			float: left;
-		}
-
-		// Beyond the mobile breakpoint, wide images stretch outside of the column.
-		// To center the toolbar, we make it inline-flex so the toolbar is not full-wide.
-		@include break-small () {
-			.block-editor-block-toolbar {
-				display: inline-flex;
-			}
-		}
-
-		// Align block toolbar to floated content.
-		// Extra specificity is needed to avoid applying this to innerblocks.
-		@include break-small() {
-			> .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
-				/*!rtl:begin:ignore*/
-				left: $block-side-ui-width * 3 + ($grid-size-small * 1.5);
-				/*!rtl:end:ignore*/
-			}
-		}
-
-		@include break-xlarge() {
-			> .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
-				/*!rtl:begin:ignore*/
-				left: $block-padding;
-				/*!rtl:end:ignore*/
-			}
-		}
-	}
-
-	// Wide.
-	&[data-align="wide"] {
-		// Position mover
-		&.is-multi-selected > .block-editor-block-mover,
-		> .block-editor-block-list__block-edit > .block-editor-block-mover {
-			left: -$block-padding + $border-width;
-		}
 	}
 
 	// Full-wide.
@@ -473,12 +351,6 @@
 			border-left-width: 0;
 			border-right-width: 0;
 		}
-
-		// Position mover.
-		&.is-multi-selected > .block-editor-block-mover,
-		> .block-editor-block-list__block-edit > .block-editor-block-mover {
-			left: $block-padding;
-		}
 	}
 
 	// Clear floats.
@@ -504,52 +376,6 @@
 	}
 }
 
-
-/**
- * Left and right side UI; Unified toolbar on Mobile.
- */
-
-.block-editor-block-list__block {
-
-	// Left and right block settings and mover.
-	&.is-multi-selected > .block-editor-block-mover,
-	> .block-editor-block-list__block-edit > .block-editor-block-mover {
-		position: absolute;
-		width: $block-side-ui-width + $block-side-ui-clearance;
-	}
-
-	// Position depending on whether selected or not.
-	&.is-multi-selected > .block-editor-block-mover,
-	> .block-editor-block-list__block-edit > .block-editor-block-mover {
-		top: -$block-padding - $border-width;
-	}
-
-	// Elevate when block is selected or hovered.
-	@include break-small() {
-		&.is-multi-selected,
-		&.is-selected,
-		&.is-hovered {
-			.block-editor-block-mover {
-				z-index: z-index(".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover");
-			}
-		}
-	}
-
-	// Left side UI.
-	> .block-editor-block-list__block-edit > .block-editor-block-mover,
-	&.is-multi-selected > .block-editor-block-mover {
-		// Position for top level blocks.
-		left: -$block-side-ui-width - $block-side-ui-clearance - $block-padding - $border-width - $grid-size;
-
-		// Hide on mobile, as mobile has a separate solution.
-		display: none;
-		@include break-small() {
-			display: block;
-		}
-	}
-}
-
-
 /**
  * In-Canvas Inserter
  */
@@ -677,133 +503,6 @@
 /**
  * Block Toolbar when contextual.
  */
-
-.block-editor-block-list__block {
-	.block-editor-block-contextual-toolbar {
-		z-index: z-index(".block-editor-block-contextual-toolbar");
-		white-space: nowrap;
-		text-align: left;
-		pointer-events: none;
-
-		// Paint the borders on the toolbar itself on mobile.
-		border-top: $border-width solid $light-gray-800;
-		.components-toolbar {
-			border-top: none;
-			border-bottom: none;
-		}
-
-		@include break-small() {
-			border-top: none;
-			.components-toolbar {
-				border-top: $border-width solid $light-gray-800;
-				border-bottom: $border-width solid $light-gray-800;
-			}
-		}
-	}
-
-	// Floated items have special needs for the contextual toolbar position + the thicker left border.
-	&[data-align="left"] .block-editor-block-contextual-toolbar,
-	&[data-align="right"] .block-editor-block-contextual-toolbar {
-		margin-bottom: $border-width;
-		margin-top: -$block-toolbar-height;
-
-		// Display the box-shadow on the parent element.
-		box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
-		.is-dark-theme & {
-			box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
-		}
-
-		@include break-small() {
-			box-shadow: none;
-		}
-
-		.block-editor-block-toolbar {
-			border-left: none;
-		}
-	}
-
-	// Make block toolbar full width on mobile.
-	.block-editor-block-contextual-toolbar {
-		margin-left: 0;
-		margin-right: 0;
-		@include break-small() {
-			margin-left: -$block-padding - $border-width;
-			margin-right: -$block-padding - $border-width;
-		}
-	}
-
-	// For floats, compensate for this so content doesn't grow smaller.
-	&[data-align="left"] .block-editor-block-contextual-toolbar {
-		/*rtl:ignore*/
-		margin-right: $block-padding + $border-width;
-	}
-
-	&[data-align="right"] .block-editor-block-contextual-toolbar {
-		/*rtl:ignore*/
-		margin-left: $block-padding + $border-width;
-	}
-
-	// Reset pointer-events on children.
-	.block-editor-block-contextual-toolbar > * {
-		pointer-events: auto;
-	}
-
-	// Full-aligned blocks have negative margins on the parent of the toolbar, so additional position adjustment is not required.
-	&[data-align="full"] .block-editor-block-contextual-toolbar {
-		left: 0;
-		right: 0;
-	}
-}
-
-// Enable toolbar footprint collapsing
-.block-editor-block-contextual-toolbar {
-	// Position the contextual toolbar above the block.
-	.block-editor-block-list__block & {
-		@include break-small() {
-			bottom: auto;
-			left: auto;
-			right: auto;
-			box-shadow: none;
-
-			// 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;
-			}
-		}
-	}
-
-	.block-editor-block-list__block[data-align="left"] & {
-		// RTL note: this rule should not be auto-flipped based on direction.
-		/*rtl:ignore*/
-		float: left;
-	}
-
-	.block-editor-block-list__block[data-align="right"] & {
-		// RTL note: this rule should not be auto-flipped based on direction.
-		/*rtl:ignore*/
-		float: right;
-
-		// IE11 moves the toolbar to the right because the parent container doesn't expand.
-		// A min-width mitigates this.
-		min-width: 200px;
-
-		// IE11 does not support `position: sticky`.
-		@supports (position: sticky) {
-			min-width: 0;
-		}
-	}
-
-	.block-editor-block-list__block[data-align="left"] &,
-	.block-editor-block-list__block[data-align="right"] & {
-		// Move the block toolbar out of the flow using translate, but less for floats.
-		transform: translateY(-$block-padding -$border-width);
-	}
-}
-
-// Position the block toolbar when contextual.
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
 	width: 100%;
 

From 9758221f6859c1d598c5139637cf88aa02642237 Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Mon, 23 Dec 2019 14:55:33 +0100
Subject: [PATCH 09/10] Polish alignment position

---
 packages/block-editor/src/components/block-list/block.js | 6 +++---
 packages/components/src/popover/index.js                 | 8 +++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index b0f1e0c209c8a..216cae25aec4a 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -566,13 +566,13 @@ function BlockListBlock( {
 						// To do: refactor `Popover` to make this prop clearer.
 						position="top right left"
 						focusOnMount={ false }
-						anchorRef={ wrapper.current }
+						anchorRef={ blockNodeRef.current }
 						className="block-editor-block-list__block-popover"
 						__unstableSticky={ isPartOfMultiSelection ? '.wp-block.is-multi-selected' : true }
 						__unstableSlotName="block-toolbar"
 						// Allow subpixel positioning for the block movement animation.
-						__unstableAllowVerticalSubpixelPosition={ moverDirection !== 'horizontal' }
-						__unstableAllowHorizontalSubpixelPosition={ moverDirection === 'horizontal' }
+						__unstableAllowVerticalSubpixelPosition={ moverDirection !== 'horizontal' && wrapper.current }
+						__unstableAllowHorizontalSubpixelPosition={ moverDirection === 'horizontal' && wrapper.current }
 					>
 						{ ! hasAncestorCapturingToolbars && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && renderBlockContextualToolbar() }
 						{ hasAncestorCapturingToolbars && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && (
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index d80afde854e30..438dd20c0d685 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -343,12 +343,14 @@ const Popover = ( {
 
 		let observer;
 
-		if ( anchorRef && (
+		const observeElement = (
 			__unstableAllowVerticalSubpixelPosition ||
 			__unstableAllowHorizontalSubpixelPosition
-		) ) {
+		);
+
+		if ( observeElement ) {
 			observer = new window.MutationObserver( () => refresh( { subpixels: true } ) );
-			observer.observe( anchorRef, { attributes: true } );
+			observer.observe( observeElement, { attributes: true } );
 		}
 
 		return () => {

From 9830ff9d2ec88217ee78abf036f8aa159440c33f Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Mon, 23 Dec 2019 15:53:53 +0100
Subject: [PATCH 10/10] Fix toolbar position for RTL

---
 packages/components/src/popover/utils.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/popover/utils.js b/packages/components/src/popover/utils.js
index 9d0c936c8bd1a..971ec4919d1c9 100644
--- a/packages/components/src/popover/utils.js
+++ b/packages/components/src/popover/utils.js
@@ -7,7 +7,6 @@ import { getScrollContainer } from '@wordpress/dom';
  * Module constants
  */
 const HEIGHT_OFFSET = 10; // used by the arrow and a bit of empty space
-const isRTL = () => document.documentElement.dir === 'rtl';
 
 /**
  * Utility used to compute the popover position over the xAxis
@@ -25,13 +24,21 @@ const isRTL = () => document.documentElement.dir === 'rtl';
  */
 export function computePopoverXAxisPosition( anchorRect, contentSize, xAxis, corner, sticky, chosenYAxis ) {
 	const { width } = contentSize;
+	const isRTL = document.documentElement.dir === 'rtl';
+
 	// Correct xAxis for RTL support
-	if ( xAxis === 'left' && isRTL() ) {
+	if ( xAxis === 'left' && isRTL ) {
 		xAxis = 'right';
-	} else if ( xAxis === 'right' && isRTL() ) {
+	} else if ( xAxis === 'right' && isRTL ) {
 		xAxis = 'left';
 	}
 
+	if ( corner === 'left' && isRTL ) {
+		corner = 'right';
+	} else if ( corner === 'right' && isRTL ) {
+		corner = 'left';
+	}
+
 	// x axis alignment choices
 	const anchorMidPoint = Math.round( anchorRect.left + ( anchorRect.width / 2 ) );
 	const centerAlignment = {