Show movers next to block switcher (#22673)

* Initial work on unhiding movers. * Make parent button 48x48 * Handle focus styles. * Horizontal mover polish. * Polish drag and drop. * Fix issue with just one block. * Small refactor. * Switcher + Movers draggable * Update syntax. Props @zebulandstanphill Co-authored-by: Zebulan Stanphill <[email protected]> * Move the dragging handle to the block toolbar styles. * specific block clone className * Fix centering when lonesome. * Fix tab-order test * Simplify handle positioning variables. * Remove rounding on drop target. Co-authored-by: Riad Benguella <[email protected]> Co-authored-by: Zebulan Stanphill <[email protected]> Co-authored-by: Joen Asmussen <[email protected]>
WordPress · Jun 9, 2020 · 1f4645f · 1f4645f
1 parent 8ac2826
commit 1f4645f
Show file tree

Hide file tree

Showing 14 changed files with 200 additions and 180 deletions.
diff --git a/packages/block-editor/src/components/block-draggable/index.js b/packages/block-editor/src/components/block-draggable/index.js
@@ -5,7 +5,7 @@ import { Draggable } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 
-const BlockDraggable = ( { children, clientIds } ) => {
+const BlockDraggable = ( { children, clientIds, cloneClassname } ) => {
 	const { srcRootClientId, index, isDraggable } = useSelect(
 		( select ) => {
 			const {
@@ -57,6 +57,7 @@ const BlockDraggable = ( { children, clientIds } ) => {
 
 	return (
 		<Draggable
+			cloneClassname={ cloneClassname }
 			elementId={ blockElementId }
 			transferData={ transferData }
 			onDragStart={ () => {

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -107,7 +107,6 @@
 		right: 0;
 		left: 0;
 		top: -$default-block-margin / 2;
-		border-radius: $radius-block-ui;
 		border-top: 4px solid $blue-medium-focus;
 	}
 }
@@ -486,9 +485,86 @@
 	background-color: $white;
 
 	.block-editor-block-toolbar .components-toolbar-group,
-	.block-editor-block-toolbar .components-toolbar {
+	.block-editor-block-toolbar .components-toolbar,
+	.block-editor-block-toolbar__mover-switcher-container {
 		border-right-color: $dark-gray-primary;
 	}
+
+	.block-editor-block-toolbar__mover-switcher-container {
+		border-right-style: solid;
+		border-right-width: $border-width;
+	}
+
+	// Adjust the mover control to fit as a unit next to the block switcher.
+	.block-editor-block-toolbar__block-switcher-wrapper {
+		// Adjust the focus rectangle for the switcher.
+		.block-editor-block-switcher__no-switcher-icon::before,
+		.block-editor-block-switcher__toggle::before {
+			width: $grid-unit-60 - $grid-unit-10 - $grid-unit-15;
+		}
+
+		// Adjust the positioning of the icon to better balance the new unit.
+		.block-editor-block-icon svg {
+			margin-left: 10px;
+		}
+
+		.block-editor-block-switcher:last-child .block-editor-block-icon svg {
+			margin-left: auto;
+		}
+
+		.components-toolbar,
+		.components-toolbar-group {
+			border-right: none;
+		}
+	}
+
+	.block-editor-block-mover {
+		margin-left: -$grid-unit-15;
+		width: $button-size;
+
+		&.is-horizontal {
+			width: $block-toolbar-height;
+		}
+
+		// Needs specificity to override a first-child rule.
+		.components-button.has-icon.block-editor-block-mover-button.block-editor-block-mover-button {
+			min-width: $button-size;
+			width: $button-size;
+			cursor: grab;
+
+			&:active {
+				cursor: grabbing;
+			}
+		}
+
+		&.is-horizontal .components-button.has-icon.block-editor-block-mover-button.block-editor-block-mover-button {
+			min-width: $block-toolbar-height/2;
+			width: $block-toolbar-height/2;
+		}
+	}
+
+	.block-editor-block-mover:not(.is-horizontal) {
+
+		.block-editor-block-mover-button {
+			> svg {
+				margin-left: 2px;
+			}
+
+			&.is-up-button svg {
+				margin-top: 3px;
+			}
+
+			&.is-down-button svg {
+				margin-bottom: 3px;
+			}
+
+			&:focus::before {
+				left: 0 !important;
+				min-width: 0;
+				width: 28px;
+			}
+		}
+	}
 }
 
 

diff --git a/packages/block-editor/src/components/block-mover/button.js b/packages/block-editor/src/components/block-mover/button.js
@@ -17,19 +17,23 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { leftArrow, rightArrow } from './icons';
-import { chevronUp, chevronDown } from '@wordpress/icons';
+import {
+	chevronLeft,
+	chevronRight,
+	chevronUp,
+	chevronDown,
+} from '@wordpress/icons';
 import { getBlockMoverDescription } from './mover-description';
 
 const getArrowIcon = ( direction, orientation, isRTL ) => {
 	if ( direction === 'up' ) {
 		if ( orientation === 'horizontal' ) {
-			return isRTL ? rightArrow : leftArrow;
+			return isRTL ? chevronRight : chevronLeft;
 		}
 		return chevronUp;
 	} else if ( direction === 'down' ) {
 		if ( orientation === 'horizontal' ) {
-			return isRTL ? leftArrow : rightArrow;
+			return isRTL ? chevronLeft : chevronRight;
 		}
 		return chevronDown;
 	}

diff --git a/packages/block-editor/src/components/block-mover/icons.js b/packages/block-editor/src/components/block-mover/icons.js
diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
@@ -18,7 +18,6 @@ import { withSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import BlockDraggable from '../block-draggable';
 import { BlockMoverUpButton, BlockMoverDownButton } from './button';
 
 export class BlockMover extends Component {
@@ -51,7 +50,6 @@ export class BlockMover extends Component {
 			isLocked,
 			isHidden,
 			rootClientId,
-			hideDragHandle,
 			__experimentalOrientation: orientation,
 		} = this.props;
 		const { isFocused } = this.state;
@@ -64,44 +62,37 @@ 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 (
-			<BlockDraggable clientIds={ clientIds }>
-				{ ( { isDraggable, onDraggableStart, onDraggableEnd } ) => (
-					<div
-						className={ classnames( 'block-editor-block-mover', {
-							'is-visible': isFocused || ! isHidden,
-							'is-horizontal': orientation === 'horizontal',
-						} ) }
-						draggable={ isDraggable && ! hideDragHandle }
-						onDragStart={ onDraggableStart }
-						onDragEnd={ onDraggableEnd }
+			<div
+				className={ classnames( 'block-editor-block-mover', {
+					'is-visible': isFocused || ! isHidden,
+					'is-horizontal': orientation === 'horizontal',
+				} ) }
+			>
+				<ToolbarGroup>
+					<ToolbarItem
+						onFocus={ this.onFocus }
+						onBlur={ this.onBlur }
 					>
-						<ToolbarGroup>
-							<ToolbarItem
-								onFocus={ this.onFocus }
-								onBlur={ this.onBlur }
-							>
-								{ ( itemProps ) => (
-									<BlockMoverUpButton
-										clientIds={ clientIds }
-										{ ...itemProps }
-									/>
-								) }
-							</ToolbarItem>
-							<ToolbarItem
-								onFocus={ this.onFocus }
-								onBlur={ this.onBlur }
-							>
-								{ ( itemProps ) => (
-									<BlockMoverDownButton
-										clientIds={ clientIds }
-										{ ...itemProps }
-									/>
-								) }
-							</ToolbarItem>
-						</ToolbarGroup>
-					</div>
-				) }
-			</BlockDraggable>
+						{ ( itemProps ) => (
+							<BlockMoverUpButton
+								clientIds={ clientIds }
+								{ ...itemProps }
+							/>
+						) }
+					</ToolbarItem>
+					<ToolbarItem
+						onFocus={ this.onFocus }
+						onBlur={ this.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
@@ -69,8 +69,8 @@
 		.block-editor-block-mover-button.has-icon {
 			height: $block-toolbar-height;
 			// Overrides .components-toolbar-group styles
-			width: $block-toolbar-height/2 !important;
-			min-width: $grid-unit-30 !important;
+			width: $block-toolbar-height / 2;
+			min-width: $grid-unit-30;
 			padding-left: 0;
 			padding-right: 0;
 
@@ -115,17 +115,4 @@
 			}
 		}
 	}
-
-	// Drag and drop is only enabled in contextual toolbars.
-	&:not([draggable="false"]) {
-		cursor: grab;
-
-		.block-editor-block-mover__control {
-			cursor: grab !important;
-
-			&:not(:disabled):not([aria-disabled="true"]):active {
-				cursor: grabbing;
-			}
-		}
-	}
 }
diff --git a/packages/block-editor/src/components/block-parent-selector/style.scss b/packages/block-editor/src/components/block-parent-selector/style.scss
@@ -1,14 +1,14 @@
 .block-editor-block-parent-selector {
 	background: $white;
-	border: 1px solid $dark-gray-primary;
+	border: $border-width solid $dark-gray-primary;
 	border-radius: $radius-block-ui;
-	padding: 8px;
+	padding: $grid-unit-10 - $border-width;
 	line-height: 1;
 
 	.block-editor-block-parent-selector__button {
-		width: 32px;
 		min-width: auto;
-		height: 32px;
+		width: $grid-unit-40;
+		height: $grid-unit-40;
 		padding: 0;
 	}
 }
diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -41,7 +41,9 @@
 }
 
 // Style this the same as the block buttons in the library.
-// Needs specificiity to override the icon button.
+// Needs specificity to override the icon button.
+.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon,
+.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon,
 .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon,
 .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon {
 	padding: 0;
@@ -149,6 +151,7 @@
 		width: $grid-unit-60;
 	}
 
+	.components-button.block-editor-block-switcher__no-switcher-icon,
 	.components-button.block-editor-block-switcher__toggle {
 		.block-editor-block-icon,
 		.block-editor-block-switcher__transform {