Try/add drag handle to select mode (#28815)

* Adds drag handle to block selection button in navigation mode * Make handle dark. * Dropper shadow. * makes the block selection button look like the daggable chip plus block name * fix slight off vertical centering * Make select mode chip accurate. * Make draggable chip accurate. Co-authored-by: Andrei Draganescu <[email protected]> Co-authored-by: jasmussen <[email protected]>
WordPress · Mar 12, 2021 · b8e4d7b · b8e4d7b
1 parent d4fcfdd
commit b8e4d7b
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 27 deletions.
diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss
@@ -8,14 +8,12 @@
 .block-editor-block-draggable-chip {
 	background-color: $gray-900;
 	border-radius: $radius-block-ui;
-	border: $border-width solid $gray-900;
-	box-shadow: 0 4px 6px rgba($black, 0.3);
+	box-shadow: 0 6px 8px rgba($black, 0.3);
 	color: $white;
 	cursor: grabbing;
 	display: inline-flex;
 	height: $block-toolbar-height;
-	min-width: $button-size * 2;
-	padding: 0 $grid-unit-15;
+	padding: 0 ( $grid-unit-15 + $border-width );
 	user-select: none;
 
 	svg {
@@ -24,6 +22,21 @@
 
 	.block-editor-block-draggable-chip__content {
 		margin: auto;
+		justify-content: flex-start;
+
+		> .components-flex__item {
+			margin-right: $grid-unit-15 / 2;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+
+		// Drag handle is smaller than the others.
+		.block-editor-block-icon svg {
+			min-width: 18px;
+			min-height: 18px;
+		}
 	}
 
 	.components-flex__item {

diff --git a/packages/block-editor/src/components/block-list/block-selection-button.js b/packages/block-editor/src/components/block-list/block-selection-button.js
@@ -6,7 +6,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { dragHandle } from '@wordpress/icons';
+import { Button, Flex, FlexItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import {
@@ -27,12 +28,15 @@ 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 BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
+import BlockDraggable from '../block-draggable';
 
 /**
  * Returns true if the user is using windows.
@@ -93,9 +97,12 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 			const {
 				__unstableGetBlockWithoutInnerBlocks,
 				getBlockIndex,
+				getBlockName,
 				hasBlockMovingClientId,
 				getBlockListSettings,
 			} = select( blockEditorStore );
+			const blockName = getBlockName( clientId );
+			const blockType = getBlockType( blockName );
 			const index = getBlockIndex( clientId, rootClientId );
 			const { name, attributes } = __unstableGetBlockWithoutInnerBlocks(
 				clientId
@@ -107,11 +114,19 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 				attributes,
 				blockMovingMode,
 				orientation: getBlockListSettings( rootClientId )?.orientation,
+				icon: blockType.icon,
 			};
 		},
 		[ clientId, rootClientId ]
 	);
-	const { index, name, attributes, blockMovingMode, orientation } = selected;
+	const {
+		index,
+		name,
+		attributes,
+		blockMovingMode,
+		orientation,
+		icon,
+	} = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
 	const ref = useRef();
 
@@ -256,16 +271,45 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 		}
 	);
 
+	const dragHandleLabel = __( 'Drag' );
+
 	return (
 		<div className={ classNames }>
-			<Button
-				ref={ ref }
-				onClick={ () => setNavigationMode( false ) }
-				onKeyDown={ onKeyDown }
-				label={ label }
+			<Flex
+				justify="center"
+				className="block-editor-block-list__block-selection-button__content"
 			>
-				<BlockTitle clientId={ clientId } />
-			</Button>
+				<FlexItem>
+					<BlockIcon icon={ icon } showColors />
+				</FlexItem>
+				<FlexItem>
+					<BlockDraggable clientIds={ [ clientId ] }>
+						{ ( 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>
+				</FlexItem>
+				<FlexItem>
+					<Button
+						ref={ ref }
+						onClick={ () => setNavigationMode( false ) }
+						onKeyDown={ onKeyDown }
+						label={ label }
+						className="block-selection-button_select-button"
+					>
+						<BlockTitle clientId={ clientId } />
+					</Button>
+				</FlexItem>
+			</Flex>
 		</div>
 	);
 }

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -614,28 +614,64 @@
  */
 
 .block-editor-block-list__block-selection-button {
-	display: block;
+	display: inline-flex;
+	padding: 0 ( $grid-unit-15 + $border-width );
 	z-index: z-index(".block-editor-block-list__block-selection-button");
 
-	// 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;
+	// Dark block UI appearance.
+	border-radius: $radius-block-ui;
+	background-color: $gray-900;
+
+	font-size: $default-font-size;
+	height: $block-toolbar-height;
+
+	.block-editor-block-list__block-selection-button__content {
+		margin: auto;
+		display: inline-flex;
+		align-items: center;
 
-		// Position this to align with the block toolbar.
-		position: relative;
-		top: -$border-width;
+		> .components-flex__item {
+			margin-right: $grid-unit-15 / 2;
+		}
+	}
+	.components-button.has-icon.block-selection-button_drag-handle {
+		cursor: grab;
+		padding: 0;
+		height: $grid-unit-30;
+		min-width: $grid-unit-30;
 
-		// 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;
+		// Drag handle is smaller than the others.
+		svg {
+			min-width: 18px;
+			min-height: 18px;
+		}
+	}
+
+	.block-editor-block-icon {
+		font-size: $default-font-size;
+		color: $white;
+		height: $block-toolbar-height;
+	}
+
+	// The button here has a special style to appear as a toolbar.
+	.components-button {
+		min-width: $button-size;
+		color: $white;
+		height: $block-toolbar-height;
 
 		// 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;
 		}
+
+		&:active {
+			color: $white;
+		}
+		display: flex;
+	}
+	.block-selection-button_select-button.components-button {
+		padding: 0;
 	}
 }