@wordpress/block-editor 12.16.1-next.79a6196f.0 → 12.18.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;
+}

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

@@ -2,10 +2,11 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useState, useCallback } from '@wordpress/element';
+import { useState, useCallback, useEffect } from '@wordpress/element';
 import {
 	useThrottle,
 	__experimentalUseDropZone as useDropZone,
+	usePrevious,
 } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
 
@@ -304,6 +305,7 @@ export function getListViewDropTarget( blocksData, position, rtl = false ) {
 
 		return {
 			rootClientId: candidateBlockData.clientId,
+			clientId: candidateBlockData.clientId,
 			blockIndex: newBlockIndex,
 			dropPosition: 'inside',
 		};
@@ -396,15 +398,30 @@ export function getListViewDropTarget( blocksData, position, rtl = false ) {
 	};
 }
 
+// Throttle options need to be defined outside of the hook to avoid
+// re-creating the object on every render. This is due to a limitation
+// of the `useThrottle` hook, where the options object is included
+// in the dependency array for memoization.
+const EXPAND_THROTTLE_OPTIONS = {
+	leading: false, // Don't call the function immediately on the first call.
+	trailing: true, // Do call the function on the last call.
+};
+
 /**
  * A react hook for implementing a drop zone in list view.
  *
- * @param {Object}       props                   Named parameters.
- * @param {?HTMLElement} [props.dropZoneElement] Optional element to be used as the drop zone.
+ * @param {Object}       props                    Named parameters.
+ * @param {?HTMLElement} [props.dropZoneElement]  Optional element to be used as the drop zone.
+ * @param {Object}       [props.expandedState]    The expanded state of the blocks in the list view.
+ * @param {Function}     [props.setExpandedState] Function to set the expanded state of a list of block clientIds.
  *
  * @return {WPListViewDropZoneTarget} The drop target.
  */
-export default function useListViewDropZone( { dropZoneElement } ) {
+export default function useListViewDropZone( {
+	dropZoneElement,
+	expandedState,
+	setExpandedState,
+} ) {
 	const {
 		getBlockRootClientId,
 		getBlockIndex,
@@ -420,6 +437,55 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 
 	const rtl = isRTL();
 
+	const previousRootClientId = usePrevious( targetRootClientId );
+
+	const maybeExpandBlock = useCallback(
+		( _expandedState, _target ) => {
+			// If the user is attempting to drop a block inside a collapsed block,
+			// that is, using a nesting gesture flagged by 'inside' dropPosition,
+			// expand the block within the list view, if it isn't already.
+			const { rootClientId } = _target || {};
+			if ( ! rootClientId ) {
+				return;
+			}
+			if (
+				_target?.dropPosition === 'inside' &&
+				! _expandedState[ rootClientId ]
+			) {
+				setExpandedState( {
+					type: 'expand',
+					clientIds: [ rootClientId ],
+				} );
+			}
+		},
+		[ setExpandedState ]
+	);
+
+	// Throttle the maybeExpandBlock function to avoid expanding the block
+	// too quickly when the user is dragging over the block. This is to
+	// avoid expanding the block when the user is just passing over it.
+	const throttledMaybeExpandBlock = useThrottle(
+		maybeExpandBlock,
+		500,
+		EXPAND_THROTTLE_OPTIONS
+	);
+
+	useEffect( () => {
+		if (
+			target?.dropPosition !== 'inside' ||
+			previousRootClientId !== target?.rootClientId
+		) {
+			throttledMaybeExpandBlock.cancel();
+			return;
+		}
+		throttledMaybeExpandBlock( expandedState, target );
+	}, [
+		expandedState,
+		previousRootClientId,
+		target,
+		throttledMaybeExpandBlock,
+	] );
+
 	const draggedBlockClientIds = getDraggedBlockClientIds();
 	const throttled = useThrottle(
 		useCallback(
@@ -484,7 +550,7 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 				rtl,
 			]
 		),
-		200
+		50
 	);
 
 	const ref = useDropZone( {
@@ -496,6 +562,9 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 		},
 		onDragLeave() {
 			throttled.cancel();
+			// Use `null` value to indicate that the drop target is not valid,
+			// but that the drag is still active. This allows for styling rules
+			// that are active only when a user drags outside of the list view.
 			setTarget( null );
 		},
 		onDragOver( event ) {
@@ -506,7 +575,10 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 		},
 		onDragEnd() {
 			throttled.cancel();
-			setTarget( null );
+			// Use `undefined` value to indicate that the drag has concluded.
+			// This allows styling rules that are active only when a user is
+			// dragging to be removed.
+			setTarget( undefined );
 		},
 	} );
 

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

@@ -93,3 +93,119 @@ export function focusListItem( focusClientId, treeGridElementRef ) {
 		} );
 	}
 }
+
+/**
+ * Get values for the block that flag whether the block should be displaced up or down,
+ * whether the block is being nested, and whether the block appears after the dragged
+ * blocks. These values are used to determine the class names to apply to the block.
+ * The list view rows are displaced visually via CSS rules. Displacement rules:
+ * - `normal`: no displacement — used to apply a translateY of `0` so that the block
+ *  appears in its original position, and moves to that position smoothly when dragging
+ *  outside of the list view area.
+ * - `up`: the block should be displaced up, creating room beneath the block for the drop indicator.
+ * - `down`: the block should be displaced down, creating room above the block for the drop indicator.
+ *
+ * @param {Object}                props
+ * @param {Object}                props.blockIndexes           The indexes of all the blocks in the list view, keyed by clientId.
+ * @param {number|null|undefined} props.blockDropTargetIndex   The index of the block that the user is dropping to.
+ * @param {?string}               props.blockDropPosition      The position relative to the block that the user is dropping to.
+ * @param {string}                props.clientId               The client id for the current block.
+ * @param {?number}               props.firstDraggedBlockIndex The index of the first dragged block.
+ * @param {?boolean}              props.isDragged              Whether the current block is being dragged. Dragged blocks skip displacement.
+ * @return {Object} An object containing the `displacement`, `isAfterDraggedBlocks` and `isNesting` values.
+ */
+export function getDragDisplacementValues( {
+	blockIndexes,
+	blockDropTargetIndex,
+	blockDropPosition,
+	clientId,
+	firstDraggedBlockIndex,
+	isDragged,
+} ) {
+	let displacement;
+	let isNesting;
+	let isAfterDraggedBlocks;
+
+	if ( ! isDragged ) {
+		isNesting = false;
+		const thisBlockIndex = blockIndexes[ clientId ];
+		isAfterDraggedBlocks = thisBlockIndex > firstDraggedBlockIndex;
+
+		// Determine where to displace the position of the current block, relative
+		// to the blocks being dragged (in their original position) and the drop target
+		// (the position where a user is currently dragging the blocks to).
+		if (
+			blockDropTargetIndex !== undefined &&
+			blockDropTargetIndex !== null &&
+			firstDraggedBlockIndex !== undefined
+		) {
+			// If the block is being dragged and there is a valid drop target,
+			// determine if the block being rendered should be displaced up or down.
+
+			if ( thisBlockIndex !== undefined ) {
+				if (
+					thisBlockIndex >= firstDraggedBlockIndex &&
+					thisBlockIndex < blockDropTargetIndex
+				) {
+					// If the current block appears after the set of dragged blocks
+					// (in their original position), but is before the drop target,
+					// then the current block should be displaced up.
+					displacement = 'up';
+				} else if (
+					thisBlockIndex < firstDraggedBlockIndex &&
+					thisBlockIndex >= blockDropTargetIndex
+				) {
+					// If the current block appears before the set of dragged blocks
+					// (in their original position), but is after the drop target,
+					// then the current block should be displaced down.
+					displacement = 'down';
+				} else {
+					displacement = 'normal';
+				}
+				isNesting =
+					typeof blockDropTargetIndex === 'number' &&
+					blockDropTargetIndex - 1 === thisBlockIndex &&
+					blockDropPosition === 'inside';
+			}
+		} else if (
+			blockDropTargetIndex === null &&
+			firstDraggedBlockIndex !== undefined
+		) {
+			// A `null` value for `blockDropTargetIndex` indicates that the
+			// drop target is outside of the valid areas within the list view.
+			// In this case, the drag is still active, but as there is no
+			// valid drop target, we should remove the gap indicating where
+			// the block would be inserted.
+			if (
+				thisBlockIndex !== undefined &&
+				thisBlockIndex >= firstDraggedBlockIndex
+			) {
+				displacement = 'up';
+			} else {
+				displacement = 'normal';
+			}
+		} else if (
+			blockDropTargetIndex !== undefined &&
+			blockDropTargetIndex !== null &&
+			firstDraggedBlockIndex === undefined
+		) {
+			// If the blockdrop target is defined, but there are no dragged blocks,
+			// then the block should be displaced relative to the drop target.
+			if ( thisBlockIndex !== undefined ) {
+				if ( thisBlockIndex < blockDropTargetIndex ) {
+					displacement = 'normal';
+				} else {
+					displacement = 'down';
+				}
+			}
+		} else if ( blockDropTargetIndex === null ) {
+			displacement = 'normal';
+		}
+	}
+
+	return {
+		displacement,
+		isNesting,
+		isAfterDraggedBlocks,
+	};
+}

package/src/components/provider/index.js

@@ -46,7 +46,9 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 
 		return (
 			<SlotFillProvider passthrough>
-				<KeyboardShortcuts.Register />
+				{ ! settings.__unstableIsPreviewMode && (
+					<KeyboardShortcuts.Register />
+				) }
 				<BlockRefsProvider>{ children }</BlockRefsProvider>
 			</SlotFillProvider>
 		);

package/src/components/recursion-provider/README.md

@@ -11,8 +11,8 @@ To help with detecting infinite loops on the client, the `RecursionProvider` com
  * WordPress dependencies
  */
 import {
-	__experimentalRecursionProvider as RecursionProvider,
-	__experimentalUseHasRecursion as useHasRecursion,
+	RecursionProvider,
+	useHasRecursion,
 	useBlockProps,
 	Warning,
 } from '@wordpress/block-editor';

package/src/components/recursion-provider/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { createContext, useContext, useMemo } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -82,3 +83,19 @@ export function useHasRecursion( uniqueId, blockName = '' ) {
 	blockName = blockName || name;
 	return Boolean( previouslyRenderedBlocks[ blockName ]?.has( uniqueId ) );
 }
+
+export const DeprecatedExperimentalRecursionProvider = ( props ) => {
+	deprecated( 'wp.blockEditor.__experimentalRecursionProvider', {
+		since: '6.5',
+		alternative: 'wp.blockEditor.RecursionProvider',
+	} );
+	return <RecursionProvider { ...props } />;
+};
+
+export const DeprecatedExperimentalUseHasRecursion = ( props ) => {
+	deprecated( 'wp.blockEditor.__experimentalUseHasRecursion', {
+		since: '6.5',
+		alternative: 'wp.blockEditor.useHasRecursion',
+	} );
+	return useHasRecursion( ...props );
+};