Adds drag handle to block selection button in navigation mode

packages/block-editor/src/components/block-list/block-selection-button.js

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { dragHandle } from '@wordpress/icons';
 import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
@@ -27,11 +28,13 @@ import {
 } from '@wordpress/blocks';
 import { speak } from '@wordpress/a11y';
 import { focus } from '@wordpress/dom';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import BlockTitle from '../block-title';
+import BlockDraggable from '../block-draggable';
 
 /**
  * Returns true if the user is using windows.
@@ -257,13 +260,33 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 		}
 	);
 
+	const dragHandleLabel = __( 'Drag' );
+
 	return (
 		<div className={ classNames }>
+			<BlockDraggable
+				clientIds={ [ clientId ] }
+				cloneClassname="block-editor-block-mover__drag-clone"
+			>
+				{ ( draggableProps ) => (
+					<Button
+						icon={ dragHandle }
+						className="block-selection-button_drag-handle"
+						aria-hidden="true"
+						label={ dragHandleLabel }
+						// Should not be able to tab to drag handle as this
+						// button can only be used with a pointer device.
+						tabIndex="-1"
+						{ ...draggableProps }
+					/>
+				) }
+			</BlockDraggable>
 			<Button
 				ref={ ref }
 				onClick={ () => setNavigationMode( false ) }
 				onKeyDown={ onKeyDown }
 				label={ label }
+				className="block-selection-button_select-button"
 			>
 				<BlockTitle clientId={ clientId } />
 			</Button>

packages/block-editor/src/components/block-list/style.scss

@@ -605,29 +605,37 @@
  */
 
 .block-editor-block-list__block-selection-button {
-	display: block;
+	display: flex;
 	z-index: z-index(".block-editor-block-list__block-selection-button");
+	// Block UI appearance.
+	box-shadow: 0 0 0 $border-width $gray-900;
+	border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
+	background-color: $white;
+
+	font-size: $default-font-size;
+	height: $block-toolbar-height - $border-width - $border-width;
+	padding: 0;
+
+	.components-button.has-icon.block-selection-button_drag-handle {
+		flex-grow: 1;
+		cursor: grab;
+	}
 
 	// The button here has a special style to appear as a toolbar.
 	.components-button {
-		font-size: $default-font-size;
 		height: $block-toolbar-height - $border-width - $border-width;
-		padding: $grid-unit-15 $grid-unit-20;
-
-		// Position this to align with the block toolbar.
-		position: relative;
-		top: -$border-width;
-
-		// Block UI appearance.
-		box-shadow: 0 0 0 $border-width $gray-900;
-		border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
-		background-color: $white;
-
 		// When button is focused, it receives a box-shadow instead of the border.
 		&:focus {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow: none;
+			border: none;
 		}
+		padding: 6px;
 	}
+
+	.components-button.block-selection-button_select-button {
+		padding-left: 0;
+	}
+
 }