List View: Displace list view items when dragging (a bit more WYSIWYG) (

#56625)

* Include earlier experiment to make drag chip resemble the list view item

* Try displacing list view items via transform: translateY while dragging

* Try adding a bit of styling when nesting

* Try to fix tests

* Offset the top of the table to match the displacement

* Improve the experience when beginning to drag a block

* Smoothly hide gap when dragging outside of the list view area

* Merge in changes from drag to collapsed block to expand PR

* Try collapsing selected blocks down to a single row space while dragging

* Fix jumpiness in Safari

* Try making styling match the selected state

* Try smoothly dropping to the final position

* Fix transitions above dragged items

* Fix flickering issue in Safari

* Try a transparent background color

* Fix drag behaviour in navigation block

* Add vertical drop indicator

* Try using existing drop indicator line

* Add reduced motion, fix e2e test

* Tidy up classname for drag chip in prep for subsequent changes

* Remove indent from drop chip, ensure indent is applied to the position

* Try updating the drag chip to use a border

* Try drop indicator line as preview of final list item

* Try offsets for nesting level of drop indicator, and use darker color if adjacent block has selected branch

* Use drag chip as on trunk, but with opacity of 0.8

* Consolidate drop indicator logic

* Fix drop indicator when dragging files

* Don't add nesting classname when dragging files as the editor thinks we can nest for any block

* Move displacement logic to a helper function, add tests

* Remove unneeded changes from useMovingAnimation

* Add explanatory comments

* Try a timeout for the list view drop zone updates of 50ms instead of 200ms

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

@@ -17,12 +17,15 @@ import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-pr
 import { isDropTargetValid } from '../use-block-drop-zone';
 
 const BlockDraggable = ( {
+	appendToOwnerDocument,
 	children,
 	clientIds,
 	cloneClassname,
+	elementId,
 	onDragStart,
 	onDragEnd,
 	fadeWhenDisabled = false,
+	dragComponent,
 } ) => {
 	const {
 		srcRootClientId,
@@ -181,6 +184,7 @@ const BlockDraggable = ( {
 
 	return (
 		<Draggable
+			appendToOwnerDocument={ appendToOwnerDocument }
 			cloneClassname={ cloneClassname }
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
@@ -210,12 +214,19 @@ const BlockDraggable = ( {
 				}
 			} }
 			__experimentalDragComponent={
-				<BlockDraggableChip
-					count={ clientIds.length }
-					icon={ icon }
-					fadeWhenDisabled
-				/>
+				// Check against `undefined` so that `null` can be used to disable
+				// the default drag component.
+				dragComponent !== undefined ? (
+					dragComponent
+				) : (
+					<BlockDraggableChip
+						count={ clientIds.length }
+						icon={ icon }
+						fadeWhenDisabled
+					/>
+				)
 			}
+			elementId={ elementId }
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {
 				return children( {

packages/block-editor/src/components/list-view/block-contents.js

@@ -74,7 +74,11 @@ const ListViewBlockContents = forwardRef(
 						setInsertedBlock={ setInsertedBlock }
 					/>
 				) }
-				<BlockDraggable clientIds={ draggableClientIds }>
+				<BlockDraggable
+					appendToOwnerDocument
+					clientIds={ draggableClientIds }
+					cloneClassname={ 'block-editor-list-view-draggable-chip' }
+				>
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton
 							ref={ ref }

packages/block-editor/src/components/list-view/block.js

@@ -43,7 +43,10 @@ import AriaReferencedText from './aria-referenced-text';
 
 function ListViewBlock( {
 	block: { clientId },
+	displacement,
+	isAfterDraggedBlocks,
 	isDragged,
+	isNesting,
 	isSelected,
 	isBranchSelected,
 	selectBlock,
@@ -270,6 +273,11 @@ function ListViewBlock( {
 		'has-single-cell': ! showBlockActions,
 		'is-synced': blockInformation?.isSynced,
 		'is-draggable': canMove,
+		'is-displacement-normal': displacement === 'normal',
+		'is-displacement-up': displacement === 'up',
+		'is-displacement-down': displacement === 'down',
+		'is-after-dragged-blocks': isAfterDraggedBlocks,
+		'is-nesting': isNesting,
 	} );
 
 	// Only include all selected blocks if the currently clicked on block
@@ -296,6 +304,7 @@ function ListViewBlock( {
 	return (
 		<ListViewLeaf
 			className={ classes }
+			isDragged={ isDragged }
 			onKeyDown={ onKeyDown }
 			onMouseEnter={ onMouseEnter }
 			onMouseLeave={ onMouseLeave }

packages/block-editor/src/components/list-view/branch.js

@@ -14,7 +14,7 @@ import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import { Appender } from './appender';
 import ListViewBlock from './block';
 import { useListViewContext } from './context';
-import { isClientIdSelected } from './utils';
+import { getDragDisplacementValues, isClientIdSelected } from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 
@@ -91,7 +91,6 @@ function ListViewBranch( props ) {
 		selectedClientIds,
 		level = 1,
 		path = '',
-		isBranchDragged = false,
 		isBranchSelected = false,
 		listPosition = 0,
 		fixedListWindow,
@@ -115,7 +114,14 @@ function ListViewBranch( props ) {
 		[ parentId ]
 	);
 
-	const { expandedState, draggedClientIds } = useListViewContext();
+	const {
+		blockDropPosition,
+		blockDropTargetIndex,
+		firstDraggedBlockIndex,
+		blockIndexes,
+		expandedState,
+		draggedClientIds,
+	} = useListViewContext();
 
 	if ( ! canParentExpand ) {
 		return null;
@@ -143,6 +149,21 @@ function ListViewBranch( props ) {
 					);
 				}
 
+				const isDragged = !! draggedClientIds?.includes( clientId );
+
+				// Determine the displacement of the block while dragging. This
+				// works out whether the current block should be displaced up or
+				// down, relative to the dragged blocks and the drop target.
+				const { displacement, isAfterDraggedBlocks, isNesting } =
+					getDragDisplacementValues( {
+						blockIndexes,
+						blockDropTargetIndex,
+						blockDropPosition,
+						clientId,
+						firstDraggedBlockIndex,
+						isDragged,
+					} );
+
 				const { itemInView } = fixedListWindow;
 				const blockInView = itemInView( nextPosition );
 
@@ -158,8 +179,6 @@ function ListViewBranch( props ) {
 						? expandedState[ clientId ] ?? isExpanded
 						: undefined;
 
-				const isDragged = !! draggedClientIds?.includes( clientId );
-
 				// Make updates to the selected or dragged blocks synchronous,
 				// but asynchronous for any other block.
 				const isSelected = isClientIdSelected(
@@ -178,7 +197,6 @@ function ListViewBranch( props ) {
 				const showBlock =
 					isDragged ||
 					blockInView ||
-					isBranchDragged ||
 					( isSelected && clientId === selectedClientIds[ 0 ] );
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
@@ -188,25 +206,28 @@ function ListViewBranch( props ) {
 								selectBlock={ selectBlock }
 								isSelected={ isSelected }
 								isBranchSelected={ isSelectedBranch }
-								isDragged={ isDragged || isBranchDragged }
+								isDragged={ isDragged }
 								level={ level }
 								position={ position }
 								rowCount={ rowCount }
 								siblingBlockCount={ blockCount }
 								showBlockMovers={ showBlockMovers }
 								path={ updatedPath }
-								isExpanded={ shouldExpand }
+								isExpanded={ isDragged ? false : shouldExpand }
 								listPosition={ nextPosition }
 								selectedClientIds={ selectedClientIds }
 								isSyncedBranch={ syncedBranch }
+								displacement={ displacement }
+								isAfterDraggedBlocks={ isAfterDraggedBlocks }
+								isNesting={ isNesting }
 							/>
 						) }
 						{ ! showBlock && (
 							<tr>
 								<td className="block-editor-list-view-placeholder" />
 							</tr>
 						) }
-						{ hasNestedBlocks && shouldExpand && (
+						{ hasNestedBlocks && shouldExpand && ! isDragged && (
 							<ListViewBranch
 								parentId={ clientId }
 								blocks={ innerBlocks }
@@ -217,7 +238,6 @@ function ListViewBranch( props ) {
 								listPosition={ nextPosition + 1 }
 								fixedListWindow={ fixedListWindow }
 								isBranchSelected={ isSelectedBranch }
-								isBranchDragged={ isDragged || isBranchDragged }
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
 								isSyncedBranch={ syncedBranch }