Block toolbar: split switcher from mover and simplify styles. (#23971)

* Block toolbar: simplify switcher/mover styles. * Move mover out of block-switcher-container Only show parent block selector button and block outline when hovering the block icon. * Reduce style specificity and add missing comment.
WordPress · Aug 6, 2020 · ba80605 · ba80605
1 parent 7c3d2ea
commit ba80605
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 97 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -527,81 +527,29 @@
 	background-color: $white;
 
 	.block-editor-block-toolbar .components-toolbar-group,
-	.block-editor-block-toolbar .components-toolbar,
-	.block-editor-block-toolbar__mover-switcher-container {
+	.block-editor-block-toolbar .components-toolbar {
 		border-right-color: $gray-900;
 	}
 
-	.block-editor-block-toolbar__mover-switcher-container {
-		border-right-style: solid;
-		border-right-width: $border-width;
+	.block-editor-block-mover-button {
+		overflow: hidden;
 	}
 
-	// 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;
-			overflow: hidden;
-		}
-
-		&.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;
-			overflow: hidden;
-		}
+	// Extra specificity to override standard toolbar button styles.
+	.block-editor-block-mover.is-horizontal .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-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
@@ -106,40 +106,33 @@ export default function BlockToolbar( {
 
 	return (
 		<Wrapper className={ classes }>
-			<div
-				className="block-editor-block-toolbar__mover-switcher-container"
-				ref={ nodeRef }
-				{ ...showMoversGestures }
-			>
+			<div ref={ nodeRef } { ...showMoversGestures }>
 				{ ! 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"
-					>
-						{ ( {
-							isDraggable,
-							onDraggableStart,
-							onDraggableEnd,
-						} ) => (
-							<div
-								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>
+			{ ( 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,18 +87,6 @@
 	}
 }
 
-.block-editor-block-toolbar__mover-switcher-container {
-	display: flex;
-}
-
-.block-editor-block-toolbar__block-switcher-wrapper {
-	display: flex;
-
-	.block-editor-block-switcher {
-		display: block;
-	}
-}
-
 .block-editor-block-toolbar-animated-width-container {
 	position: relative;
 	overflow: hidden;