From ea2992f8bdfb5c4253cf2d9e9278cd9768234c7a Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 27 Aug 2020 18:11:27 +0800
Subject: [PATCH 01/23] Add drag handle to block mover component

---
 .../src/components/block-mover/index.js       | 53 +++++++++++++------
 .../src/components/block-mover/style.scss     | 15 +++++-
 .../src/components/block-toolbar/index.js     | 18 ++-----
 packages/icons/src/index.js                   |  1 +
 packages/icons/src/library/drag-handle.js     | 21 ++++++++
 5 files changed, 76 insertions(+), 32 deletions(-)
 create mode 100644 packages/icons/src/library/drag-handle.js

diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index 45fc5a6e816c6..f5165195a0153 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -7,7 +7,9 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
+
+import { dragHandle } from '@wordpress/icons';
+import { ToolbarGroup, ToolbarItem, Button } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
 import { useState } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
@@ -15,6 +17,7 @@ import { withSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+import BlockDraggable from '../block-draggable';
 import { BlockMoverUpButton, BlockMoverDownButton } from './button';
 
 function BlockMover( {
@@ -47,22 +50,42 @@ function BlockMover( {
 			} ) }
 		>
 			<ToolbarGroup>
-				<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
-					{ ( itemProps ) => (
-						<BlockMoverUpButton
-							clientIds={ clientIds }
-							{ ...itemProps }
-						/>
-					) }
-				</ToolbarItem>
-				<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
-					{ ( itemProps ) => (
-						<BlockMoverDownButton
-							clientIds={ clientIds }
-							{ ...itemProps }
+				<ToolbarGroup className="block-editor-block-mover__move-button-container">
+					<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
+						{ ( itemProps ) => (
+							<BlockMoverUpButton
+								clientIds={ clientIds }
+								{ ...itemProps }
+							/>
+						) }
+					</ToolbarItem>
+					<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
+						{ ( itemProps ) => (
+							<BlockMoverDownButton
+								clientIds={ clientIds }
+								{ ...itemProps }
+							/>
+						) }
+					</ToolbarItem>
+				</ToolbarGroup>
+				<BlockDraggable
+					clientIds={ clientIds }
+					cloneClassname="block-editor-block-mover__drag-clone"
+				>
+					{ ( { isDraggable, onDraggableStart, onDraggableEnd } ) => (
+						<Button
+							icon={ dragHandle }
+							className="block-editor-block-mover__drag-handle"
+							aria-hidden="true"
+							// Should not be able to tab to drag handle as this
+							// button can only be used with a pointer device.
+							tabIndex="-1"
+							onDragStart={ onDraggableStart }
+							onDragEnd={ onDraggableEnd }
+							draggable={ isDraggable }
 						/>
 					) }
-				</ToolbarItem>
+				</BlockDraggable>
 			</ToolbarGroup>
 		</div>
 	);
diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index 803943cd2de8b..ad2b20585b2f3 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -13,19 +13,20 @@
 
 // Show the mover in a single button under the contextual toolbar.
 .block-editor-block-mover {
-	.components-toolbar-group,
+	.block-editor-block-mover__move-button-container,
 	.components-toolbar {
 		flex: 1;
 
 		// Increase touch targets on mobile.
 		flex-direction: row;
+		border-right: none !important;
 
 		@include break-small() {
 			flex-direction: column;
 		}
 	}
 
-	&.is-horizontal .components-toolbar-group,
+	&.is-horizontal .block-editor-block-mover__move-button-container,
 	&.is-horizontal .components-toolbar {
 		flex-direction: row;
 	}
@@ -47,6 +48,16 @@
 		}
 	}
 
+	.block-editor-block-mover__drag-handle {
+		min-width: 32px !important;
+		width: 32px;
+		padding-right: 16px !important;
+
+		svg {
+			transform: rotate(90deg);
+		}
+	}
+
 	// Position the icons correctly.
 	@include break-small() {
 		.components-toolbar-group .block-editor-block-mover-button.is-up-button,
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 87274729ddf12..268cd835e5589 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -20,7 +20,6 @@ import BlockSwitcher from '../block-switcher';
 import BlockControls from '../block-controls';
 import BlockFormatControls from '../block-format-controls';
 import BlockSettingsMenu from '../block-settings-menu';
-import BlockDraggable from '../block-draggable';
 import { useShowMoversGestures } from './utils';
 import ExpandedBlockControlsContainer from './expanded-block-controls-container';
 
@@ -117,21 +116,10 @@ export default function BlockToolbar( {
 				) }
 			</div>
 			{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
-				<BlockDraggable
+				<BlockMover
 					clientIds={ blockClientIds }
-					cloneClassname="block-editor-block-toolbar__drag-clone"
-				>
-					{ ( { isDraggable, onDraggableStart, onDraggableEnd } ) => (
-						<div
-							className="block-editor-block-toolbar__drag-handle-area"
-							draggable={ isDraggable && ! hideDragHandle }
-							onDragStart={ onDraggableStart }
-							onDragEnd={ onDraggableEnd }
-						>
-							<BlockMover clientIds={ blockClientIds } />
-						</div>
-					) }
-				</BlockDraggable>
+					hideDragHandle={ ! hideDragHandle }
+				/>
 			) }
 			{ shouldShowVisualToolbar && (
 				<>
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index 30b12d689a688..820f90ca42d3d 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -49,6 +49,7 @@ export { default as currencyDollar } from './library/currency-dollar';
 export { default as currencyEuro } from './library/currency-euro';
 export { default as currencyPound } from './library/currency-pound';
 export { default as desktop } from './library/desktop';
+export { default as dragHandle } from './library/drag-handle';
 export { default as edit } from './library/edit';
 export { default as external } from './library/external';
 export { default as file } from './library/file';
diff --git a/packages/icons/src/library/drag-handle.js b/packages/icons/src/library/drag-handle.js
new file mode 100644
index 0000000000000..fad97339d7ad8
--- /dev/null
+++ b/packages/icons/src/library/drag-handle.js
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const dragHandle = (
+	<SVG
+		width="18"
+		height="18"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 18 18"
+	>
+		<Path
+			d="M13,8c0.6,0,1-0.4,1-1s-0.4-1-1-1s-1,0.4-1,1S12.4,8,13,8z M5,6C4.4,6,4,6.4,4,7s0.4,1,1,1s1-0.4,1-1S5.6,6,5,6z M5,10
+			c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S5.6,10,5,10z M13,10c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S13.6,10,13,10z M9,6
+			C8.4,6,8,6.4,8,7s0.4,1,1,1s1-0.4,1-1S9.6,6,9,6z M9,10c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S9.6,10,9,10z"
+		/>
+	</SVG>
+);
+
+export default dragHandle;

From b06e1904174eed32caa76e2a60878de9e22eadb1 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 27 Aug 2020 18:12:57 +0800
Subject: [PATCH 02/23] Switch draggable chip to reflect toolbar layout

---
 .../src/components/block-draggable/draggable-chip.js        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-draggable/draggable-chip.js b/packages/block-editor/src/components/block-draggable/draggable-chip.js
index 4deed6aaef7d0..f8890546c1b04 100644
--- a/packages/block-editor/src/components/block-draggable/draggable-chip.js
+++ b/packages/block-editor/src/components/block-draggable/draggable-chip.js
@@ -35,9 +35,6 @@ export default function BlockDraggableChip( { clientIds } ) {
 					justify="center"
 					className="block-editor-block-draggable-chip__content"
 				>
-					<FlexItem>
-						<BlockIcon icon={ handle } />
-					</FlexItem>
 					<FlexItem>
 						{ icon ? (
 							<BlockIcon icon={ icon } />
@@ -49,6 +46,9 @@ export default function BlockDraggableChip( { clientIds } ) {
 							)
 						) }
 					</FlexItem>
+					<FlexItem>
+						<BlockIcon icon={ handle } />
+					</FlexItem>
 				</Flex>
 			</div>
 		</div>

From f18474c15171fc1942149a9dcb907200a1022bed Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 27 Aug 2020 18:21:56 +0800
Subject: [PATCH 03/23] Use drag cursor

---
 packages/block-editor/src/components/block-mover/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index ad2b20585b2f3..854aaef891eec 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -52,6 +52,7 @@
 		min-width: 32px !important;
 		width: 32px;
 		padding-right: 16px !important;
+		cursor: grab;
 
 		svg {
 			transform: rotate(90deg);

From 540f16c2eac31227694f0c6f04de5f03aaa5f513 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 27 Aug 2020 18:28:08 +0800
Subject: [PATCH 04/23] Hide drag handle on mobile or in top toolbar mode

---
 .../src/components/block-mover/index.js       | 43 +++++++++++--------
 .../src/components/block-toolbar/index.js     |  2 +-
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index f5165195a0153..90a26e362ae4f 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -28,6 +28,7 @@ function BlockMover( {
 	isHidden,
 	rootClientId,
 	orientation,
+	hideDragHandle,
 } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 
@@ -68,24 +69,30 @@ function BlockMover( {
 						) }
 					</ToolbarItem>
 				</ToolbarGroup>
-				<BlockDraggable
-					clientIds={ clientIds }
-					cloneClassname="block-editor-block-mover__drag-clone"
-				>
-					{ ( { isDraggable, onDraggableStart, onDraggableEnd } ) => (
-						<Button
-							icon={ dragHandle }
-							className="block-editor-block-mover__drag-handle"
-							aria-hidden="true"
-							// Should not be able to tab to drag handle as this
-							// button can only be used with a pointer device.
-							tabIndex="-1"
-							onDragStart={ onDraggableStart }
-							onDragEnd={ onDraggableEnd }
-							draggable={ isDraggable }
-						/>
-					) }
-				</BlockDraggable>
+				{ ! hideDragHandle && (
+					<BlockDraggable
+						clientIds={ clientIds }
+						cloneClassname="block-editor-block-mover__drag-clone"
+					>
+						{ ( {
+							isDraggable,
+							onDraggableStart,
+							onDraggableEnd,
+						} ) => (
+							<Button
+								icon={ dragHandle }
+								className="block-editor-block-mover__drag-handle"
+								aria-hidden="true"
+								// Should not be able to tab to drag handle as this
+								// button can only be used with a pointer device.
+								tabIndex="-1"
+								onDragStart={ onDraggableStart }
+								onDragEnd={ onDraggableEnd }
+								draggable={ isDraggable }
+							/>
+						) }
+					</BlockDraggable>
+				) }
 			</ToolbarGroup>
 		</div>
 	);
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 268cd835e5589..dd89bb38520bf 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -118,7 +118,7 @@ export default function BlockToolbar( {
 			{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
 				<BlockMover
 					clientIds={ blockClientIds }
-					hideDragHandle={ ! hideDragHandle }
+					hideDragHandle={ hideDragHandle }
 				/>
 			) }
 			{ shouldShowVisualToolbar && (

From d17bfbbb1226cf97d7da5b37b0bca04188ee59e2 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 31 Aug 2020 11:42:06 +0200
Subject: [PATCH 05/23] Adjust handle and structure.

---
 .../src/components/block-mover/index.js       | 80 +++++++++----------
 .../src/components/block-mover/style.scss     | 10 +--
 .../src/components/block-toolbar/index.js     | 15 ++--
 .../components/src/toolbar-group/style.scss   |  3 +-
 4 files changed, 51 insertions(+), 57 deletions(-)

diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index 90a26e362ae4f..0c6417a9c02c5 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -50,49 +50,43 @@ function BlockMover( {
 				'is-horizontal': orientation === 'horizontal',
 			} ) }
 		>
-			<ToolbarGroup>
-				<ToolbarGroup className="block-editor-block-mover__move-button-container">
-					<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
-						{ ( itemProps ) => (
-							<BlockMoverUpButton
-								clientIds={ clientIds }
-								{ ...itemProps }
-							/>
-						) }
-					</ToolbarItem>
-					<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
-						{ ( itemProps ) => (
-							<BlockMoverDownButton
-								clientIds={ clientIds }
-								{ ...itemProps }
-							/>
-						) }
-					</ToolbarItem>
-				</ToolbarGroup>
-				{ ! hideDragHandle && (
-					<BlockDraggable
-						clientIds={ clientIds }
-						cloneClassname="block-editor-block-mover__drag-clone"
-					>
-						{ ( {
-							isDraggable,
-							onDraggableStart,
-							onDraggableEnd,
-						} ) => (
-							<Button
-								icon={ dragHandle }
-								className="block-editor-block-mover__drag-handle"
-								aria-hidden="true"
-								// Should not be able to tab to drag handle as this
-								// button can only be used with a pointer device.
-								tabIndex="-1"
-								onDragStart={ onDraggableStart }
-								onDragEnd={ onDraggableEnd }
-								draggable={ isDraggable }
-							/>
-						) }
-					</BlockDraggable>
-				) }
+			{ ! hideDragHandle && (
+				<BlockDraggable
+					clientIds={ clientIds }
+					cloneClassname="block-editor-block-mover__drag-clone"
+				>
+					{ ( { isDraggable, onDraggableStart, onDraggableEnd } ) => (
+						<Button
+							icon={ dragHandle }
+							className="block-editor-block-mover__drag-handle"
+							aria-hidden="true"
+							// Should not be able to tab to drag handle as this
+							// button can only be used with a pointer device.
+							tabIndex="-1"
+							onDragStart={ onDraggableStart }
+							onDragEnd={ onDraggableEnd }
+							draggable={ isDraggable }
+						/>
+					) }
+				</BlockDraggable>
+			) }
+			<ToolbarGroup className="block-editor-block-mover__move-button-container">
+				<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
+					{ ( itemProps ) => (
+						<BlockMoverUpButton
+							clientIds={ clientIds }
+							{ ...itemProps }
+						/>
+					) }
+				</ToolbarItem>
+				<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
+					{ ( itemProps ) => (
+						<BlockMoverDownButton
+							clientIds={ clientIds }
+							{ ...itemProps }
+						/>
+					) }
+				</ToolbarItem>
 			</ToolbarGroup>
 		</div>
 	);
diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index 854aaef891eec..f33bedfa98499 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -49,14 +49,12 @@
 	}
 
 	.block-editor-block-mover__drag-handle {
-		min-width: 32px !important;
-		width: 32px;
-		padding-right: 16px !important;
+		width: $button-size-small;
 		cursor: grab;
 
-		svg {
-			transform: rotate(90deg);
-		}
+		// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
+		min-width: $button-size-small !important;
+		padding: 0 !important;
 	}
 
 	// Position the icons correctly.
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index dd89bb38520bf..06929a56076c0 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -10,6 +10,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
+import { ToolbarGroup } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -112,15 +113,15 @@ export default function BlockToolbar( {
 					</div>
 				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
-					<BlockSwitcher clientIds={ blockClientIds } />
+					<ToolbarGroup className="block-editor-block-toolbar__block-controls">
+						<BlockSwitcher clientIds={ blockClientIds } />
+						<BlockMover
+							clientIds={ blockClientIds }
+							hideDragHandle={ hideDragHandle }
+						/>
+					</ToolbarGroup>
 				) }
 			</div>
-			{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
-				<BlockMover
-					clientIds={ blockClientIds }
-					hideDragHandle={ hideDragHandle }
-				/>
-			) }
 			{ shouldShowVisualToolbar && (
 				<>
 					<BlockControls.Slot
diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar-group/style.scss
index 08a3141f6b288..68602ba472629 100644
--- a/packages/components/src/toolbar-group/style.scss
+++ b/packages/components/src/toolbar-group/style.scss
@@ -6,7 +6,8 @@
 	flex-shrink: 0;
 	flex-wrap: wrap;
 
-	& & {
+	// Unset for nested toolbar groups. Increase specificity.
+	& .components-toolbar-group.components-toolbar-group {
 		border-width: 0;
 		margin: 0;
 	}

From 309a17e8894499946a581d041ac0e627c9620bec Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 31 Aug 2020 11:48:25 +0200
Subject: [PATCH 06/23] Size the switcher.

---
 .../src/components/block-toolbar/style.scss          | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 909d4bc57bae8..f3a9f1a87d0d3 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -44,6 +44,18 @@
 	}
 }
 
+// Block controls.
+.block-editor-block-toolbar__block-controls {
+	// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
+
+	// Switcher.
+	.block-editor-block-switcher .components-dropdown-menu__toggle {
+		min-width: $button-size !important;
+		padding-left: $grid-unit-10 !important;
+		padding-right: $grid-unit-05 !important;
+	}
+}
+
 .block-editor-block-toolbar,
 .block-editor-format-toolbar {
 	// Override Toolbar buttons size.

From 4f50824713e6f5e0154709d4bd4c9c60f77c2b12 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 31 Aug 2020 11:52:02 +0200
Subject: [PATCH 07/23] Adjust mover.

---
 packages/block-editor/src/components/block-mover/style.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index f33bedfa98499..9a89efdb8d8f5 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -35,7 +35,10 @@
 		@include break-small() {
 			padding: 0 !important;
 			height: $block-toolbar-height/2;
-			width: $block-toolbar-height;
+			width: $button-size;
+
+			// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
+			min-width: $button-size !important;
 		}
 
 		// Focus style.

From 9f11bb9b4c54c79fbc3b3995dd0355786a3a35a6 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 31 Aug 2020 11:55:21 +0200
Subject: [PATCH 08/23] Update icon for handle.

---
 packages/icons/src/library/drag-handle.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/icons/src/library/drag-handle.js b/packages/icons/src/library/drag-handle.js
index fad97339d7ad8..538b43456ba13 100644
--- a/packages/icons/src/library/drag-handle.js
+++ b/packages/icons/src/library/drag-handle.js
@@ -10,11 +10,7 @@ const dragHandle = (
 		xmlns="http://www.w3.org/2000/svg"
 		viewBox="0 0 18 18"
 	>
-		<Path
-			d="M13,8c0.6,0,1-0.4,1-1s-0.4-1-1-1s-1,0.4-1,1S12.4,8,13,8z M5,6C4.4,6,4,6.4,4,7s0.4,1,1,1s1-0.4,1-1S5.6,6,5,6z M5,10
-			c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S5.6,10,5,10z M13,10c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S13.6,10,13,10z M9,6
-			C8.4,6,8,6.4,8,7s0.4,1,1,1s1-0.4,1-1S9.6,6,9,6z M9,10c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S9.6,10,9,10z"
-		/>
+		<Path d="M4 4h2V2H4v2zm8-2v2h2V2h-2zm-8 8h2V8H4v2zm8 0h2V8h-2v2zm-8 6h2v-2H4v2zm8 0h2v-2h-2v2z" />
 	</SVG>
 );
 

From 7c13e48a70573539a7b2973bdbb2b9e3a7143c75 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 31 Aug 2020 12:04:26 +0200
Subject: [PATCH 09/23] Update movers buttons.

---
 packages/block-editor/src/components/block-list/style.scss | 4 ++--
 packages/icons/src/library/chevron-down.js                 | 2 +-
 packages/icons/src/library/chevron-up.js                   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index aa56a44e84ccd..a320d1b72abbc 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -544,11 +544,11 @@
 	.block-editor-block-mover:not(.is-horizontal) {
 		.block-editor-block-mover-button {
 			&.is-up-button svg {
-				margin-top: 3px;
+				margin-top: 1px;
 			}
 
 			&.is-down-button svg {
-				margin-bottom: 3px;
+				margin-bottom: 1px;
 			}
 
 			&:focus::before {
diff --git a/packages/icons/src/library/chevron-down.js b/packages/icons/src/library/chevron-down.js
index 9f490ee61edff..6e1436d2e7fd9 100644
--- a/packages/icons/src/library/chevron-down.js
+++ b/packages/icons/src/library/chevron-down.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const chevronDown = (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z" />
+		<Path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/chevron-up.js b/packages/icons/src/library/chevron-up.js
index de4075c439426..4a51856f4f892 100644
--- a/packages/icons/src/library/chevron-up.js
+++ b/packages/icons/src/library/chevron-up.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const chevronUp = (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M12 8l-6 5.4 1 1.2 5-4.6 5 4.6 1-1.2z" />
+		<Path d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z" />
 	</SVG>
 );
 

From 29d9031340c33beca0e3c9f0500765fbde92dbb7 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 31 Aug 2020 12:10:16 +0200
Subject: [PATCH 10/23] Fix groups.

---
 .../block-editor/src/components/block-toolbar/style.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index f3a9f1a87d0d3..aa79a22823827 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -49,10 +49,17 @@
 	// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
 
 	// Switcher.
-	.block-editor-block-switcher .components-dropdown-menu__toggle {
+	.block-editor-block-switcher .components-dropdown-menu__toggle,
+	.block-editor-block-switcher__no-switcher-icon {
 		min-width: $button-size !important;
+		width: $button-size !important;
 		padding-left: $grid-unit-10 !important;
 		padding-right: $grid-unit-05 !important;
+
+		.block-editor-block-icon {
+			width: $button-size-small !important;
+			margin: 0 !important;
+		}
 	}
 }
 

From 7b4556ef15fbc5cba9dcf446f5a2844cd001cd46 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 31 Aug 2020 12:17:12 +0200
Subject: [PATCH 11/23] Focus for switcher.

---
 .../block-editor/src/components/block-toolbar/style.scss     | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index aa79a22823827..b761d74c108be 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -60,6 +60,11 @@
 			width: $button-size-small !important;
 			margin: 0 !important;
 		}
+
+		&:focus::before {
+			left: $grid-unit-05 !important;
+			right: 0 !important;
+		}
 	}
 }
 

From 126bac1a3f5cf1d15396168a6ebbfde16947257f Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 31 Aug 2020 12:19:48 +0200
Subject: [PATCH 12/23] Handle focus.

---
 packages/block-editor/src/components/block-mover/style.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index 9a89efdb8d8f5..3b805085f490b 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -58,6 +58,11 @@
 		// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
 		min-width: $button-size-small !important;
 		padding: 0 !important;
+
+		&:focus::before {
+			left: 0 !important;
+			right: 0 !important;
+		}
 	}
 
 	// Position the icons correctly.

From a45789d67ede80c2938746b35d14a117d6446f84 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 31 Aug 2020 12:22:09 +0200
Subject: [PATCH 13/23] Fix top toolbar.

---
 packages/block-editor/src/components/block-toolbar/style.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index b761d74c108be..ec8a449afe201 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -47,6 +47,8 @@
 // Block controls.
 .block-editor-block-toolbar__block-controls {
 	// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
+	height: auto !important;
+	padding: 0 !important;
 
 	// Switcher.
 	.block-editor-block-switcher .components-dropdown-menu__toggle,

From 273e151d3b0193575a558dac3671b074757ffe7a Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 31 Aug 2020 13:00:07 +0200
Subject: [PATCH 14/23] Popover fix.

---
 .../block-editor/src/components/block-switcher/style.scss    | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
index ca48ac5fe687d..f98e9300a8037 100644
--- a/packages/block-editor/src/components/block-switcher/style.scss
+++ b/packages/block-editor/src/components/block-switcher/style.scss
@@ -20,6 +20,11 @@
 	}
 }
 
+// Indent the popover to match the button position.
+.block-editor-block-switcher__popover {
+	margin-left: 6px;
+}
+
 .components-button.block-editor-block-switcher__no-switcher-icon {
 	width: $block-toolbar-height;
 

From 5730bc8fb30e197a20e38553d4f81551c5408f8d Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 31 Aug 2020 13:39:30 +0200
Subject: [PATCH 15/23] Fix spacing issue.

---
 packages/block-editor/src/components/block-list/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index a320d1b72abbc..220a43d121a10 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -544,11 +544,11 @@
 	.block-editor-block-mover:not(.is-horizontal) {
 		.block-editor-block-mover-button {
 			&.is-up-button svg {
-				margin-top: 1px;
+				margin-top: 2px;
 			}
 
 			&.is-down-button svg {
-				margin-bottom: 1px;
+				margin-bottom: 3px;
 			}
 
 			&:focus::before {

From 3b6cc73527ef624f60bc99d09cfa854d2389e4c6 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 31 Aug 2020 14:06:15 +0200
Subject: [PATCH 16/23] Harmonize spacing.

---
 .../src/components/block-mover/style.scss             | 10 +++++-----
 .../src/components/block-toolbar/style.scss           | 11 +++++------
 packages/icons/src/library/drag-handle.js             |  2 +-
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index 3b805085f490b..c68c4a72ddc6b 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -33,12 +33,12 @@
 
 	.block-editor-block-mover-button {
 		@include break-small() {
-			padding: 0 !important;
-			height: $block-toolbar-height/2;
-			width: $button-size;
-
 			// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
-			min-width: $button-size !important;
+			height: $block-toolbar-height/2;
+			width: $block-toolbar-height - $grid-unit-15 / 2;
+			padding-right: $grid-unit-15 - $border-width !important;
+			padding-left: $grid-unit-15 / 2 !important;
+			min-width: $block-toolbar-height - $grid-unit-15 / 2 !important;
 		}
 
 		// Focus style.
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index ec8a449afe201..56515e81e684e 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -53,10 +53,10 @@
 	// Switcher.
 	.block-editor-block-switcher .components-dropdown-menu__toggle,
 	.block-editor-block-switcher__no-switcher-icon {
-		min-width: $button-size !important;
-		width: $button-size !important;
-		padding-left: $grid-unit-10 !important;
-		padding-right: $grid-unit-05 !important;
+		min-width: $block-toolbar-height - $grid-unit-15 / 2 !important;
+		width: $block-toolbar-height - $grid-unit-15 / 2 !important;
+		padding-left: $grid-unit-15 - $border-width !important;
+		padding-right: $grid-unit-15 / 2 !important;
 
 		.block-editor-block-icon {
 			width: $button-size-small !important;
@@ -64,8 +64,7 @@
 		}
 
 		&:focus::before {
-			left: $grid-unit-05 !important;
-			right: 0 !important;
+			right: $grid-unit-05 !important;
 		}
 	}
 }
diff --git a/packages/icons/src/library/drag-handle.js b/packages/icons/src/library/drag-handle.js
index 538b43456ba13..d67765bbd2c44 100644
--- a/packages/icons/src/library/drag-handle.js
+++ b/packages/icons/src/library/drag-handle.js
@@ -10,7 +10,7 @@ const dragHandle = (
 		xmlns="http://www.w3.org/2000/svg"
 		viewBox="0 0 18 18"
 	>
-		<Path d="M4 4h2V2H4v2zm8-2v2h2V2h-2zm-8 8h2V8H4v2zm8 0h2V8h-2v2zm-8 6h2v-2H4v2zm8 0h2v-2h-2v2z" />
+		<Path d="M5 4h2V2H5v2zm6-2v2h2V2h-2zm-6 8h2V8H5v2zm6 0h2V8h-2v2zm-6 6h2v-2H5v2zm6 0h2v-2h-2v2z" />
 	</SVG>
 );
 

From 6a2d989bc09270a0bd1641628f860a03fc0124b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Mon, 31 Aug 2020 14:20:47 +0200
Subject: [PATCH 17/23] Try small independen transition for up / down.

---
 .../src/components/block-list/style.scss      | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 220a43d121a10..c6b9d130448ba 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -543,12 +543,30 @@
 
 	.block-editor-block-mover:not(.is-horizontal) {
 		.block-editor-block-mover-button {
-			&.is-up-button svg {
-				margin-top: 2px;
+			&.is-up-button {
+				svg {
+					margin-top: 2px;
+					transition: ease-in-out transform 0.1s;
+				}
+				&:focus,
+				&:hover {
+					svg {
+						transform: translateY(-2px);
+					}
+				}
 			}
 
-			&.is-down-button svg {
-				margin-bottom: 3px;
+			&.is-down-button {
+				svg {
+					margin-bottom: 3px;
+					transition: ease-in-out transform 0.1s;
+				}
+				&:focus,
+				&:hover {
+					svg {
+						transform: translateY(2px);
+					}
+				}
 			}
 
 			&:focus::before {

From 1a9656e1b317d84051be3f1b84220148f79d7908 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 31 Aug 2020 14:33:48 +0200
Subject: [PATCH 18/23] Reduce motion.

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

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index c6b9d130448ba..5e6411d09a80b 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -547,6 +547,7 @@
 				svg {
 					margin-top: 2px;
 					transition: ease-in-out transform 0.1s;
+					@include reduce-motion("transition");
 				}
 				&:focus,
 				&:hover {
@@ -560,6 +561,7 @@
 				svg {
 					margin-bottom: 3px;
 					transition: ease-in-out transform 0.1s;
+					@include reduce-motion("transition");
 				}
 				&:focus,
 				&:hover {

From 8c26ad6539d94f97f99ed579756a10608c970088 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Tue, 1 Sep 2020 12:33:19 +0800
Subject: [PATCH 19/23] use dragHandle icon in draggable chip

---
 .../src/components/block-draggable/draggable-chip.js         | 4 ++--
 .../block-editor/src/components/block-draggable/style.scss   | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-draggable/draggable-chip.js b/packages/block-editor/src/components/block-draggable/draggable-chip.js
index f8890546c1b04..4cce7db9d0802 100644
--- a/packages/block-editor/src/components/block-draggable/draggable-chip.js
+++ b/packages/block-editor/src/components/block-draggable/draggable-chip.js
@@ -5,7 +5,7 @@ import { _n, sprintf } from '@wordpress/i18n';
 import { getBlockType } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { Flex, FlexItem } from '@wordpress/components';
-import { handle } from '@wordpress/icons';
+import { dragHandle } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -47,7 +47,7 @@ export default function BlockDraggableChip( { clientIds } ) {
 						) }
 					</FlexItem>
 					<FlexItem>
-						<BlockIcon icon={ handle } />
+						<BlockIcon icon={ dragHandle } />
 					</FlexItem>
 				</Flex>
 			</div>
diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss
index 18a59e43beeb1..38589f784cf60 100644
--- a/packages/block-editor/src/components/block-draggable/style.scss
+++ b/packages/block-editor/src/components/block-draggable/style.scss
@@ -1,9 +1,8 @@
 .block-editor-block-draggable-chip-wrapper {
 	position: absolute;
-	// Offset position by half the height of the draggable chip
-	// so that the cursor is centered over the left part of the chip.
+	// Offset position so that cursor is centered over the drag handle.
 	top: -#{$block-toolbar-height / 2};
-	left: -#{$block-toolbar-height / 2};
+	left: -#{$button-size * 1.5};
 }
 
 .block-editor-block-draggable-chip {

From d031006bfd4c3e406964f8736c08548fd04f2d6c Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Tue, 1 Sep 2020 15:31:06 +0800
Subject: [PATCH 20/23] Make draggable chip use same icon as toolbar

---
 .../block-draggable/draggable-chip.js         | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/components/block-draggable/draggable-chip.js b/packages/block-editor/src/components/block-draggable/draggable-chip.js
index 4cce7db9d0802..4c513fdc7acdf 100644
--- a/packages/block-editor/src/components/block-draggable/draggable-chip.js
+++ b/packages/block-editor/src/components/block-draggable/draggable-chip.js
@@ -1,11 +1,15 @@
+/**
+ * External dependencies
+ */
+import { uniq } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { _n, sprintf } from '@wordpress/i18n';
 import { getBlockType } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { Flex, FlexItem } from '@wordpress/components';
-import { dragHandle } from '@wordpress/icons';
+import { dragHandle, stack } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -15,11 +19,17 @@ import BlockIcon from '../block-icon';
 export default function BlockDraggableChip( { clientIds } ) {
 	const icon = useSelect(
 		( select ) => {
+			const { getBlockName } = select( 'core/block-editor' );
+
 			if ( clientIds.length !== 1 ) {
-				return;
+				const blockNames = clientIds.map( getBlockName );
+				const isSameType = uniq( blockNames ).length === 1;
+
+				if ( ! isSameType ) {
+					return stack;
+				}
 			}
 
-			const { getBlockName } = select( 'core/block-editor' );
 			const [ firstId ] = clientIds;
 			const blockName = getBlockName( firstId );
 
@@ -36,15 +46,7 @@ export default function BlockDraggableChip( { clientIds } ) {
 					className="block-editor-block-draggable-chip__content"
 				>
 					<FlexItem>
-						{ icon ? (
-							<BlockIcon icon={ icon } />
-						) : (
-							sprintf(
-								/* translators: %d: Number of blocks. */
-								_n( '%d block', '%d blocks', clientIds.length ),
-								clientIds.length
-							)
-						) }
+						<BlockIcon icon={ icon } />
 					</FlexItem>
 					<FlexItem>
 						<BlockIcon icon={ dragHandle } />

From 9a0fc737186ffba51e023b35dd300e8e633126f4 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 2 Sep 2020 09:14:56 +0800
Subject: [PATCH 21/23] Revert "Make draggable chip use same icon as toolbar"

This reverts commit d031006bfd4c3e406964f8736c08548fd04f2d6c.
---
 .../block-draggable/draggable-chip.js         | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/components/block-draggable/draggable-chip.js b/packages/block-editor/src/components/block-draggable/draggable-chip.js
index 4c513fdc7acdf..4cce7db9d0802 100644
--- a/packages/block-editor/src/components/block-draggable/draggable-chip.js
+++ b/packages/block-editor/src/components/block-draggable/draggable-chip.js
@@ -1,15 +1,11 @@
-/**
- * External dependencies
- */
-import { uniq } from 'lodash';
-
 /**
  * WordPress dependencies
  */
+import { _n, sprintf } from '@wordpress/i18n';
 import { getBlockType } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { Flex, FlexItem } from '@wordpress/components';
-import { dragHandle, stack } from '@wordpress/icons';
+import { dragHandle } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -19,17 +15,11 @@ import BlockIcon from '../block-icon';
 export default function BlockDraggableChip( { clientIds } ) {
 	const icon = useSelect(
 		( select ) => {
-			const { getBlockName } = select( 'core/block-editor' );
-
 			if ( clientIds.length !== 1 ) {
-				const blockNames = clientIds.map( getBlockName );
-				const isSameType = uniq( blockNames ).length === 1;
-
-				if ( ! isSameType ) {
-					return stack;
-				}
+				return;
 			}
 
+			const { getBlockName } = select( 'core/block-editor' );
 			const [ firstId ] = clientIds;
 			const blockName = getBlockName( firstId );
 
@@ -46,7 +36,15 @@ export default function BlockDraggableChip( { clientIds } ) {
 					className="block-editor-block-draggable-chip__content"
 				>
 					<FlexItem>
-						<BlockIcon icon={ icon } />
+						{ icon ? (
+							<BlockIcon icon={ icon } />
+						) : (
+							sprintf(
+								/* translators: %d: Number of blocks. */
+								_n( '%d block', '%d blocks', clientIds.length ),
+								clientIds.length
+							)
+						) }
 					</FlexItem>
 					<FlexItem>
 						<BlockIcon icon={ dragHandle } />

From e9ea6f69d39258eb8e192570dc8f963eecac2ed9 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 2 Sep 2020 09:24:19 +0800
Subject: [PATCH 22/23] Revert offset change and ensure cursor does not overlap
 chip block info

---
 packages/block-editor/src/components/block-draggable/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss
index 38589f784cf60..437ed65a936a8 100644
--- a/packages/block-editor/src/components/block-draggable/style.scss
+++ b/packages/block-editor/src/components/block-draggable/style.scss
@@ -2,7 +2,7 @@
 	position: absolute;
 	// Offset position so that cursor is centered over the drag handle.
 	top: -#{$block-toolbar-height / 2};
-	left: -#{$button-size * 1.5};
+	left: 0;
 }
 
 .block-editor-block-draggable-chip {

From d434695e1c9587f8817a9d789d39f07562aa0607 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 2 Sep 2020 09:40:02 +0800
Subject: [PATCH 23/23] Update snapshots to reflect chevron icon change

---
 .../test/__snapshots__/index.js.snap                 |  2 +-
 .../url-popover/test/__snapshots__/index.js.snap     |  4 ++--
 .../color-picker/test/__snapshots__/index.js.snap    | 12 ++++++------
 .../test/__snapshots__/index.js.snap                 |  2 +-
 .../test/__snapshots__/index.js.snap                 |  3 ++-
 5 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
index f7952517ad626..f59725173e5e0 100644
--- a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><div class=\\"components-flex components-select-control e1cr7zh10 css-sbt0p2-Flex-Root eboqfv50\\"><div class=\\"components-flex__item e1cr7zh14 css-d373l0-Item-LabelWrapper eboqfv51\\"><label for=\\"inspector-select-control-0\\" class=\\"components-input-control__label css-7tv4lf-Text-BaseLabel e1cr7zh13\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label></div><div class=\\"components-input-control__container css-99mm9s-Container e1cr7zh11\\"><select class=\\"components-select-control__input css-hwcz8s-Select e12x0a390\\" id=\\"inspector-select-control-0\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select><span class=\\"components-input-control__suffix css-1lym30p-Suffix e1cr7zh19\\"><div class=\\"css-s55r1c-DownArrowWrapper e12x0a391\\"><svg viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z\\"></path></svg></div></span><fieldset aria-hidden=\\"true\\" class=\\"components-input-control__backdrop css-15qcvxb-Fieldset e1cr7zh15\\"></fieldset></div></div></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
+exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><div class=\\"components-flex components-select-control e1cr7zh10 css-sbt0p2-Flex-Root eboqfv50\\"><div class=\\"components-flex__item e1cr7zh14 css-d373l0-Item-LabelWrapper eboqfv51\\"><label for=\\"inspector-select-control-0\\" class=\\"components-input-control__label css-7tv4lf-Text-BaseLabel e1cr7zh13\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label></div><div class=\\"components-input-control__container css-99mm9s-Container e1cr7zh11\\"><select class=\\"components-select-control__input css-hwcz8s-Select e12x0a390\\" id=\\"inspector-select-control-0\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select><span class=\\"components-input-control__suffix css-1lym30p-Suffix e1cr7zh19\\"><div class=\\"css-s55r1c-DownArrowWrapper e12x0a391\\"><svg viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z\\"></path></svg></div></span><fieldset aria-hidden=\\"true\\" class=\\"components-input-control__backdrop css-15qcvxb-Fieldset e1cr7zh15\\"></fieldset></div></div></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
diff --git a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
index f9a9d1725a36c..e6a7a3231c5a9 100644
--- a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
@@ -24,7 +24,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <Path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </SVG>
         }
@@ -60,7 +60,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
             xmlns="http://www.w3.org/2000/svg"
           >
             <Path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </SVG>
         }
diff --git a/packages/components/src/color-picker/test/__snapshots__/index.js.snap b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
index ee3e5fc66b2a3..d704f3cd77172 100644
--- a/packages/components/src/color-picker/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
@@ -164,7 +164,7 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </svg>
         </button>
@@ -338,7 +338,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] =
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </svg>
         </button>
@@ -512,7 +512,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] =
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </svg>
         </button>
@@ -686,7 +686,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </svg>
         </button>
@@ -860,7 +860,7 @@ exports[`ColorPicker should only update input view for draft changes 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </svg>
         </button>
@@ -1034,7 +1034,7 @@ exports[`ColorPicker should render color picker 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
             />
           </svg>
         </button>
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
index aafa7c918f179..a6062e7af7b6b 100644
--- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M12 8l-6 5.4 1 1.2 5-4.6 5 4.6 1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
+exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
index 6087ec62497e5..b14bc1c0458d2 100644
--- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
@@ -1,3 +1,4 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M12 8l-6 5.4 1 1.2 5-4.6 5 4.6 1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
+exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
+q