@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

package/src/components/use-block-drop-zone/index.js

@@ -8,7 +8,10 @@ import {
 	__experimentalUseDropZone as useDropZone,
 } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
-import { isUnmodifiedDefaultBlock as getIsUnmodifiedDefaultBlock } from '@wordpress/blocks';
+import {
+	isUnmodifiedDefaultBlock as getIsUnmodifiedDefaultBlock,
+	store as blocksStore,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -20,6 +23,10 @@ import {
 } from '../../utils/math';
 import { store as blockEditorStore } from '../../store';
 
+const THRESHOLD_DISTANCE = 30;
+const MINIMUM_HEIGHT_FOR_THRESHOLD = 120;
+const MINIMUM_WIDTH_FOR_THRESHOLD = 120;
+
 /** @typedef {import('../../utils/math').WPPoint} WPPoint */
 /** @typedef {import('../use-on-block-drop/types').WPDropOperation} WPDropOperation */
 
@@ -48,24 +55,86 @@ import { store as blockEditorStore } from '../../store';
  * @param {WPBlockData[]}          blocksData  The block data list.
  * @param {WPPoint}                position    The position of the item being dragged.
  * @param {WPBlockListOrientation} orientation The orientation of the block list.
+ * @param {Object}                 options     Additional options.
  * @return {[number, WPDropOperation]} The drop target position.
  */
 export function getDropTargetPosition(
 	blocksData,
 	position,
-	orientation = 'vertical'
+	orientation = 'vertical',
+	options = {}
 ) {
 	const allowedEdges =
 		orientation === 'horizontal'
 			? [ 'left', 'right' ]
 			: [ 'top', 'bottom' ];
 
-	const isRightToLeft = isRTL();
-
 	let nearestIndex = 0;
 	let insertPosition = 'before';
 	let minDistance = Infinity;
 
+	const {
+		dropZoneElement,
+		parentBlockOrientation,
+		rootBlockIndex = 0,
+	} = options;
+
+	// Allow before/after when dragging over the top/bottom edges of the drop zone.
+	if ( dropZoneElement && parentBlockOrientation !== 'horizontal' ) {
+		const rect = dropZoneElement.getBoundingClientRect();
+		const [ distance, edge ] = getDistanceToNearestEdge( position, rect, [
+			'top',
+			'bottom',
+		] );
+
+		// If dragging over the top or bottom of the drop zone, insert the block
+		// before or after the parent block. This only applies to blocks that use
+		// a drop zone element, typically container blocks such as Group or Cover.
+		if (
+			rect.height > MINIMUM_HEIGHT_FOR_THRESHOLD &&
+			distance < THRESHOLD_DISTANCE
+		) {
+			if ( edge === 'top' ) {
+				return [ rootBlockIndex, 'before' ];
+			}
+			if ( edge === 'bottom' ) {
+				return [ rootBlockIndex + 1, 'after' ];
+			}
+		}
+	}
+
+	const isRightToLeft = isRTL();
+
+	// Allow before/after when dragging over the left/right edges of the drop zone.
+	if ( dropZoneElement && parentBlockOrientation === 'horizontal' ) {
+		const rect = dropZoneElement.getBoundingClientRect();
+		const [ distance, edge ] = getDistanceToNearestEdge( position, rect, [
+			'left',
+			'right',
+		] );
+
+		// If dragging over the left or right of the drop zone, insert the block
+		// before or after the parent block. This only applies to blocks that use
+		// a drop zone element, typically container blocks such as Group.
+		if (
+			rect.width > MINIMUM_WIDTH_FOR_THRESHOLD &&
+			distance < THRESHOLD_DISTANCE
+		) {
+			if (
+				( isRightToLeft && edge === 'right' ) ||
+				( ! isRightToLeft && edge === 'left' )
+			) {
+				return [ rootBlockIndex, 'before' ];
+			}
+			if (
+				( isRightToLeft && edge === 'left' ) ||
+				( ! isRightToLeft && edge === 'right' )
+			) {
+				return [ rootBlockIndex + 1, 'after' ];
+			}
+		}
+	}
+
 	blocksData.forEach(
 		( { isUnmodifiedDefaultBlock, getBoundingClientRect, blockIndex } ) => {
 			const rect = getBoundingClientRect();
@@ -125,6 +194,50 @@ export function getDropTargetPosition(
 	];
 }
 
+/**
+ * Check if the dragged blocks can be dropped on the target.
+ * @param {Function} getBlockType
+ * @param {Object[]} allowedBlocks
+ * @param {string[]} draggedBlockNames
+ * @param {string}   targetBlockName
+ * @return {boolean} Whether the dragged blocks can be dropped on the target.
+ */
+export function isDropTargetValid(
+	getBlockType,
+	allowedBlocks,
+	draggedBlockNames,
+	targetBlockName
+) {
+	// At root level allowedBlocks is undefined and all blocks are allowed.
+	// Otherwise, check if all dragged blocks are allowed.
+	let areBlocksAllowed = true;
+	if ( allowedBlocks ) {
+		const allowedBlockNames = allowedBlocks?.map( ( { name } ) => name );
+
+		areBlocksAllowed = draggedBlockNames.every( ( name ) =>
+			allowedBlockNames?.includes( name )
+		);
+	}
+
+	// Work out if dragged blocks have an allowed parent and if so
+	// check target block matches the allowed parent.
+	const draggedBlockTypes = draggedBlockNames.map( ( name ) =>
+		getBlockType( name )
+	);
+	const targetMatchesDraggedBlockParents = draggedBlockTypes.every(
+		( block ) => {
+			const [ allowedParentName ] = block?.parent || [];
+			if ( ! allowedParentName ) {
+				return true;
+			}
+
+			return allowedParentName === targetBlockName;
+		}
+	);
+
+	return areBlocksAllowed && targetMatchesDraggedBlockParents;
+}
+
 /**
  * @typedef  {Object} WPBlockDropZoneConfig
  * @property {?HTMLElement} dropZoneElement Optional element to be used as the drop zone.
@@ -143,6 +256,8 @@ export default function useBlockDropZone( {
 	// values returned by the `getRootBlockClientId` selector, which also uses
 	// an empty string to represent top-level blocks.
 	rootClientId: targetRootClientId = '',
+	parentClientId: parentBlockClientId = '',
+	isDisabled = false,
 } = {} ) {
 	const registry = useRegistry();
 	const [ dropTarget, setDropTarget ] = useState( {
@@ -150,34 +265,47 @@ export default function useBlockDropZone( {
 		operation: 'insert',
 	} );
 
-	const isDisabled = useSelect(
-		( select ) => {
-			const {
-				__unstableIsWithinBlockOverlay,
-				__unstableHasActiveBlockOverlayActive,
-				getBlockEditingMode,
-			} = select( blockEditorStore );
-			const blockEditingMode = getBlockEditingMode( targetRootClientId );
-			return (
-				blockEditingMode !== 'default' ||
-				__unstableHasActiveBlockOverlayActive( targetRootClientId ) ||
-				__unstableIsWithinBlockOverlay( targetRootClientId )
-			);
-		},
-		[ targetRootClientId ]
-	);
-
-	const { getBlockListSettings, getBlocks, getBlockIndex } =
-		useSelect( blockEditorStore );
+	const { getBlockType } = useSelect( blocksStore );
+	const {
+		getBlockListSettings,
+		getBlocks,
+		getBlockIndex,
+		getDraggedBlockClientIds,
+		getBlockNamesByClientId,
+		getAllowedBlocks,
+	} = useSelect( blockEditorStore );
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 
-	const onBlockDrop = useOnBlockDrop( targetRootClientId, dropTarget.index, {
-		operation: dropTarget.operation,
-	} );
+	const onBlockDrop = useOnBlockDrop(
+		dropTarget.operation === 'before' || dropTarget.operation === 'after'
+			? parentBlockClientId
+			: targetRootClientId,
+		dropTarget.index,
+		{
+			operation: dropTarget.operation,
+		}
+	);
 	const throttled = useThrottle(
 		useCallback(
 			( event, ownerDocument ) => {
+				const allowedBlocks = getAllowedBlocks( targetRootClientId );
+				const targetBlockName = getBlockNamesByClientId( [
+					targetRootClientId,
+				] )[ 0 ];
+				const draggedBlockNames = getBlockNamesByClientId(
+					getDraggedBlockClientIds()
+				);
+				const isBlockDroppingAllowed = isDropTargetValid(
+					getBlockType,
+					allowedBlocks,
+					draggedBlockNames,
+					targetBlockName
+				);
+				if ( ! isBlockDroppingAllowed ) {
+					return;
+				}
+
 				const blocks = getBlocks( targetRootClientId );
 
 				// The block list is empty, don't show the insertion point but still allow dropping.
@@ -211,7 +339,16 @@ export default function useBlockDropZone( {
 				const [ targetIndex, operation ] = getDropTargetPosition(
 					blocksData,
 					{ x: event.clientX, y: event.clientY },
-					getBlockListSettings( targetRootClientId )?.orientation
+					getBlockListSettings( targetRootClientId )?.orientation,
+					{
+						dropZoneElement,
+						parentBlockClientId,
+						parentBlockOrientation: parentBlockClientId
+							? getBlockListSettings( parentBlockClientId )
+									?.orientation
+							: undefined,
+						rootBlockIndex: getBlockIndex( targetRootClientId ),
+					}
 				);
 
 				registry.batch( () => {
@@ -219,18 +356,32 @@ export default function useBlockDropZone( {
 						index: targetIndex,
 						operation,
 					} );
-					showInsertionPoint( targetRootClientId, targetIndex, {
+
+					const insertionPointClientId = [
+						'before',
+						'after',
+					].includes( operation )
+						? parentBlockClientId
+						: targetRootClientId;
+
+					showInsertionPoint( insertionPointClientId, targetIndex, {
 						operation,
 					} );
 				} );
 			},
 			[
-				getBlocks,
+				getAllowedBlocks,
 				targetRootClientId,
+				getBlockNamesByClientId,
+				getDraggedBlockClientIds,
+				getBlockType,
+				getBlocks,
 				getBlockListSettings,
+				dropZoneElement,
+				parentBlockClientId,
+				getBlockIndex,
 				registry,
 				showInsertionPoint,
-				getBlockIndex,
 			]
 		),
 		200

package/src/components/use-moving-animation/index.js

@@ -1,35 +1,32 @@
 /**
  * External dependencies
  */
-import { useSpring } from '@react-spring/web';
+import { Controller } from '@react-spring/web';
 
 /**
  * WordPress dependencies
  */
-import {
-	useState,
-	useLayoutEffect,
-	useReducer,
-	useMemo,
-	useRef,
-} from '@wordpress/element';
-import { useReducedMotion } from '@wordpress/compose';
+import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
 import { getScrollContainer } from '@wordpress/dom';
+import { useSelect } from '@wordpress/data';
 
 /**
- * Simple reducer used to increment a counter.
- *
- * @param {number} state Previous counter value.
- * @return {number} New state value.
+ * Internal dependencies
  */
-const counterReducer = ( state ) => state + 1;
+import { store as blockEditorStore } from '../../store';
 
-const getAbsolutePosition = ( element ) => {
+/**
+ * If the block count exceeds the threshold, we disable the reordering animation
+ * to avoid laginess.
+ */
+const BLOCK_ANIMATION_THRESHOLD = 200;
+
+function getAbsolutePosition( element ) {
 	return {
 		top: element.offsetTop,
 		left: element.offsetLeft,
 	};
-};
+}
 
 /**
  * Hook used to compute the styles required to move a div into a new position.
@@ -42,114 +39,121 @@ const getAbsolutePosition = ( element ) => {
  *  - It uses the "resetAnimation" flag to reset the animation
  *    from the beginning in order to animate to the new destination point.
  *
- * @param {Object}  $1                          Options
- * @param {boolean} $1.isSelected               Whether it's the current block or not.
- * @param {boolean} $1.adjustScrolling          Adjust the scroll position to the current block.
- * @param {boolean} $1.enableAnimation          Enable/Disable animation.
- * @param {*}       $1.triggerAnimationOnChange Variable used to trigger the animation if it changes.
+ * @param {Object} $1                          Options
+ * @param {*}      $1.triggerAnimationOnChange Variable used to trigger the animation if it changes.
+ * @param {string} $1.clientId
  */
-function useMovingAnimation( {
-	isSelected,
-	adjustScrolling,
-	enableAnimation,
-	triggerAnimationOnChange,
-} ) {
+function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 	const ref = useRef();
-	const prefersReducedMotion = useReducedMotion() || ! enableAnimation;
-	const [ triggeredAnimation, triggerAnimation ] = useReducer(
-		counterReducer,
-		0
-	);
-	const [ finishedAnimation, endAnimation ] = useReducer( counterReducer, 0 );
-	const [ transform, setTransform ] = useState( { x: 0, y: 0 } );
-	const previous = useMemo(
-		() => ( ref.current ? getAbsolutePosition( ref.current ) : null ),
+	const {
+		isTyping,
+		getGlobalBlockCount,
+		isBlockSelected,
+		isFirstMultiSelectedBlock,
+		isBlockMultiSelected,
+		isAncestorMultiSelected,
+	} = useSelect( blockEditorStore );
+
+	// Whenever the trigger changes, we need to take a snapshot of the current
+	// position of the block to use it as a destination point for the animation.
+	const { previous, prevRect } = useMemo(
+		() => ( {
+			previous: ref.current && getAbsolutePosition( ref.current ),
+			prevRect: ref.current && ref.current.getBoundingClientRect(),
+		} ),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ triggerAnimationOnChange ]
 	);
 
-	// Calculate the previous position of the block relative to the viewport and
-	// return a function to maintain that position by scrolling.
-	const preserveScrollPosition = useMemo( () => {
-		if ( ! adjustScrolling || ! ref.current ) {
-			return () => {};
+	useLayoutEffect( () => {
+		if ( ! previous || ! ref.current ) {
+			return;
 		}
 
 		const scrollContainer = getScrollContainer( ref.current );
-
-		if ( ! scrollContainer ) {
-			return () => {};
-		}
-
-		const prevRect = ref.current.getBoundingClientRect();
-		return () => {
-			const blockRect = ref.current.getBoundingClientRect();
-			const diff = blockRect.top - prevRect.top;
-
-			if ( diff ) {
-				scrollContainer.scrollTop += diff;
+		const isSelected = isBlockSelected( clientId );
+		const adjustScrolling =
+			isSelected || isFirstMultiSelectedBlock( clientId );
+
+		function preserveScrollPosition() {
+			if ( adjustScrolling && prevRect ) {
+				const blockRect = ref.current.getBoundingClientRect();
+				const diff = blockRect.top - prevRect.top;
+
+				if ( diff ) {
+					scrollContainer.scrollTop += diff;
+				}
 			}
-		};
-	}, [ triggerAnimationOnChange, adjustScrolling ] );
-
-	useLayoutEffect( () => {
-		if ( triggeredAnimation ) {
-			endAnimation();
-		}
-	}, [ triggeredAnimation ] );
-	useLayoutEffect( () => {
-		if ( ! previous ) {
-			return;
 		}
 
-		if ( prefersReducedMotion ) {
+		// We disable the animation if the user has a preference for reduced
+		// motion, if the user is typing (insertion by Enter), or if the block
+		// count exceeds the threshold (insertion caused all the blocks that
+		// follow to animate).
+		// To do: consider enableing the _moving_ animation even for large
+		// posts, while only disabling the _insertion_ animation?
+		const disableAnimation =
+			window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ||
+			isTyping() ||
+			getGlobalBlockCount() > BLOCK_ANIMATION_THRESHOLD;
+
+		if ( disableAnimation ) {
 			// If the animation is disabled and the scroll needs to be adjusted,
 			// just move directly to the final scroll position.
 			preserveScrollPosition();
-
 			return;
 		}
 
+		const isPartOfSelection =
+			isSelected ||
+			isBlockMultiSelected( clientId ) ||
+			isAncestorMultiSelected( clientId );
+		// Make sure the other blocks move under the selected block(s).
+		const zIndex = isPartOfSelection ? '1' : '';
+
+		const controller = new Controller( {
+			x: 0,
+			y: 0,
+			config: { mass: 5, tension: 2000, friction: 200 },
+			onChange( { value } ) {
+				if ( ! ref.current ) {
+					return;
+				}
+				let { x, y } = value;
+				x = Math.round( x );
+				y = Math.round( y );
+				const finishedMoving = x === 0 && y === 0;
+				ref.current.style.transformOrigin = 'center center';
+				ref.current.style.transform = finishedMoving
+					? null // Set to `null` to explicitly remove the transform.
+					: `translate3d(${ x }px,${ y }px,0)`;
+				ref.current.style.zIndex = zIndex;
+				preserveScrollPosition();
+			},
+		} );
+
 		ref.current.style.transform = undefined;
 		const destination = getAbsolutePosition( ref.current );
 
-		triggerAnimation();
-		setTransform( {
-			x: Math.round( previous.left - destination.left ),
-			y: Math.round( previous.top - destination.top ),
-		} );
-	}, [ triggerAnimationOnChange ] );
+		const x = Math.round( previous.left - destination.left );
+		const y = Math.round( previous.top - destination.top );
 
-	function onChange( { value } ) {
-		if ( ! ref.current ) {
-			return;
-		}
-		let { x, y } = value;
-		x = Math.round( x );
-		y = Math.round( y );
-		const finishedMoving = x === 0 && y === 0;
-		ref.current.style.transformOrigin = 'center center';
-		ref.current.style.transform = finishedMoving
-			? null // Set to `null` to explicitly remove the transform.
-			: `translate3d(${ x }px,${ y }px,0)`;
-		ref.current.style.zIndex = isSelected ? '1' : '';
-
-		preserveScrollPosition();
-	}
-
-	useSpring( {
-		from: {
-			x: transform.x,
-			y: transform.y,
-		},
-		to: {
-			x: 0,
-			y: 0,
-		},
-		reset: triggeredAnimation !== finishedAnimation,
-		config: { mass: 5, tension: 2000, friction: 200 },
-		immediate: prefersReducedMotion,
-		onChange,
-	} );
+		controller.start( { x: 0, y: 0, from: { x, y } } );
+
+		return () => {
+			controller.stop();
+		};
+	}, [
+		previous,
+		prevRect,
+		clientId,
+		isTyping,
+		getGlobalBlockCount,
+		isBlockSelected,
+		isFirstMultiSelectedBlock,
+		isBlockMultiSelected,
+		isAncestorMultiSelected,
+	] );
 
 	return ref;
 }

package/src/components/use-on-block-drop/index.js

@@ -133,8 +133,7 @@ export function onBlockDrop(
  * A function that returns an event handler function for block-related file drop events.
  *
  * @param {string}   targetRootClientId    The root client id where the block(s) will be inserted.
- * @param {number}   targetBlockIndex      The index where the block(s) will be inserted.
- * @param {boolean}  hasUploadPermissions  Whether the user has upload permissions.
+ * @param {Function} getSettings           A function that gets the block editor settings.
  * @param {Function} updateBlockAttributes A function that updates a block's attributes.
  * @param {Function} canInsertBlockType    A function that returns checks whether a block type can be inserted.
  * @param {Function} insertOrReplaceBlocks A function that inserts or replaces blocks.
@@ -143,14 +142,13 @@ export function onBlockDrop(
  */
 export function onFilesDrop(
 	targetRootClientId,
-	targetBlockIndex,
-	hasUploadPermissions,
+	getSettings,
 	updateBlockAttributes,
 	canInsertBlockType,
 	insertOrReplaceBlocks
 ) {
 	return ( files ) => {
-		if ( ! hasUploadPermissions ) {
+		if ( ! getSettings().mediaUpload ) {
 			return;
 		}
 
@@ -175,17 +173,11 @@ export function onFilesDrop(
 /**
  * A function that returns an event handler function for block-related HTML drop events.
  *
- * @param {string}   targetRootClientId    The root client id where the block(s) will be inserted.
- * @param {number}   targetBlockIndex      The index where the block(s) will be inserted.
  * @param {Function} insertOrReplaceBlocks A function that inserts or replaces blocks.
  *
  * @return {Function} The event handler for a block-related HTML drop event.
  */
-export function onHTMLDrop(
-	targetRootClientId,
-	targetBlockIndex,
-	insertOrReplaceBlocks
-) {
+export function onHTMLDrop( insertOrReplaceBlocks ) {
 	return ( HTML ) => {
 		const blocks = pasteHandler( { HTML, mode: 'BLOCKS' } );
 
@@ -211,16 +203,13 @@ export default function useOnBlockDrop(
 	options = {}
 ) {
 	const { operation = 'insert' } = options;
-	const hasUploadPermissions = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
-		[]
-	);
 	const {
 		canInsertBlockType,
 		getBlockIndex,
 		getClientIdsOfDescendants,
 		getBlockOrder,
 		getBlocksByClientId,
+		getSettings,
 	} = useSelect( blockEditorStore );
 	const {
 		insertBlocks,
@@ -292,9 +281,10 @@ export default function useOnBlockDrop(
 			operation,
 			getBlockOrder,
 			getBlocksByClientId,
-			insertBlocks,
 			moveBlocksToPosition,
+			registry,
 			removeBlocks,
+			replaceBlocks,
 			targetBlockIndex,
 			targetRootClientId,
 		]
@@ -311,17 +301,12 @@ export default function useOnBlockDrop(
 	);
 	const _onFilesDrop = onFilesDrop(
 		targetRootClientId,
-		targetBlockIndex,
-		hasUploadPermissions,
+		getSettings,
 		updateBlockAttributes,
 		canInsertBlockType,
 		insertOrReplaceBlocks
 	);
-	const _onHTMLDrop = onHTMLDrop(
-		targetRootClientId,
-		targetBlockIndex,
-		insertOrReplaceBlocks
-	);
+	const _onHTMLDrop = onHTMLDrop( insertOrReplaceBlocks );
 
 	return ( event ) => {
 		const files = getFilesFromDataTransfer( event.dataTransfer );