Grid Interactivity: Fix block mover layout and styles (#64021)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>

Author: t-hamano

packages/block-editor/src/components/block-mover/index.js

@@ -69,7 +69,11 @@ function BlockMover( {
 		[ clientIds ]
 	);
 
-	if ( ! canMove || ( isFirst && isLast && ! rootClientId ) ) {
+	if (
+		! canMove ||
+		( isFirst && isLast && ! rootClientId ) ||
+		( hideDragHandle && isManualGrid )
+	) {
 		return null;
 	}
 

packages/block-editor/src/components/grid/grid-item-movers.js

@@ -55,28 +55,29 @@ export function GridItemMovers( {
 	return (
 		<BlockControls group="parent">
 			<ToolbarGroup className="block-editor-grid-item-mover__move-button-container">
-				<GridItemMover
-					className="is-left-button"
-					icon={ chevronLeft }
-					label={ __( 'Move left' ) }
-					description={ __( 'Move left' ) }
-					isDisabled={ columnStart <= 1 }
-					onClick={ () => {
-						onChange( {
-							columnStart: columnStart - 1,
-						} );
-						__unstableMarkNextChangeAsNotPersistent();
-						moveBlocksToPosition(
-							[ blockClientId ],
-							gridClientId,
-							gridClientId,
-							getNumberOfBlocksBeforeCell(
-								columnStart - 1,
-								rowStart
-							)
-						);
-					} }
-				/>
+				<div className="block-editor-grid-item-mover__move-horizontal-button-container is-left">
+					<GridItemMover
+						icon={ chevronLeft }
+						label={ __( 'Move left' ) }
+						description={ __( 'Move left' ) }
+						isDisabled={ columnStart <= 1 }
+						onClick={ () => {
+							onChange( {
+								columnStart: columnStart - 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart - 1,
+									rowStart
+								)
+							);
+						} }
+					/>
+				</div>
 				<div className="block-editor-grid-item-mover__move-vertical-button-container">
 					<GridItemMover
 						className="is-up-button"
@@ -123,28 +124,29 @@ export function GridItemMovers( {
 						} }
 					/>
 				</div>
-				<GridItemMover
-					className="is-right-button"
-					icon={ chevronRight }
-					label={ __( 'Move right' ) }
-					description={ __( 'Move right' ) }
-					isDisabled={ columnCount && columnEnd >= columnCount }
-					onClick={ () => {
-						onChange( {
-							columnStart: columnStart + 1,
-						} );
-						__unstableMarkNextChangeAsNotPersistent();
-						moveBlocksToPosition(
-							[ blockClientId ],
-							gridClientId,
-							gridClientId,
-							getNumberOfBlocksBeforeCell(
-								columnStart + 1,
-								rowStart
-							)
-						);
-					} }
-				/>
+				<div className="block-editor-grid-item-mover__move-horizontal-button-container is-right">
+					<GridItemMover
+						icon={ chevronRight }
+						label={ __( 'Move right' ) }
+						description={ __( 'Move right' ) }
+						isDisabled={ columnCount && columnEnd >= columnCount }
+						onClick={ () => {
+							onChange( {
+								columnStart: columnStart + 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart + 1,
+									rowStart
+								)
+							);
+						} }
+					/>
+				</div>
 			</ToolbarGroup>
 		</BlockControls>
 	);

packages/block-editor/src/components/grid/style.scss

@@ -105,7 +105,6 @@
 	.block-editor-grid-item-mover-button {
 		width: $block-toolbar-height * 0.5;
 		min-width: 0 !important; // overrides default button width.
-		overflow: hidden;
 		padding-left: 0;
 		padding-right: 0;
 
@@ -155,7 +154,7 @@
 		justify-content: space-around;
 
 		> .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
-			height: $block-toolbar-height * 0.5 - $grid-unit-05;
+			height: $block-toolbar-height * 0.5 - $grid-unit-05 !important; // overrides toolbar button height.
 			width: 100%;
 			min-width: 0 !important; // overrides default button width.
 
@@ -173,18 +172,53 @@
 	}
 }
 
+.editor-collapsible-block-toolbar {
+	.block-editor-grid-item-mover__move-vertical-button-container {
+		// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+		@include break-small() {
+			height: $grid-unit-50;
+			position: relative;
+			top: -5px; // Should be -4px, but that causes scrolling when focus lands on the movers, in a 60px header.
+		}
+	}
+}
+
 .show-icon-labels {
 
-	.block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-left-button {
-		border-right: 1px solid $gray-700;
-		padding-right: 12px;
-	}
+	.block-editor-grid-item-mover__move-horizontal-button-container {
+		position: relative;
 
-	.block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-right-button {
-		border-left: 1px solid $gray-700;
-		padding-left: 12px;
-	}
+		&::before {
+			@include break-small() {
+				content: "";
+				height: 100%;
+				width: $border-width;
+				background: $gray-200;
+				position: absolute;
+				top: 0;
+			}
+
+			@include break-medium() {
+				background: $gray-900;
+			}
+		}
+
+		&.is-left {
+			padding-right: 6px;
 
+			&::before {
+				right: 0;
+			}
+		}
+
+		&.is-right {
+			padding-left: 6px;
+
+			&::before {
+				left: 0;
+			}
+		}
+	}
 
 	.block-editor-grid-item-mover__move-vertical-button-container {
 		&::before {
@@ -208,5 +242,21 @@
 		}
 	}
 
+	.block-editor-grid-item-mover-button {
+		white-space: nowrap;
+	}
+
+	.editor-collapsible-block-toolbar {
+		.block-editor-grid-item-mover__move-horizontal-button-container::before {
+			height: $grid-unit-30;
+			background: $gray-300;
+			top: $grid-unit-05;
+		}
+
+		.block-editor-grid-item-mover__move-vertical-button-container::before {
+			background: $gray-300;
+			width: calc(100% - #{$grid-unit-30});
+		}
+	}
 }