Add drag handle to block toolbar (#24852)

* Add drag handle to block mover component * Switch draggable chip to reflect toolbar layout * Use drag cursor * Hide drag handle on mobile or in top toolbar mode * Adjust handle and structure. * Size the switcher. * Adjust mover. * Update icon for handle. * Update movers buttons. * Fix groups. * Focus for switcher. * Handle focus. * Fix top toolbar. * Popover fix. * Fix spacing issue. * Harmonize spacing. * Try small independen transition for up / down. * Reduce motion. * use dragHandle icon in draggable chip * Make draggable chip use same icon as toolbar * Revert "Make draggable chip use same icon as toolbar" This reverts commit d031006. * Revert offset change and ensure cursor does not overlap chip block info * Update snapshots to reflect chevron icon change Co-authored-by: jasmussen <[email protected]> Co-authored-by: Matías Ventura <[email protected]>
WordPress · Oct 29, 2020 · ab65e00 · ab65e00
1 parent e6a096e
commit ab65e00
Show file tree

Hide file tree

Showing 17 changed files with 150 additions and 46 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
@@ -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
@@ -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={ dragHandle } />
+					</FlexItem>
 				</Flex>
 			</div>
 		</div>

diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss
@@ -1,6 +1,8 @@
 .block-editor-block-draggable-chip-wrapper {
 	position: absolute;
-	top: -$block-toolbar-height - $grid-unit-15;
+	// Offset position so that cursor is centered over the drag handle.
+	top: -#{$block-toolbar-height / 2};
+	left: 0;
 }
 
 .block-editor-block-draggable-chip {

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -543,12 +543,32 @@
 
 	.block-editor-block-mover:not(.is-horizontal) {
 		.block-editor-block-mover-button {
-			&.is-up-button svg {
-				margin-top: 3px;
+			&.is-up-button {
+				svg {
+					margin-top: 2px;
+					transition: ease-in-out transform 0.1s;
+					@include reduce-motion("transition");
+				}
+				&: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;
+					@include reduce-motion("transition");
+				}
+				&:focus,
+				&:hover {
+					svg {
+						transform: translateY(2px);
+					}
+				}
 			}
 
 			&:focus::before {

diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
@@ -7,9 +7,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+
+import { dragHandle } from '@wordpress/icons';
 import {
 	ToolbarGroup,
 	__experimentalToolbarItem as ToolbarItem,
+	Button,
 } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
 import { useState } from '@wordpress/element';
@@ -18,6 +21,7 @@ import { withSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+import BlockDraggable from '../block-draggable';
 import { BlockMoverUpButton, BlockMoverDownButton } from './button';
 
 function BlockMover( {
@@ -28,6 +32,7 @@ function BlockMover( {
 	isHidden,
 	rootClientId,
 	orientation,
+	hideDragHandle,
 } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 
@@ -49,7 +54,27 @@ function BlockMover( {
 				'is-horizontal': orientation === 'horizontal',
 			} ) }
 		>
-			<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>
+			) }
+			<ToolbarGroup className="block-editor-block-mover__move-button-container">
 				<ToolbarItem onFocus={ onFocus } onBlur={ onBlur }>
 					{ ( itemProps ) => (
 						<BlockMoverUpButton

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
@@ -13,28 +13,32 @@
 
 // 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;
 	}
 
 	.block-editor-block-mover-button {
 		@include break-small() {
-			padding: 0 !important;
+			// The !important modifier should be removed when https://github.com/WordPress/gutenberg/issues/24898 refactors the spacing grid.
 			height: $block-toolbar-height/2;
-			width: $block-toolbar-height;
+			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.
@@ -47,6 +51,20 @@
 		}
 	}
 
+	.block-editor-block-mover__drag-handle {
+		width: $button-size-small;
+		cursor: grab;
+
+		// 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.
 	@include break-small() {
 		.components-toolbar-group .block-editor-block-mover-button.is-up-button,

diff --git 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;
 

diff --git 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
@@ -20,7 +21,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';
 
 export default function BlockToolbar( { hideDragHandle } ) {
@@ -105,26 +105,15 @@ export default function BlockToolbar( { hideDragHandle } ) {
 					</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 ) && (
-				<BlockDraggable
-					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>
-			) }
 			{ shouldShowVisualToolbar && (
 				<>
 					<BlockControls.Slot

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -44,6 +44,31 @@
 	}
 }
 
+// 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,
+	.block-editor-block-switcher__no-switcher-icon {
+		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;
+			margin: 0 !important;
+		}
+
+		&:focus::before {
+			right: $grid-unit-05 !important;
+		}
+	}
+}
+
 .block-editor-block-toolbar,
 .block-editor-format-toolbar {
 	// Override Toolbar buttons size.

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
@@ -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
@@ -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/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;
 	}

diff --git a/...it-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/...it-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/...dit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/...dit-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
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
@@ -48,6 +48,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/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>
 );