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

package/src/components/url-input/index.js

@@ -66,7 +66,6 @@ class URLInput extends Component {
 		this.state = {
 			suggestions: [],
 			showSuggestions: false,
-			isUpdatingSuggestions: false,
 			suggestionsValue: null,
 			selectedSuggestion: null,
 			suggestionsListboxId: '',
@@ -102,11 +101,7 @@ class URLInput extends Component {
 		}
 
 		// Update suggestions when the value changes.
-		if (
-			prevProps.value !== value &&
-			! this.props.disableSuggestions &&
-			! this.state.isUpdatingSuggestions
-		) {
+		if ( prevProps.value !== value && ! this.props.disableSuggestions ) {
 			if ( value?.length ) {
 				// If the new value is not empty we need to update with suggestions for it.
 				this.updateSuggestions( value );
@@ -183,7 +178,6 @@ class URLInput extends Component {
 		}
 
 		this.setState( {
-			isUpdatingSuggestions: true,
 			selectedSuggestion: null,
 			loading: true,
 		} );
@@ -203,7 +197,6 @@ class URLInput extends Component {
 
 				this.setState( {
 					suggestions,
-					isUpdatingSuggestions: false,
 					suggestionsValue: value,
 					loading: false,
 					showSuggestions: !! suggestions.length,
@@ -235,9 +228,15 @@ class URLInput extends Component {
 				}
 
 				this.setState( {
-					isUpdatingSuggestions: false,
 					loading: false,
 				} );
+			} )
+			.finally( () => {
+				// If this is the current promise then reset the reference
+				// to allow for checking if a new request is made.
+				if ( this.suggestionsRequest === request ) {
+					this.suggestionsRequest = null;
+				}
 			} );
 
 		// Note that this assignment is handled *before* the async search request
@@ -255,11 +254,12 @@ class URLInput extends Component {
 
 		// When opening the link editor, if there's a value present, we want to load the suggestions pane with the results for this input search value
 		// Don't re-run the suggestions on focus if there are already suggestions present (prevents searching again when tabbing between the input and buttons)
+		// or there is already a request in progress.
 		if (
 			value &&
 			! disableSuggestions &&
-			! this.state.isUpdatingSuggestions &&
-			! ( suggestions && suggestions.length )
+			! ( suggestions && suggestions.length ) &&
+			this.suggestionsRequest === null
 		) {
 			// Ensure the suggestions are updated with the current input value.
 			this.updateSuggestions( value );

package/src/components/use-block-commands/index.js

@@ -26,40 +26,37 @@ import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
 export const useTransformCommands = () => {
-	const { clientIds } = useSelect( ( select ) => {
-		const { getSelectedBlockClientIds } = select( blockEditorStore );
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-
-		return {
-			clientIds: selectedBlockClientIds,
-		};
-	}, [] );
-	const blocks = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlocksByClientId( clientIds ),
-		[ clientIds ]
-	);
 	const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
-	const { possibleBlockTransformations, canRemove } = useSelect(
-		( select ) => {
+	const { blocks, clientIds, canRemove, possibleBlockTransformations } =
+		useSelect( ( select ) => {
 			const {
 				getBlockRootClientId,
 				getBlockTransformItems,
+				getSelectedBlockClientIds,
+				getBlocksByClientId,
 				canRemoveBlocks,
 			} = select( blockEditorStore );
+
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+			const selectedBlocks = getBlocksByClientId(
+				selectedBlockClientIds
+			);
 			const rootClientId = getBlockRootClientId(
-				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
+				selectedBlockClientIds[ 0 ]
 			);
 			return {
+				blocks: selectedBlocks,
+				clientIds: selectedBlockClientIds,
 				possibleBlockTransformations: getBlockTransformItems(
-					blocks,
+					selectedBlocks,
+					rootClientId
+				),
+				canRemove: canRemoveBlocks(
+					selectedBlockClientIds,
 					rootClientId
 				),
-				canRemove: canRemoveBlocks( clientIds, rootClientId ),
 			};
-		},
-		[ clientIds, blocks ]
-	);
+		}, [] );
 
 	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 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
@@ -191,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.
@@ -209,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( {
@@ -216,33 +265,15 @@ export default function useBlockDropZone( {
 		operation: 'insert',
 	} );
 
-	const { isDisabled, parentBlockClientId, rootBlockIndex } = useSelect(
-		( select ) => {
-			const {
-				__unstableIsWithinBlockOverlay,
-				__unstableHasActiveBlockOverlayActive,
-				getBlockIndex,
-				getBlockParents,
-				getBlockEditingMode,
-			} = select( blockEditorStore );
-			const blockEditingMode = getBlockEditingMode( targetRootClientId );
-			return {
-				parentBlockClientId:
-					getBlockParents( targetRootClientId, true )[ 0 ] || '',
-				rootBlockIndex: getBlockIndex( targetRootClientId ),
-				isDisabled:
-					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 );
 
@@ -258,6 +289,23 @@ export default function useBlockDropZone( {
 	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.
@@ -299,7 +347,7 @@ export default function useBlockDropZone( {
 							? getBlockListSettings( parentBlockClientId )
 									?.orientation
 							: undefined,
-						rootBlockIndex,
+						rootBlockIndex: getBlockIndex( targetRootClientId ),
 					}
 				);
 
@@ -322,15 +370,18 @@ export default function useBlockDropZone( {
 				} );
 			},
 			[
-				dropZoneElement,
-				getBlocks,
+				getAllowedBlocks,
 				targetRootClientId,
+				getBlockNamesByClientId,
+				getDraggedBlockClientIds,
+				getBlockType,
+				getBlocks,
 				getBlockListSettings,
+				dropZoneElement,
+				parentBlockClientId,
+				getBlockIndex,
 				registry,
 				showInsertionPoint,
-				getBlockIndex,
-				parentBlockClientId,
-				rootBlockIndex,
 			]
 		),
 		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,
@@ -312,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 );