@wordpress/block-editor 12.17.0 → 12.18.1

package/src/components/list-view/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -28,8 +33,9 @@ import { __ } from '@wordpress/i18n';
  */
 import ListViewBranch from './branch';
 import { ListViewContext } from './context';
-import ListViewDropIndicator from './drop-indicator';
+import ListViewDropIndicatorPreview from './drop-indicator';
 import useBlockSelection from './use-block-selection';
+import useListViewBlockIndexes from './use-list-view-block-indexes';
 import useListViewClientIds from './use-list-view-client-ids';
 import useListViewDropZone from './use-list-view-drop-zone';
 import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
@@ -105,6 +111,7 @@ function ListViewComponent(
 	const instanceId = useInstanceId( ListViewComponent );
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( { blocks, rootClientId } );
+	const blockIndexes = useListViewBlockIndexes( clientIdsTree );
 
 	const { getBlock } = useSelect( blockEditorStore );
 	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
@@ -132,6 +139,8 @@ function ListViewComponent(
 
 	const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone( {
 		dropZoneElement,
+		expandedState,
+		setExpandedState,
 	} );
 	const elementRef = useRef();
 	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
@@ -210,11 +219,55 @@ function ListViewComponent(
 		[ updateBlockSelection ]
 	);
 
+	const firstDraggedBlockClientId = draggedClientIds?.[ 0 ];
+
+	// Convert a blockDropTarget into indexes relative to the blocks in the list view.
+	// These values are used to determine which blocks should be displaced to make room
+	// for the drop indicator. See `ListViewBranch` and `getDragDisplacementValues`.
+	const { blockDropTargetIndex, blockDropPosition, firstDraggedBlockIndex } =
+		useMemo( () => {
+			let _blockDropTargetIndex, _firstDraggedBlockIndex;
+
+			if ( blockDropTarget?.clientId ) {
+				const foundBlockIndex =
+					blockIndexes[ blockDropTarget.clientId ];
+				// If dragging below or inside the block, treat the drop target as the next block.
+				_blockDropTargetIndex =
+					foundBlockIndex === undefined ||
+					blockDropTarget?.dropPosition === 'top'
+						? foundBlockIndex
+						: foundBlockIndex + 1;
+			} else if ( blockDropTarget === null ) {
+				// A `null` value is used to indicate that the user is dragging outside of the list view.
+				_blockDropTargetIndex = null;
+			}
+
+			if ( firstDraggedBlockClientId ) {
+				const foundBlockIndex =
+					blockIndexes[ firstDraggedBlockClientId ];
+				_firstDraggedBlockIndex =
+					foundBlockIndex === undefined ||
+					blockDropTarget?.dropPosition === 'top'
+						? foundBlockIndex
+						: foundBlockIndex + 1;
+			}
+
+			return {
+				blockDropTargetIndex: _blockDropTargetIndex,
+				blockDropPosition: blockDropTarget?.dropPosition,
+				firstDraggedBlockIndex: _firstDraggedBlockIndex,
+			};
+		}, [ blockDropTarget, blockIndexes, firstDraggedBlockClientId ] );
+
 	const contextValue = useMemo(
 		() => ( {
+			blockDropPosition,
+			blockDropTargetIndex,
+			blockIndexes,
 			draggedClientIds,
 			expandedState,
 			expand,
+			firstDraggedBlockIndex,
 			collapse,
 			BlockSettingsMenu,
 			listViewInstanceId: instanceId,
@@ -225,9 +278,13 @@ function ListViewComponent(
 			rootClientId,
 		} ),
 		[
+			blockDropPosition,
+			blockDropTargetIndex,
+			blockIndexes,
 			draggedClientIds,
 			expandedState,
 			expand,
+			firstDraggedBlockIndex,
 			collapse,
 			BlockSettingsMenu,
 			instanceId,
@@ -267,7 +324,8 @@ function ListViewComponent(
 
 	return (
 		<AsyncModeProvider value={ true }>
-			<ListViewDropIndicator
+			<ListViewDropIndicatorPreview
+				draggedBlockClientId={ firstDraggedBlockClientId }
 				listViewRef={ elementRef }
 				blockDropTarget={ blockDropTarget }
 			/>
@@ -278,7 +336,11 @@ function ListViewComponent(
 			) }
 			<TreeGrid
 				id={ id }
-				className="block-editor-list-view-tree"
+				className={ classnames( 'block-editor-list-view-tree', {
+					'is-dragging':
+						draggedClientIds?.length > 0 &&
+						blockDropTargetIndex !== undefined,
+				} ) }
 				aria-label={ __( 'Block navigation structure' ) }
 				ref={ treeGridRef }
 				onCollapseRow={ collapseRow }
@@ -286,6 +348,15 @@ function ListViewComponent(
 				onFocusRow={ focusRow }
 				applicationAriaLabel={ __( 'Block navigation structure' ) }
 				aria-describedby={ describedById }
+				style={ {
+					'--wp-admin--list-view-dragged-items-height':
+						draggedClientIds?.length
+							? `${
+									BLOCK_LIST_ITEM_HEIGHT *
+									( draggedClientIds.length - 1 )
+							  }px`
+							: null,
+				} }
 			>
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch

package/src/components/list-view/leaf.js

@@ -21,6 +21,7 @@ const AnimatedTreeGridRow = animated( TreeGridRow );
 const ListViewLeaf = forwardRef(
 	(
 		{
+			isDragged,
 			isSelected,
 			position,
 			level,
@@ -33,8 +34,7 @@ const ListViewLeaf = forwardRef(
 		ref
 	) => {
 		const animationRef = useMovingAnimation( {
-			isSelected,
-			adjustScrolling: false,
+			clientId: props[ 'data-block' ],
 			enableAnimation: true,
 			triggerAnimationOnChange: path,
 		} );

package/src/components/list-view/style.scss

@@ -9,11 +9,22 @@
 		margin: (-$grid-unit-15) (-$grid-unit-15 * 0.5) 0;
 		width: calc(100% + #{ $grid-unit-15 });
 	}
+
+	// Without setting `pointer-events: none`, when dragging over list view items,
+	// Safari calls onDropZoneLeave causing flickering in the position of the drop indicator.
+	// https://bugs.webkit.org/show_bug.cgi?id=66547
+	// See: https://github.com/WordPress/gutenberg/pull/56625
+	&.is-dragging tbody {
+		pointer-events: none;
+	}
 }
 
 .block-editor-list-view-leaf {
 	// Use position relative for row animation.
 	position: relative;
+	// Set the initial translate position to ensure the UI in Safari doesn't jump
+	// when rows later receive the is-displacement-up or is-displacement-down class.
+	transform: translateY(0);
 
 	&.is-draggable,
 	&.is-draggable .block-editor-list-view-block-contents {
@@ -128,6 +139,66 @@
 		border-radius: 0;
 	}
 
+	// List view items will be displaced up or down relative to their original position
+	// when a user is dragging a block within the list view. This creates a space for a
+	// visual indicator of where the block will be placed when dropped. The `normal` state
+	// is used to allow rows to smoothly transition back into their original position,
+	// without attaching the transition to the list view leaf itself. This prevents rows
+	// from animating too much once the user has dropped the block.
+	&.is-displacement-normal {
+		transition: transform 0.2s;
+		transform: translateY(0);
+		@include reduce-motion("transition");
+	}
+
+	&.is-displacement-up {
+		transition: transform 0.2s;
+		transform: translateY(-36px);
+		@include reduce-motion("transition");
+	}
+
+	&.is-displacement-down {
+		transition: transform 0.2s;
+		transform: translateY(36px);
+		@include reduce-motion("transition");
+	}
+
+	// Collapse multi-selections down into a single row space while dragging. The following
+	// rules ensure that during a multi-selection, the space for additional blocks is factored in
+	// when displacing up and down. The result is that there should only ever be a single row's
+	// worth of space for the visual indicator of where a block will be placed when dropped.
+	&.is-after-dragged-blocks {
+		transition: transform 0.2s;
+		transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+		@include reduce-motion("transition");
+	}
+
+	&.is-after-dragged-blocks.is-displacement-up {
+		transition: transform 0.2s;
+		transform: translateY(calc(-36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+		@include reduce-motion("transition");
+	}
+
+	&.is-after-dragged-blocks.is-displacement-down {
+		transition: transform 0.2s;
+		transform: translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+		@include reduce-motion("transition");
+	}
+
+	// To ensure displaced rows behave correctly, ensure that blocks that are currently being dragged
+	// are visually hidden. The below rules are used in favor of `display: none` to ensure that
+	// there is no flicker when a user begins to drag a block.
+	&.is-dragging {
+		opacity: 0;
+		// The row's left position is set to 0 to ensure that the animation
+		// when dropping a block animates from the correct position.
+		left: 0;
+		// Ensure the dragged element does not otherwise affect dropping to
+		// other positions.
+		pointer-events: none;
+		z-index: -9999;
+	}
+
 	// List View renders a fixed number of items and relies on each item having a fixed height of 36px.
 	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
 	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
@@ -159,6 +230,7 @@
 		}
 	}
 
+	&.is-nesting .block-editor-list-view-block-contents,
 	.block-editor-list-view-block-contents:focus {
 		box-shadow: none;
 
@@ -173,11 +245,6 @@
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			z-index: 2;
 			pointer-events: none;
-
-			// Hide focus styles while a user is dragging blocks/files etc.
-			.is-dragging-components-draggable & {
-				box-shadow: none;
-			}
 		}
 	}
 
@@ -186,14 +253,10 @@
 		right: 0;
 	}
 
+	&.is-nesting .block-editor-list-view__menu,
 	.block-editor-list-view-block__menu:focus {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		z-index: 1;
-
-		// Hide focus styles while a user is dragging blocks/files etc.
-		.is-dragging-components-draggable & {
-			box-shadow: none;
-		}
 	}
 
 	&.is-visible .block-editor-list-view-block-contents {
@@ -370,6 +433,14 @@
 	}
 }
 
+// First level of indentation is aria-level 2, max indent is 8.
+// Indent is a full icon size, plus 4px which optically aligns child icons to the text label above.
+$block-navigation-max-indent: 8;
+
+.block-editor-list-view-draggable-chip {
+	opacity: 0.8;
+}
+
 .block-editor-list-view-block__contents-cell,
 .block-editor-list-view-appender__cell {
 	.block-editor-list-view-block__contents-container,
@@ -386,9 +457,6 @@
 	cursor: pointer;
 }
 
-// First level of indentation is aria-level 2, max indent is 8.
-// Indent is a full icon size, plus 4px which optically aligns child icons to the text label above.
-$block-navigation-max-indent: 8;
 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
 	margin-left: ( $icon-size ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 );
 }
@@ -443,6 +511,27 @@ $block-navigation-max-indent: 8;
 	}
 }
 
+.block-editor-list-view-drop-indicator--preview {
+	pointer-events: none;
+
+	// If the drop indicator's popover ever extends to the edge of the screen,
+	// avoid any scrollbars by hiding the overflow.
+	.components-popover__content {
+		overflow: hidden !important;
+	}
+
+	.block-editor-list-view-drop-indicator__line {
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+		height: 36px;
+		border-radius: 4px;
+		overflow: hidden;
+	}
+
+	.block-editor-list-view-drop-indicator__line--darker {
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.09);
+	}
+}
+
 .block-editor-list-view-placeholder {
 	padding: 0;
 	margin: 0;

package/src/components/list-view/test/use-list-view-drop-zone.js

@@ -127,6 +127,7 @@ describe( 'getListViewDropTarget', () => {
 
 			expect( target ).toEqual( {
 				blockIndex: 0,
+				clientId: 'block-1',
 				dropPosition: 'inside',
 				rootClientId: 'block-1',
 			} );
@@ -142,6 +143,7 @@ describe( 'getListViewDropTarget', () => {
 
 			expect( target ).toEqual( {
 				blockIndex: 0,
+				clientId: 'block-3',
 				dropPosition: 'inside',
 				rootClientId: 'block-3',
 			} );
@@ -244,6 +246,7 @@ describe( 'getListViewDropTarget', () => {
 
 			expect( target ).toEqual( {
 				blockIndex: 1,
+				clientId: 'block-1',
 				dropPosition: 'inside',
 				rootClientId: 'block-1',
 			} );
@@ -277,6 +280,7 @@ describe( 'getListViewDropTarget', () => {
 
 			expect( target ).toEqual( {
 				blockIndex: 0,
+				clientId: 'block-1',
 				dropPosition: 'inside',
 				rootClientId: 'block-1',
 			} );

package/src/components/list-view/test/utils.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { getCommonDepthClientIds } from '../utils';
+import { getCommonDepthClientIds, getDragDisplacementValues } from '../utils';
 
 describe( 'getCommonDepthClientIds', () => {
 	it( 'should return start and end when no depth is provided', () => {
@@ -48,3 +48,220 @@ describe( 'getCommonDepthClientIds', () => {
 		expect( result ).toEqual( { start: 'start-3', end: 'clicked-id' } );
 	} );
 } );
+
+describe( 'getDragDisplacementValues', () => {
+	const blockIndexes = {
+		'block-a': 0,
+		'block-b': 1,
+		'block-c': 2,
+		'block-d': 3,
+		'block-e': 4,
+		'block-f': 5,
+		'block-g': 6,
+		'block-h': 7,
+	};
+
+	it( 'should return displacement of normal when block is after dragged block and drop target', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 3,
+			blockDropPosition: 'bottom',
+			clientId: 'block-h',
+			firstDraggedBlockIndex: 5,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'normal',
+			isAfterDraggedBlocks: true,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return displacement of up when block is after dragged block and before the drop target', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 7,
+			blockDropPosition: 'bottom',
+			clientId: 'block-d',
+			firstDraggedBlockIndex: 2,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'up',
+			isAfterDraggedBlocks: true,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return displacement of down when block is before dragged block and after the drop target', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 1,
+			blockDropPosition: 'bottom',
+			clientId: 'block-d',
+			firstDraggedBlockIndex: 6,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'down',
+			isAfterDraggedBlocks: false,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return isNesting of true when block is just before the drop target and drop position is inside', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 1,
+			blockDropPosition: 'inside',
+			clientId: 'block-a',
+			firstDraggedBlockIndex: 6,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'normal',
+			isAfterDraggedBlocks: false,
+			isNesting: true,
+		} );
+	} );
+
+	it( 'should return isNesting of false when block is not just before the drop target and drop position is inside', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 1,
+			blockDropPosition: 'inside',
+			clientId: 'block-b',
+			firstDraggedBlockIndex: 6,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'down',
+			isAfterDraggedBlocks: false,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return displacement of up when drop target index is null and block is after dragged block', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: null,
+			blockDropPosition: 'bottom',
+			clientId: 'block-h',
+			firstDraggedBlockIndex: 5,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'up',
+			isAfterDraggedBlocks: true,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return displacement of normal when drop target index is null and block is before dragged block', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: null,
+			blockDropPosition: 'bottom',
+			clientId: 'block-c',
+			firstDraggedBlockIndex: 5,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'normal',
+			isAfterDraggedBlocks: false,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return displacement of normal when dragging a file (no dragged block) and the block is before the target index', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 3,
+			blockDropPosition: 'bottom',
+			clientId: 'block-b',
+			firstDraggedBlockIndex: undefined,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'normal',
+			isAfterDraggedBlocks: false,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return displacement of down when dragging a file (no dragged block) and the block is after the target index', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 3,
+			blockDropPosition: 'bottom',
+			clientId: 'block-h',
+			firstDraggedBlockIndex: undefined,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'down',
+			isAfterDraggedBlocks: false,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return displacement of normal when dragging a file (no dragged block) and dragging outside the list view (drop target of null)', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: null,
+			blockDropPosition: 'bottom',
+			clientId: 'block-h',
+			firstDraggedBlockIndex: undefined,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'normal',
+			isAfterDraggedBlocks: false,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return undefined displacement if the target index is undefined', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: undefined,
+			blockDropPosition: 'bottom',
+			clientId: 'block-h',
+			firstDraggedBlockIndex: undefined,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: undefined,
+			isAfterDraggedBlocks: false,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return all undefined values if the block is dragged', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 3,
+			blockDropPosition: 'bottom',
+			clientId: 'block-h',
+			firstDraggedBlockIndex: 7,
+			isDragged: true,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: undefined,
+			isAfterDraggedBlocks: undefined,
+			isNesting: undefined,
+		} );
+	} );
+} );

package/src/components/list-view/use-list-view-block-indexes.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+export default function useListViewBlockIndexes( blocks ) {
+	const blockIndexes = useMemo( () => {
+		const indexes = {};
+
+		let currentGlobalIndex = 0;
+
+		const traverseBlocks = ( blockList ) => {
+			blockList.forEach( ( block ) => {
+				indexes[ block.clientId ] = currentGlobalIndex;
+				currentGlobalIndex++;
+
+				if ( block.innerBlocks.length > 0 ) {
+					traverseBlocks( block.innerBlocks );
+				}
+			} );
+		};
+
+		traverseBlocks( blocks );
+
+		return indexes;
+	}, [ blocks ] );
+
+	return blockIndexes;
+}