Move mover out of block-switcher-container

Only show parent block selector button and block outline when hovering the block icon.
WordPress · Jul 15, 2020 · 5cead2b · 5cead2b
1 parent a9add0d
commit 5cead2b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 40 deletions.
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
@@ -104,40 +104,38 @@ export default function BlockToolbar( {
 
 	return (
 		<Wrapper className={ classes }>
-			<div
-				className="block-editor-block-toolbar__mover-switcher-container"
-				ref={ nodeRef }
-			>
+			<div ref={ nodeRef }>
 				{ ! isMultiToolbar && (
 					<div className="block-editor-block-toolbar__block-parent-selector-wrapper">
 						<BlockParentSelector clientIds={ blockClientIds } />
 					</div>
 				) }
-
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
-					<BlockDraggable
-						clientIds={ blockClientIds }
-						cloneClassname="block-editor-block-toolbar__drag-clone"
+					<div
+						{ ...showMoversGestures }
+						className="block-editor-block-toolbar__block-switcher-wrapper"
 					>
-						{ ( {
-							isDraggable,
-							onDraggableStart,
-							onDraggableEnd,
-						} ) => (
-							<div
-								{ ...showMoversGestures }
-								className="block-editor-block-toolbar__block-switcher-wrapper"
-								draggable={ isDraggable && ! hideDragHandle }
-								onDragStart={ onDraggableStart }
-								onDragEnd={ onDraggableEnd }
-							>
-								<BlockSwitcher clientIds={ blockClientIds } />
-								<BlockMover clientIds={ blockClientIds } />
-							</div>
-						) }
-					</BlockDraggable>
+						<BlockSwitcher clientIds={ blockClientIds } />
+					</div>
 				) }
 			</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
@@ -87,21 +87,9 @@
 	}
 }
 
-.block-editor-block-toolbar__mover-switcher-container {
-	display: flex;
-}
-
-.block-editor-block-toolbar__block-switcher-wrapper {
-	display: flex;
-
-	// Drag and drop is only enabled in contextual toolbars.
-	&:not([draggable="false"]) * {
-		cursor: grab;
-	}
-
-	.block-editor-block-switcher {
-		display: block;
-	}
+// Drag and drop is only enabled in contextual toolbars.
+.block-editor-block-toolbar__drag-handle-area:not([draggable="false"]) * {
+	cursor: grab;
 }
 
 .block-editor-block-toolbar-animated-width-container {