Grid interactivity: Allow blocks to be positioned in manual mode using drag and drop (#61025)

Co-authored-by: noisysocks <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: jasmussen <[email protected]>

Author: 4 people

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

@@ -25,14 +25,22 @@ function BlockMover( {
 	isBlockMoverUpButtonDisabled,
 	isBlockMoverDownButtonDisabled,
 } ) {
-	const { canMove, rootClientId, isFirst, isLast, orientation } = useSelect(
+	const {
+		canMove,
+		rootClientId,
+		isFirst,
+		isLast,
+		orientation,
+		isManualGrid,
+	} = useSelect(
 		( select ) => {
 			const {
 				getBlockIndex,
 				getBlockListSettings,
 				canMoveBlocks,
 				getBlockOrder,
 				getBlockRootClientId,
+				getBlockAttributes,
 			} = select( blockEditorStore );
 			const normalizedClientIds = Array.isArray( clientIds )
 				? clientIds
@@ -44,13 +52,18 @@ function BlockMover( {
 				normalizedClientIds[ normalizedClientIds.length - 1 ]
 			);
 			const blockOrder = getBlockOrder( _rootClientId );
+			const { layout = {} } = getBlockAttributes( _rootClientId ) ?? {};
 
 			return {
 				canMove: canMoveBlocks( clientIds ),
 				rootClientId: _rootClientId,
 				isFirst: firstIndex === 0,
 				isLast: lastIndex === blockOrder.length - 1,
 				orientation: getBlockListSettings( _rootClientId )?.orientation,
+				isManualGrid:
+					layout.type === 'grid' &&
+					!! layout.columnCount &&
+					window.__experimentalEnableGridInteractivity,
 			};
 		},
 		[ clientIds ]
@@ -60,8 +73,6 @@ function BlockMover( {
 		return null;
 	}
 
-	const dragHandleLabel = __( 'Drag' );
-
 	return (
 		<ToolbarGroup
 			className={ clsx( 'block-editor-block-mover', {
@@ -75,7 +86,7 @@ function BlockMover( {
 							icon={ dragHandle }
 							className="block-editor-block-mover__drag-handle"
 							aria-hidden="true"
-							label={ dragHandleLabel }
+							label={ __( 'Drag' ) }
 							// Should not be able to tab to drag handle as this
 							// button can only be used with a pointer device.
 							tabIndex="-1"
@@ -84,26 +95,28 @@ function BlockMover( {
 					) }
 				</BlockDraggable>
 			) }
-			<div className="block-editor-block-mover__move-button-container">
-				<ToolbarItem>
-					{ ( itemProps ) => (
-						<BlockMoverUpButton
-							disabled={ isBlockMoverUpButtonDisabled }
-							clientIds={ clientIds }
-							{ ...itemProps }
-						/>
-					) }
-				</ToolbarItem>
-				<ToolbarItem>
-					{ ( itemProps ) => (
-						<BlockMoverDownButton
-							disabled={ isBlockMoverDownButtonDisabled }
-							clientIds={ clientIds }
-							{ ...itemProps }
-						/>
-					) }
-				</ToolbarItem>
-			</div>
+			{ ! isManualGrid && (
+				<div className="block-editor-block-mover__move-button-container">
+					<ToolbarItem>
+						{ ( itemProps ) => (
+							<BlockMoverUpButton
+								disabled={ isBlockMoverUpButtonDisabled }
+								clientIds={ clientIds }
+								{ ...itemProps }
+							/>
+						) }
+					</ToolbarItem>
+					<ToolbarItem>
+						{ ( itemProps ) => (
+							<BlockMoverDownButton
+								disabled={ isBlockMoverDownButtonDisabled }
+								clientIds={ clientIds }
+								{ ...itemProps }
+							/>
+						) }
+					</ToolbarItem>
+				</div>
+			) }
 		</ToolbarGroup>
 	);
 }