@wordpress/block-editor 12.17.0 → 12.18.0

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;
+}

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 );
 		},
 	} );