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

package/build-module/components/use-block-drop-zone/index.js

@@ -5,7 +5,7 @@ import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { useCallback, useState } from '@wordpress/element';
 import { useThrottle, __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
@@ -131,6 +131,38 @@ export function getDropTargetPosition(blocksData, position, orientation = 'verti
   return [isNearestBlockUnmodifiedDefaultBlock ? nearestIndex : adjacentIndex, 'replace'];
 }
 
+/**
+ * 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.
@@ -148,7 +180,9 @@ export default function useBlockDropZone({
   // string for this so that `targetRootClientId` can be easily compared to
   // values returned by the `getRootBlockClientId` selector, which also uses
   // an empty string to represent top-level blocks.
-  rootClientId: targetRootClientId = ''
+  rootClientId: targetRootClientId = '',
+  parentClientId: parentBlockClientId = '',
+  isDisabled = false
 } = {}) {
   const registry = useRegistry();
   const [dropTarget, setDropTarget] = useState({
@@ -156,28 +190,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]);
+    getBlockType
+  } = useSelect(blocksStore);
   const {
     getBlockListSettings,
     getBlocks,
-    getBlockIndex
+    getBlockIndex,
+    getDraggedBlockClientIds,
+    getBlockNamesByClientId,
+    getAllowedBlocks
   } = useSelect(blockEditorStore);
   const {
     showInsertionPoint,
@@ -187,6 +208,13 @@ export default function useBlockDropZone({
     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.
@@ -217,7 +245,7 @@ export default function useBlockDropZone({
       dropZoneElement,
       parentBlockClientId,
       parentBlockOrientation: parentBlockClientId ? getBlockListSettings(parentBlockClientId)?.orientation : undefined,
-      rootBlockIndex
+      rootBlockIndex: getBlockIndex(targetRootClientId)
     });
     registry.batch(() => {
       setDropTarget({
@@ -229,7 +257,7 @@ export default function useBlockDropZone({
         operation
       });
     });
-  }, [dropZoneElement, getBlocks, targetRootClientId, getBlockListSettings, registry, showInsertionPoint, getBlockIndex, parentBlockClientId, rootBlockIndex]), 200);
+  }, [getAllowedBlocks, targetRootClientId, getBlockNamesByClientId, getDraggedBlockClientIds, getBlockType, getBlocks, getBlockListSettings, dropZoneElement, parentBlockClientId, getBlockIndex, registry, showInsertionPoint]), 200);
   return useDropZone({
     dropZoneElement,
     isDisabled,

package/build-module/components/use-block-drop-zone/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useDispatch","useSelect","useRegistry","useCallback","useState","useThrottle","__experimentalUseDropZone","useDropZone","isRTL","isUnmodifiedDefaultBlock","getIsUnmodifiedDefaultBlock","useOnBlockDrop","getDistanceToNearestEdge","isPointContainedByRect","store","blockEditorStore","THRESHOLD_DISTANCE","MINIMUM_HEIGHT_FOR_THRESHOLD","MINIMUM_WIDTH_FOR_THRESHOLD","getDropTargetPosition","blocksData","position","orientation","options","allowedEdges","nearestIndex","insertPosition","minDistance","Infinity","dropZoneElement","parentBlockOrientation","rootBlockIndex","rect","getBoundingClientRect","distance","edge","height","isRightToLeft","width","forEach","blockIndex","adjacentIndex","isNearestBlockUnmodifiedDefaultBlock","isAdjacentBlockUnmodifiedDefaultBlock","insertionIndex","useBlockDropZone","rootClientId","targetRootClientId","registry","dropTarget","setDropTarget","index","operation","isDisabled","parentBlockClientId","select","__unstableIsWithinBlockOverlay","__unstableHasActiveBlockOverlayActive","getBlockIndex","getBlockParents","getBlockEditingMode","blockEditingMode","getBlockListSettings","getBlocks","showInsertionPoint","hideInsertionPoint","onBlockDrop","throttled","event","ownerDocument","blocks","length","batch","map","block","clientId","getElementById","targetIndex","x","clientX","y","clientY","undefined","insertionPointClientId","includes","onDrop","onDragOver","currentTarget","onDragLeave","cancel","onDragEnd"],"sources":["@wordpress/block-editor/src/components/use-block-drop-zone/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect, useRegistry } from '@wordpress/data';\nimport { useCallback, useState } from '@wordpress/element';\nimport {\n\tuseThrottle,\n\t__experimentalUseDropZone as useDropZone,\n} from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { isUnmodifiedDefaultBlock as getIsUnmodifiedDefaultBlock } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport useOnBlockDrop from '../use-on-block-drop';\nimport {\n\tgetDistanceToNearestEdge,\n\tisPointContainedByRect,\n} from '../../utils/math';\nimport { store as blockEditorStore } from '../../store';\n\nconst THRESHOLD_DISTANCE = 30;\nconst MINIMUM_HEIGHT_FOR_THRESHOLD = 120;\nconst MINIMUM_WIDTH_FOR_THRESHOLD = 120;\n\n/** @typedef {import('../../utils/math').WPPoint} WPPoint */\n/** @typedef {import('../use-on-block-drop/types').WPDropOperation} WPDropOperation */\n\n/**\n * The orientation of a block list.\n *\n * @typedef {'horizontal'|'vertical'|undefined} WPBlockListOrientation\n */\n\n/**\n * The insert position when dropping a block.\n *\n * @typedef {'before'|'after'} WPInsertPosition\n */\n\n/**\n * @typedef {Object} WPBlockData\n * @property {boolean}       isUnmodifiedDefaultBlock Is the block unmodified default block.\n * @property {() => DOMRect} getBoundingClientRect    Get the bounding client rect of the block.\n * @property {number}        blockIndex               The index of the block.\n */\n\n/**\n * Get the drop target position from a given drop point and the orientation.\n *\n * @param {WPBlockData[]}          blocksData  The block data list.\n * @param {WPPoint}                position    The position of the item being dragged.\n * @param {WPBlockListOrientation} orientation The orientation of the block list.\n * @param {Object}                 options     Additional options.\n * @return {[number, WPDropOperation]} The drop target position.\n */\nexport function getDropTargetPosition(\n\tblocksData,\n\tposition,\n\torientation = 'vertical',\n\toptions = {}\n) {\n\tconst allowedEdges =\n\t\torientation === 'horizontal'\n\t\t\t? [ 'left', 'right' ]\n\t\t\t: [ 'top', 'bottom' ];\n\n\tlet nearestIndex = 0;\n\tlet insertPosition = 'before';\n\tlet minDistance = Infinity;\n\n\tconst {\n\t\tdropZoneElement,\n\t\tparentBlockOrientation,\n\t\trootBlockIndex = 0,\n\t} = options;\n\n\t// Allow before/after when dragging over the top/bottom edges of the drop zone.\n\tif ( dropZoneElement && parentBlockOrientation !== 'horizontal' ) {\n\t\tconst rect = dropZoneElement.getBoundingClientRect();\n\t\tconst [ distance, edge ] = getDistanceToNearestEdge( position, rect, [\n\t\t\t'top',\n\t\t\t'bottom',\n\t\t] );\n\n\t\t// If dragging over the top or bottom of the drop zone, insert the block\n\t\t// before or after the parent block. This only applies to blocks that use\n\t\t// a drop zone element, typically container blocks such as Group or Cover.\n\t\tif (\n\t\t\trect.height > MINIMUM_HEIGHT_FOR_THRESHOLD &&\n\t\t\tdistance < THRESHOLD_DISTANCE\n\t\t) {\n\t\t\tif ( edge === 'top' ) {\n\t\t\t\treturn [ rootBlockIndex, 'before' ];\n\t\t\t}\n\t\t\tif ( edge === 'bottom' ) {\n\t\t\t\treturn [ rootBlockIndex + 1, 'after' ];\n\t\t\t}\n\t\t}\n\t}\n\n\tconst isRightToLeft = isRTL();\n\n\t// Allow before/after when dragging over the left/right edges of the drop zone.\n\tif ( dropZoneElement && parentBlockOrientation === 'horizontal' ) {\n\t\tconst rect = dropZoneElement.getBoundingClientRect();\n\t\tconst [ distance, edge ] = getDistanceToNearestEdge( position, rect, [\n\t\t\t'left',\n\t\t\t'right',\n\t\t] );\n\n\t\t// If dragging over the left or right of the drop zone, insert the block\n\t\t// before or after the parent block. This only applies to blocks that use\n\t\t// a drop zone element, typically container blocks such as Group.\n\t\tif (\n\t\t\trect.width > MINIMUM_WIDTH_FOR_THRESHOLD &&\n\t\t\tdistance < THRESHOLD_DISTANCE\n\t\t) {\n\t\t\tif (\n\t\t\t\t( isRightToLeft && edge === 'right' ) ||\n\t\t\t\t( ! isRightToLeft && edge === 'left' )\n\t\t\t) {\n\t\t\t\treturn [ rootBlockIndex, 'before' ];\n\t\t\t}\n\t\t\tif (\n\t\t\t\t( isRightToLeft && edge === 'left' ) ||\n\t\t\t\t( ! isRightToLeft && edge === 'right' )\n\t\t\t) {\n\t\t\t\treturn [ rootBlockIndex + 1, 'after' ];\n\t\t\t}\n\t\t}\n\t}\n\n\tblocksData.forEach(\n\t\t( { isUnmodifiedDefaultBlock, getBoundingClientRect, blockIndex } ) => {\n\t\t\tconst rect = getBoundingClientRect();\n\n\t\t\tlet [ distance, edge ] = getDistanceToNearestEdge(\n\t\t\t\tposition,\n\t\t\t\trect,\n\t\t\t\tallowedEdges\n\t\t\t);\n\t\t\t// Prioritize the element if the point is inside of an unmodified default block.\n\t\t\tif (\n\t\t\t\tisUnmodifiedDefaultBlock &&\n\t\t\t\tisPointContainedByRect( position, rect )\n\t\t\t) {\n\t\t\t\tdistance = 0;\n\t\t\t}\n\n\t\t\tif ( distance < minDistance ) {\n\t\t\t\t// Where the dropped block will be inserted on the nearest block.\n\t\t\t\tinsertPosition =\n\t\t\t\t\tedge === 'bottom' ||\n\t\t\t\t\t( ! isRightToLeft && edge === 'right' ) ||\n\t\t\t\t\t( isRightToLeft && edge === 'left' )\n\t\t\t\t\t\t? 'after'\n\t\t\t\t\t\t: 'before';\n\n\t\t\t\t// Update the currently known best candidate.\n\t\t\t\tminDistance = distance;\n\t\t\t\tnearestIndex = blockIndex;\n\t\t\t}\n\t\t}\n\t);\n\n\tconst adjacentIndex =\n\t\tnearestIndex + ( insertPosition === 'after' ? 1 : -1 );\n\tconst isNearestBlockUnmodifiedDefaultBlock =\n\t\t!! blocksData[ nearestIndex ]?.isUnmodifiedDefaultBlock;\n\tconst isAdjacentBlockUnmodifiedDefaultBlock =\n\t\t!! blocksData[ adjacentIndex ]?.isUnmodifiedDefaultBlock;\n\n\t// If both blocks are not unmodified default blocks then just insert between them.\n\tif (\n\t\t! isNearestBlockUnmodifiedDefaultBlock &&\n\t\t! isAdjacentBlockUnmodifiedDefaultBlock\n\t) {\n\t\t// If the user is dropping to the trailing edge of the block\n\t\t// add 1 to the index to represent dragging after.\n\t\tconst insertionIndex =\n\t\t\tinsertPosition === 'after' ? nearestIndex + 1 : nearestIndex;\n\t\treturn [ insertionIndex, 'insert' ];\n\t}\n\n\t// Otherwise, replace the nearest unmodified default block.\n\treturn [\n\t\tisNearestBlockUnmodifiedDefaultBlock ? nearestIndex : adjacentIndex,\n\t\t'replace',\n\t];\n}\n\n/**\n * @typedef  {Object} WPBlockDropZoneConfig\n * @property {?HTMLElement} dropZoneElement Optional element to be used as the drop zone.\n * @property {string}       rootClientId    The root client id for the block list.\n */\n\n/**\n * A React hook that can be used to make a block list handle drag and drop.\n *\n * @param {WPBlockDropZoneConfig} dropZoneConfig configuration data for the drop zone.\n */\nexport default function useBlockDropZone( {\n\tdropZoneElement,\n\t// An undefined value represents a top-level block. Default to an empty\n\t// string for this so that `targetRootClientId` can be easily compared to\n\t// values returned by the `getRootBlockClientId` selector, which also uses\n\t// an empty string to represent top-level blocks.\n\trootClientId: targetRootClientId = '',\n} = {} ) {\n\tconst registry = useRegistry();\n\tconst [ dropTarget, setDropTarget ] = useState( {\n\t\tindex: null,\n\t\toperation: 'insert',\n\t} );\n\n\tconst { isDisabled, parentBlockClientId, rootBlockIndex } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\t__unstableIsWithinBlockOverlay,\n\t\t\t\t__unstableHasActiveBlockOverlayActive,\n\t\t\t\tgetBlockIndex,\n\t\t\t\tgetBlockParents,\n\t\t\t\tgetBlockEditingMode,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst blockEditingMode = getBlockEditingMode( targetRootClientId );\n\t\t\treturn {\n\t\t\t\tparentBlockClientId:\n\t\t\t\t\tgetBlockParents( targetRootClientId, true )[ 0 ] || '',\n\t\t\t\trootBlockIndex: getBlockIndex( targetRootClientId ),\n\t\t\t\tisDisabled:\n\t\t\t\t\tblockEditingMode !== 'default' ||\n\t\t\t\t\t__unstableHasActiveBlockOverlayActive(\n\t\t\t\t\t\ttargetRootClientId\n\t\t\t\t\t) ||\n\t\t\t\t\t__unstableIsWithinBlockOverlay( targetRootClientId ),\n\t\t\t};\n\t\t},\n\t\t[ targetRootClientId ]\n\t);\n\n\tconst { getBlockListSettings, getBlocks, getBlockIndex } =\n\t\tuseSelect( blockEditorStore );\n\tconst { showInsertionPoint, hideInsertionPoint } =\n\t\tuseDispatch( blockEditorStore );\n\n\tconst onBlockDrop = useOnBlockDrop(\n\t\tdropTarget.operation === 'before' || dropTarget.operation === 'after'\n\t\t\t? parentBlockClientId\n\t\t\t: targetRootClientId,\n\t\tdropTarget.index,\n\t\t{\n\t\t\toperation: dropTarget.operation,\n\t\t}\n\t);\n\tconst throttled = useThrottle(\n\t\tuseCallback(\n\t\t\t( event, ownerDocument ) => {\n\t\t\t\tconst blocks = getBlocks( targetRootClientId );\n\n\t\t\t\t// The block list is empty, don't show the insertion point but still allow dropping.\n\t\t\t\tif ( blocks.length === 0 ) {\n\t\t\t\t\tregistry.batch( () => {\n\t\t\t\t\t\tsetDropTarget( {\n\t\t\t\t\t\t\tindex: 0,\n\t\t\t\t\t\t\toperation: 'insert',\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tshowInsertionPoint( targetRootClientId, 0, {\n\t\t\t\t\t\t\toperation: 'insert',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst blocksData = blocks.map( ( block ) => {\n\t\t\t\t\tconst clientId = block.clientId;\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\tisUnmodifiedDefaultBlock:\n\t\t\t\t\t\t\tgetIsUnmodifiedDefaultBlock( block ),\n\t\t\t\t\t\tgetBoundingClientRect: () =>\n\t\t\t\t\t\t\townerDocument\n\t\t\t\t\t\t\t\t.getElementById( `block-${ clientId }` )\n\t\t\t\t\t\t\t\t.getBoundingClientRect(),\n\t\t\t\t\t\tblockIndex: getBlockIndex( clientId ),\n\t\t\t\t\t};\n\t\t\t\t} );\n\n\t\t\t\tconst [ targetIndex, operation ] = getDropTargetPosition(\n\t\t\t\t\tblocksData,\n\t\t\t\t\t{ x: event.clientX, y: event.clientY },\n\t\t\t\t\tgetBlockListSettings( targetRootClientId )?.orientation,\n\t\t\t\t\t{\n\t\t\t\t\t\tdropZoneElement,\n\t\t\t\t\t\tparentBlockClientId,\n\t\t\t\t\t\tparentBlockOrientation: parentBlockClientId\n\t\t\t\t\t\t\t? getBlockListSettings( parentBlockClientId )\n\t\t\t\t\t\t\t\t\t?.orientation\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\trootBlockIndex,\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\tregistry.batch( () => {\n\t\t\t\t\tsetDropTarget( {\n\t\t\t\t\t\tindex: targetIndex,\n\t\t\t\t\t\toperation,\n\t\t\t\t\t} );\n\n\t\t\t\t\tconst insertionPointClientId = [\n\t\t\t\t\t\t'before',\n\t\t\t\t\t\t'after',\n\t\t\t\t\t].includes( operation )\n\t\t\t\t\t\t? parentBlockClientId\n\t\t\t\t\t\t: targetRootClientId;\n\n\t\t\t\t\tshowInsertionPoint( insertionPointClientId, targetIndex, {\n\t\t\t\t\t\toperation,\n\t\t\t\t\t} );\n\t\t\t\t} );\n\t\t\t},\n\t\t\t[\n\t\t\t\tdropZoneElement,\n\t\t\t\tgetBlocks,\n\t\t\t\ttargetRootClientId,\n\t\t\t\tgetBlockListSettings,\n\t\t\t\tregistry,\n\t\t\t\tshowInsertionPoint,\n\t\t\t\tgetBlockIndex,\n\t\t\t\tparentBlockClientId,\n\t\t\t\trootBlockIndex,\n\t\t\t]\n\t\t),\n\t\t200\n\t);\n\n\treturn useDropZone( {\n\t\tdropZoneElement,\n\t\tisDisabled,\n\t\tonDrop: onBlockDrop,\n\t\tonDragOver( event ) {\n\t\t\t// `currentTarget` is only available while the event is being\n\t\t\t// handled, so get it now and pass it to the thottled function.\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget\n\t\t\tthrottled( event, event.currentTarget.ownerDocument );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tthrottled.cancel();\n\t\t\thideInsertionPoint();\n\t\t},\n\t\tonDragEnd() {\n\t\t\tthrottled.cancel();\n\t\t\thideInsertionPoint();\n\t\t},\n\t} );\n}\n"],"mappings":"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"}
+{"version":3,"names":["useDispatch","useSelect","useRegistry","useCallback","useState","useThrottle","__experimentalUseDropZone","useDropZone","isRTL","isUnmodifiedDefaultBlock","getIsUnmodifiedDefaultBlock","store","blocksStore","useOnBlockDrop","getDistanceToNearestEdge","isPointContainedByRect","blockEditorStore","THRESHOLD_DISTANCE","MINIMUM_HEIGHT_FOR_THRESHOLD","MINIMUM_WIDTH_FOR_THRESHOLD","getDropTargetPosition","blocksData","position","orientation","options","allowedEdges","nearestIndex","insertPosition","minDistance","Infinity","dropZoneElement","parentBlockOrientation","rootBlockIndex","rect","getBoundingClientRect","distance","edge","height","isRightToLeft","width","forEach","blockIndex","adjacentIndex","isNearestBlockUnmodifiedDefaultBlock","isAdjacentBlockUnmodifiedDefaultBlock","insertionIndex","isDropTargetValid","getBlockType","allowedBlocks","draggedBlockNames","targetBlockName","areBlocksAllowed","allowedBlockNames","map","name","every","includes","draggedBlockTypes","targetMatchesDraggedBlockParents","block","allowedParentName","parent","useBlockDropZone","rootClientId","targetRootClientId","parentClientId","parentBlockClientId","isDisabled","registry","dropTarget","setDropTarget","index","operation","getBlockListSettings","getBlocks","getBlockIndex","getDraggedBlockClientIds","getBlockNamesByClientId","getAllowedBlocks","showInsertionPoint","hideInsertionPoint","onBlockDrop","throttled","event","ownerDocument","isBlockDroppingAllowed","blocks","length","batch","clientId","getElementById","targetIndex","x","clientX","y","clientY","undefined","insertionPointClientId","onDrop","onDragOver","currentTarget","onDragLeave","cancel","onDragEnd"],"sources":["@wordpress/block-editor/src/components/use-block-drop-zone/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect, useRegistry } from '@wordpress/data';\nimport { useCallback, useState } from '@wordpress/element';\nimport {\n\tuseThrottle,\n\t__experimentalUseDropZone as useDropZone,\n} from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport {\n\tisUnmodifiedDefaultBlock as getIsUnmodifiedDefaultBlock,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport useOnBlockDrop from '../use-on-block-drop';\nimport {\n\tgetDistanceToNearestEdge,\n\tisPointContainedByRect,\n} from '../../utils/math';\nimport { store as blockEditorStore } from '../../store';\n\nconst THRESHOLD_DISTANCE = 30;\nconst MINIMUM_HEIGHT_FOR_THRESHOLD = 120;\nconst MINIMUM_WIDTH_FOR_THRESHOLD = 120;\n\n/** @typedef {import('../../utils/math').WPPoint} WPPoint */\n/** @typedef {import('../use-on-block-drop/types').WPDropOperation} WPDropOperation */\n\n/**\n * The orientation of a block list.\n *\n * @typedef {'horizontal'|'vertical'|undefined} WPBlockListOrientation\n */\n\n/**\n * The insert position when dropping a block.\n *\n * @typedef {'before'|'after'} WPInsertPosition\n */\n\n/**\n * @typedef {Object} WPBlockData\n * @property {boolean}       isUnmodifiedDefaultBlock Is the block unmodified default block.\n * @property {() => DOMRect} getBoundingClientRect    Get the bounding client rect of the block.\n * @property {number}        blockIndex               The index of the block.\n */\n\n/**\n * Get the drop target position from a given drop point and the orientation.\n *\n * @param {WPBlockData[]}          blocksData  The block data list.\n * @param {WPPoint}                position    The position of the item being dragged.\n * @param {WPBlockListOrientation} orientation The orientation of the block list.\n * @param {Object}                 options     Additional options.\n * @return {[number, WPDropOperation]} The drop target position.\n */\nexport function getDropTargetPosition(\n\tblocksData,\n\tposition,\n\torientation = 'vertical',\n\toptions = {}\n) {\n\tconst allowedEdges =\n\t\torientation === 'horizontal'\n\t\t\t? [ 'left', 'right' ]\n\t\t\t: [ 'top', 'bottom' ];\n\n\tlet nearestIndex = 0;\n\tlet insertPosition = 'before';\n\tlet minDistance = Infinity;\n\n\tconst {\n\t\tdropZoneElement,\n\t\tparentBlockOrientation,\n\t\trootBlockIndex = 0,\n\t} = options;\n\n\t// Allow before/after when dragging over the top/bottom edges of the drop zone.\n\tif ( dropZoneElement && parentBlockOrientation !== 'horizontal' ) {\n\t\tconst rect = dropZoneElement.getBoundingClientRect();\n\t\tconst [ distance, edge ] = getDistanceToNearestEdge( position, rect, [\n\t\t\t'top',\n\t\t\t'bottom',\n\t\t] );\n\n\t\t// If dragging over the top or bottom of the drop zone, insert the block\n\t\t// before or after the parent block. This only applies to blocks that use\n\t\t// a drop zone element, typically container blocks such as Group or Cover.\n\t\tif (\n\t\t\trect.height > MINIMUM_HEIGHT_FOR_THRESHOLD &&\n\t\t\tdistance < THRESHOLD_DISTANCE\n\t\t) {\n\t\t\tif ( edge === 'top' ) {\n\t\t\t\treturn [ rootBlockIndex, 'before' ];\n\t\t\t}\n\t\t\tif ( edge === 'bottom' ) {\n\t\t\t\treturn [ rootBlockIndex + 1, 'after' ];\n\t\t\t}\n\t\t}\n\t}\n\n\tconst isRightToLeft = isRTL();\n\n\t// Allow before/after when dragging over the left/right edges of the drop zone.\n\tif ( dropZoneElement && parentBlockOrientation === 'horizontal' ) {\n\t\tconst rect = dropZoneElement.getBoundingClientRect();\n\t\tconst [ distance, edge ] = getDistanceToNearestEdge( position, rect, [\n\t\t\t'left',\n\t\t\t'right',\n\t\t] );\n\n\t\t// If dragging over the left or right of the drop zone, insert the block\n\t\t// before or after the parent block. This only applies to blocks that use\n\t\t// a drop zone element, typically container blocks such as Group.\n\t\tif (\n\t\t\trect.width > MINIMUM_WIDTH_FOR_THRESHOLD &&\n\t\t\tdistance < THRESHOLD_DISTANCE\n\t\t) {\n\t\t\tif (\n\t\t\t\t( isRightToLeft && edge === 'right' ) ||\n\t\t\t\t( ! isRightToLeft && edge === 'left' )\n\t\t\t) {\n\t\t\t\treturn [ rootBlockIndex, 'before' ];\n\t\t\t}\n\t\t\tif (\n\t\t\t\t( isRightToLeft && edge === 'left' ) ||\n\t\t\t\t( ! isRightToLeft && edge === 'right' )\n\t\t\t) {\n\t\t\t\treturn [ rootBlockIndex + 1, 'after' ];\n\t\t\t}\n\t\t}\n\t}\n\n\tblocksData.forEach(\n\t\t( { isUnmodifiedDefaultBlock, getBoundingClientRect, blockIndex } ) => {\n\t\t\tconst rect = getBoundingClientRect();\n\n\t\t\tlet [ distance, edge ] = getDistanceToNearestEdge(\n\t\t\t\tposition,\n\t\t\t\trect,\n\t\t\t\tallowedEdges\n\t\t\t);\n\t\t\t// Prioritize the element if the point is inside of an unmodified default block.\n\t\t\tif (\n\t\t\t\tisUnmodifiedDefaultBlock &&\n\t\t\t\tisPointContainedByRect( position, rect )\n\t\t\t) {\n\t\t\t\tdistance = 0;\n\t\t\t}\n\n\t\t\tif ( distance < minDistance ) {\n\t\t\t\t// Where the dropped block will be inserted on the nearest block.\n\t\t\t\tinsertPosition =\n\t\t\t\t\tedge === 'bottom' ||\n\t\t\t\t\t( ! isRightToLeft && edge === 'right' ) ||\n\t\t\t\t\t( isRightToLeft && edge === 'left' )\n\t\t\t\t\t\t? 'after'\n\t\t\t\t\t\t: 'before';\n\n\t\t\t\t// Update the currently known best candidate.\n\t\t\t\tminDistance = distance;\n\t\t\t\tnearestIndex = blockIndex;\n\t\t\t}\n\t\t}\n\t);\n\n\tconst adjacentIndex =\n\t\tnearestIndex + ( insertPosition === 'after' ? 1 : -1 );\n\tconst isNearestBlockUnmodifiedDefaultBlock =\n\t\t!! blocksData[ nearestIndex ]?.isUnmodifiedDefaultBlock;\n\tconst isAdjacentBlockUnmodifiedDefaultBlock =\n\t\t!! blocksData[ adjacentIndex ]?.isUnmodifiedDefaultBlock;\n\n\t// If both blocks are not unmodified default blocks then just insert between them.\n\tif (\n\t\t! isNearestBlockUnmodifiedDefaultBlock &&\n\t\t! isAdjacentBlockUnmodifiedDefaultBlock\n\t) {\n\t\t// If the user is dropping to the trailing edge of the block\n\t\t// add 1 to the index to represent dragging after.\n\t\tconst insertionIndex =\n\t\t\tinsertPosition === 'after' ? nearestIndex + 1 : nearestIndex;\n\t\treturn [ insertionIndex, 'insert' ];\n\t}\n\n\t// Otherwise, replace the nearest unmodified default block.\n\treturn [\n\t\tisNearestBlockUnmodifiedDefaultBlock ? nearestIndex : adjacentIndex,\n\t\t'replace',\n\t];\n}\n\n/**\n * Check if the dragged blocks can be dropped on the target.\n * @param {Function} getBlockType\n * @param {Object[]} allowedBlocks\n * @param {string[]} draggedBlockNames\n * @param {string}   targetBlockName\n * @return {boolean} Whether the dragged blocks can be dropped on the target.\n */\nexport function isDropTargetValid(\n\tgetBlockType,\n\tallowedBlocks,\n\tdraggedBlockNames,\n\ttargetBlockName\n) {\n\t// At root level allowedBlocks is undefined and all blocks are allowed.\n\t// Otherwise, check if all dragged blocks are allowed.\n\tlet areBlocksAllowed = true;\n\tif ( allowedBlocks ) {\n\t\tconst allowedBlockNames = allowedBlocks?.map( ( { name } ) => name );\n\n\t\tareBlocksAllowed = draggedBlockNames.every( ( name ) =>\n\t\t\tallowedBlockNames?.includes( name )\n\t\t);\n\t}\n\n\t// Work out if dragged blocks have an allowed parent and if so\n\t// check target block matches the allowed parent.\n\tconst draggedBlockTypes = draggedBlockNames.map( ( name ) =>\n\t\tgetBlockType( name )\n\t);\n\tconst targetMatchesDraggedBlockParents = draggedBlockTypes.every(\n\t\t( block ) => {\n\t\t\tconst [ allowedParentName ] = block?.parent || [];\n\t\t\tif ( ! allowedParentName ) {\n\t\t\t\treturn true;\n\t\t\t}\n\n\t\t\treturn allowedParentName === targetBlockName;\n\t\t}\n\t);\n\n\treturn areBlocksAllowed && targetMatchesDraggedBlockParents;\n}\n\n/**\n * @typedef  {Object} WPBlockDropZoneConfig\n * @property {?HTMLElement} dropZoneElement Optional element to be used as the drop zone.\n * @property {string}       rootClientId    The root client id for the block list.\n */\n\n/**\n * A React hook that can be used to make a block list handle drag and drop.\n *\n * @param {WPBlockDropZoneConfig} dropZoneConfig configuration data for the drop zone.\n */\nexport default function useBlockDropZone( {\n\tdropZoneElement,\n\t// An undefined value represents a top-level block. Default to an empty\n\t// string for this so that `targetRootClientId` can be easily compared to\n\t// values returned by the `getRootBlockClientId` selector, which also uses\n\t// an empty string to represent top-level blocks.\n\trootClientId: targetRootClientId = '',\n\tparentClientId: parentBlockClientId = '',\n\tisDisabled = false,\n} = {} ) {\n\tconst registry = useRegistry();\n\tconst [ dropTarget, setDropTarget ] = useState( {\n\t\tindex: null,\n\t\toperation: 'insert',\n\t} );\n\n\tconst { getBlockType } = useSelect( blocksStore );\n\tconst {\n\t\tgetBlockListSettings,\n\t\tgetBlocks,\n\t\tgetBlockIndex,\n\t\tgetDraggedBlockClientIds,\n\t\tgetBlockNamesByClientId,\n\t\tgetAllowedBlocks,\n\t} = useSelect( blockEditorStore );\n\tconst { showInsertionPoint, hideInsertionPoint } =\n\t\tuseDispatch( blockEditorStore );\n\n\tconst onBlockDrop = useOnBlockDrop(\n\t\tdropTarget.operation === 'before' || dropTarget.operation === 'after'\n\t\t\t? parentBlockClientId\n\t\t\t: targetRootClientId,\n\t\tdropTarget.index,\n\t\t{\n\t\t\toperation: dropTarget.operation,\n\t\t}\n\t);\n\tconst throttled = useThrottle(\n\t\tuseCallback(\n\t\t\t( event, ownerDocument ) => {\n\t\t\t\tconst allowedBlocks = getAllowedBlocks( targetRootClientId );\n\t\t\t\tconst targetBlockName = getBlockNamesByClientId( [\n\t\t\t\t\ttargetRootClientId,\n\t\t\t\t] )[ 0 ];\n\t\t\t\tconst draggedBlockNames = getBlockNamesByClientId(\n\t\t\t\t\tgetDraggedBlockClientIds()\n\t\t\t\t);\n\t\t\t\tconst isBlockDroppingAllowed = isDropTargetValid(\n\t\t\t\t\tgetBlockType,\n\t\t\t\t\tallowedBlocks,\n\t\t\t\t\tdraggedBlockNames,\n\t\t\t\t\ttargetBlockName\n\t\t\t\t);\n\t\t\t\tif ( ! isBlockDroppingAllowed ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst blocks = getBlocks( targetRootClientId );\n\n\t\t\t\t// The block list is empty, don't show the insertion point but still allow dropping.\n\t\t\t\tif ( blocks.length === 0 ) {\n\t\t\t\t\tregistry.batch( () => {\n\t\t\t\t\t\tsetDropTarget( {\n\t\t\t\t\t\t\tindex: 0,\n\t\t\t\t\t\t\toperation: 'insert',\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tshowInsertionPoint( targetRootClientId, 0, {\n\t\t\t\t\t\t\toperation: 'insert',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst blocksData = blocks.map( ( block ) => {\n\t\t\t\t\tconst clientId = block.clientId;\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\tisUnmodifiedDefaultBlock:\n\t\t\t\t\t\t\tgetIsUnmodifiedDefaultBlock( block ),\n\t\t\t\t\t\tgetBoundingClientRect: () =>\n\t\t\t\t\t\t\townerDocument\n\t\t\t\t\t\t\t\t.getElementById( `block-${ clientId }` )\n\t\t\t\t\t\t\t\t.getBoundingClientRect(),\n\t\t\t\t\t\tblockIndex: getBlockIndex( clientId ),\n\t\t\t\t\t};\n\t\t\t\t} );\n\n\t\t\t\tconst [ targetIndex, operation ] = getDropTargetPosition(\n\t\t\t\t\tblocksData,\n\t\t\t\t\t{ x: event.clientX, y: event.clientY },\n\t\t\t\t\tgetBlockListSettings( targetRootClientId )?.orientation,\n\t\t\t\t\t{\n\t\t\t\t\t\tdropZoneElement,\n\t\t\t\t\t\tparentBlockClientId,\n\t\t\t\t\t\tparentBlockOrientation: parentBlockClientId\n\t\t\t\t\t\t\t? getBlockListSettings( parentBlockClientId )\n\t\t\t\t\t\t\t\t\t?.orientation\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\trootBlockIndex: getBlockIndex( targetRootClientId ),\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\tregistry.batch( () => {\n\t\t\t\t\tsetDropTarget( {\n\t\t\t\t\t\tindex: targetIndex,\n\t\t\t\t\t\toperation,\n\t\t\t\t\t} );\n\n\t\t\t\t\tconst insertionPointClientId = [\n\t\t\t\t\t\t'before',\n\t\t\t\t\t\t'after',\n\t\t\t\t\t].includes( operation )\n\t\t\t\t\t\t? parentBlockClientId\n\t\t\t\t\t\t: targetRootClientId;\n\n\t\t\t\t\tshowInsertionPoint( insertionPointClientId, targetIndex, {\n\t\t\t\t\t\toperation,\n\t\t\t\t\t} );\n\t\t\t\t} );\n\t\t\t},\n\t\t\t[\n\t\t\t\tgetAllowedBlocks,\n\t\t\t\ttargetRootClientId,\n\t\t\t\tgetBlockNamesByClientId,\n\t\t\t\tgetDraggedBlockClientIds,\n\t\t\t\tgetBlockType,\n\t\t\t\tgetBlocks,\n\t\t\t\tgetBlockListSettings,\n\t\t\t\tdropZoneElement,\n\t\t\t\tparentBlockClientId,\n\t\t\t\tgetBlockIndex,\n\t\t\t\tregistry,\n\t\t\t\tshowInsertionPoint,\n\t\t\t]\n\t\t),\n\t\t200\n\t);\n\n\treturn useDropZone( {\n\t\tdropZoneElement,\n\t\tisDisabled,\n\t\tonDrop: onBlockDrop,\n\t\tonDragOver( event ) {\n\t\t\t// `currentTarget` is only available while the event is being\n\t\t\t// handled, so get it now and pass it to the thottled function.\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget\n\t\t\tthrottled( event, event.currentTarget.ownerDocument );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tthrottled.cancel();\n\t\t\thideInsertionPoint();\n\t\t},\n\t\tonDragEnd() {\n\t\t\tthrottled.cancel();\n\t\t\thideInsertionPoint();\n\t\t},\n\t} );\n}\n"],"mappings":"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"}

package/build-module/components/use-moving-animation/index.js

@@ -1,28 +1,31 @@
 /**
  * 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
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * If the block count exceeds the threshold, we disable the reordering animation
+ * to avoid laginess.
  */
-const counterReducer = state => state + 1;
-const getAbsolutePosition = element => {
+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.
@@ -35,107 +38,112 @@ 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
+  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, [triggerAnimationOnChange]);
+  const {
+    isTyping,
+    getGlobalBlockCount,
+    isBlockSelected,
+    isFirstMultiSelectedBlock,
+    isBlockMultiSelected,
+    isAncestorMultiSelected
+  } = useSelect(blockEditorStore);
 
-  // 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 () => {};
+  // 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]);
+  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]);
-  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: {
+    const x = Math.round(previous.left - destination.left);
+    const y = Math.round(previous.top - destination.top);
+    controller.start({
       x: 0,
-      y: 0
-    },
-    reset: triggeredAnimation !== finishedAnimation,
-    config: {
-      mass: 5,
-      tension: 2000,
-      friction: 200
-    },
-    immediate: prefersReducedMotion,
-    onChange
-  });
+      y: 0,
+      from: {
+        x,
+        y
+      }
+    });
+    return () => {
+      controller.stop();
+    };
+  }, [previous, prevRect, clientId, isTyping, getGlobalBlockCount, isBlockSelected, isFirstMultiSelectedBlock, isBlockMultiSelected, isAncestorMultiSelected]);
   return ref;
 }
 export default useMovingAnimation;

package/build-module/components/use-moving-animation/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSpring","useState","useLayoutEffect","useReducer","useMemo","useRef","useReducedMotion","getScrollContainer","counterReducer","state","getAbsolutePosition","element","top","offsetTop","left","offsetLeft","useMovingAnimation","isSelected","adjustScrolling","enableAnimation","triggerAnimationOnChange","ref","prefersReducedMotion","triggeredAnimation","triggerAnimation","finishedAnimation","endAnimation","transform","setTransform","x","y","previous","current","preserveScrollPosition","scrollContainer","prevRect","getBoundingClientRect","blockRect","diff","scrollTop","style","undefined","destination","Math","round","onChange","value","finishedMoving","transformOrigin","zIndex","from","to","reset","config","mass","tension","friction","immediate"],"sources":["@wordpress/block-editor/src/components/use-moving-animation/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useSpring } from '@react-spring/web';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tuseLayoutEffect,\n\tuseReducer,\n\tuseMemo,\n\tuseRef,\n} from '@wordpress/element';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { getScrollContainer } from '@wordpress/dom';\n\n/**\n * Simple reducer used to increment a counter.\n *\n * @param {number} state Previous counter value.\n * @return {number} New state value.\n */\nconst counterReducer = ( state ) => state + 1;\n\nconst getAbsolutePosition = ( element ) => {\n\treturn {\n\t\ttop: element.offsetTop,\n\t\tleft: element.offsetLeft,\n\t};\n};\n\n/**\n * Hook used to compute the styles required to move a div into a new position.\n *\n * The way this animation works is the following:\n *  - It first renders the element as if there was no animation.\n *  - It takes a snapshot of the position of the block to use it\n *    as a destination point for the animation.\n *  - It restores the element to the previous position using a CSS transform\n *  - It uses the \"resetAnimation\" flag to reset the animation\n *    from the beginning in order to animate to the new destination point.\n *\n * @param {Object}  $1                          Options\n * @param {boolean} $1.isSelected               Whether it's the current block or not.\n * @param {boolean} $1.adjustScrolling          Adjust the scroll position to the current block.\n * @param {boolean} $1.enableAnimation          Enable/Disable animation.\n * @param {*}       $1.triggerAnimationOnChange Variable used to trigger the animation if it changes.\n */\nfunction useMovingAnimation( {\n\tisSelected,\n\tadjustScrolling,\n\tenableAnimation,\n\ttriggerAnimationOnChange,\n} ) {\n\tconst ref = useRef();\n\tconst prefersReducedMotion = useReducedMotion() || ! enableAnimation;\n\tconst [ triggeredAnimation, triggerAnimation ] = useReducer(\n\t\tcounterReducer,\n\t\t0\n\t);\n\tconst [ finishedAnimation, endAnimation ] = useReducer( counterReducer, 0 );\n\tconst [ transform, setTransform ] = useState( { x: 0, y: 0 } );\n\tconst previous = useMemo(\n\t\t() => ( ref.current ? getAbsolutePosition( ref.current ) : null ),\n\t\t[ triggerAnimationOnChange ]\n\t);\n\n\t// Calculate the previous position of the block relative to the viewport and\n\t// return a function to maintain that position by scrolling.\n\tconst preserveScrollPosition = useMemo( () => {\n\t\tif ( ! adjustScrolling || ! ref.current ) {\n\t\t\treturn () => {};\n\t\t}\n\n\t\tconst scrollContainer = getScrollContainer( ref.current );\n\n\t\tif ( ! scrollContainer ) {\n\t\t\treturn () => {};\n\t\t}\n\n\t\tconst prevRect = ref.current.getBoundingClientRect();\n\t\treturn () => {\n\t\t\tconst blockRect = ref.current.getBoundingClientRect();\n\t\t\tconst diff = blockRect.top - prevRect.top;\n\n\t\t\tif ( diff ) {\n\t\t\t\tscrollContainer.scrollTop += diff;\n\t\t\t}\n\t\t};\n\t}, [ triggerAnimationOnChange, adjustScrolling ] );\n\n\tuseLayoutEffect( () => {\n\t\tif ( triggeredAnimation ) {\n\t\t\tendAnimation();\n\t\t}\n\t}, [ triggeredAnimation ] );\n\tuseLayoutEffect( () => {\n\t\tif ( ! previous ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( prefersReducedMotion ) {\n\t\t\t// If the animation is disabled and the scroll needs to be adjusted,\n\t\t\t// just move directly to the final scroll position.\n\t\t\tpreserveScrollPosition();\n\n\t\t\treturn;\n\t\t}\n\n\t\tref.current.style.transform = undefined;\n\t\tconst destination = getAbsolutePosition( ref.current );\n\n\t\ttriggerAnimation();\n\t\tsetTransform( {\n\t\t\tx: Math.round( previous.left - destination.left ),\n\t\t\ty: Math.round( previous.top - destination.top ),\n\t\t} );\n\t}, [ triggerAnimationOnChange ] );\n\n\tfunction onChange( { value } ) {\n\t\tif ( ! ref.current ) {\n\t\t\treturn;\n\t\t}\n\t\tlet { x, y } = value;\n\t\tx = Math.round( x );\n\t\ty = Math.round( y );\n\t\tconst finishedMoving = x === 0 && y === 0;\n\t\tref.current.style.transformOrigin = 'center center';\n\t\tref.current.style.transform = finishedMoving\n\t\t\t? null // Set to `null` to explicitly remove the transform.\n\t\t\t: `translate3d(${ x }px,${ y }px,0)`;\n\t\tref.current.style.zIndex = isSelected ? '1' : '';\n\n\t\tpreserveScrollPosition();\n\t}\n\n\tuseSpring( {\n\t\tfrom: {\n\t\t\tx: transform.x,\n\t\t\ty: transform.y,\n\t\t},\n\t\tto: {\n\t\t\tx: 0,\n\t\t\ty: 0,\n\t\t},\n\t\treset: triggeredAnimation !== finishedAnimation,\n\t\tconfig: { mass: 5, tension: 2000, friction: 200 },\n\t\timmediate: prefersReducedMotion,\n\t\tonChange,\n\t} );\n\n\treturn ref;\n}\n\nexport default useMovingAnimation;\n"],"mappings":"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"}
+{"version":3,"names":["Controller","useLayoutEffect","useMemo","useRef","getScrollContainer","useSelect","store","blockEditorStore","BLOCK_ANIMATION_THRESHOLD","getAbsolutePosition","element","top","offsetTop","left","offsetLeft","useMovingAnimation","triggerAnimationOnChange","clientId","ref","isTyping","getGlobalBlockCount","isBlockSelected","isFirstMultiSelectedBlock","isBlockMultiSelected","isAncestorMultiSelected","previous","prevRect","current","getBoundingClientRect","scrollContainer","isSelected","adjustScrolling","preserveScrollPosition","blockRect","diff","scrollTop","disableAnimation","window","matchMedia","matches","isPartOfSelection","zIndex","controller","x","y","config","mass","tension","friction","onChange","value","Math","round","finishedMoving","style","transformOrigin","transform","undefined","destination","start","from","stop"],"sources":["@wordpress/block-editor/src/components/use-moving-animation/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Controller } from '@react-spring/web';\n\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useMemo, useRef } from '@wordpress/element';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * If the block count exceeds the threshold, we disable the reordering animation\n * to avoid laginess.\n */\nconst BLOCK_ANIMATION_THRESHOLD = 200;\n\nfunction getAbsolutePosition( element ) {\n\treturn {\n\t\ttop: element.offsetTop,\n\t\tleft: element.offsetLeft,\n\t};\n}\n\n/**\n * Hook used to compute the styles required to move a div into a new position.\n *\n * The way this animation works is the following:\n *  - It first renders the element as if there was no animation.\n *  - It takes a snapshot of the position of the block to use it\n *    as a destination point for the animation.\n *  - It restores the element to the previous position using a CSS transform\n *  - It uses the \"resetAnimation\" flag to reset the animation\n *    from the beginning in order to animate to the new destination point.\n *\n * @param {Object} $1                          Options\n * @param {*}      $1.triggerAnimationOnChange Variable used to trigger the animation if it changes.\n * @param {string} $1.clientId\n */\nfunction useMovingAnimation( { triggerAnimationOnChange, clientId } ) {\n\tconst ref = useRef();\n\tconst {\n\t\tisTyping,\n\t\tgetGlobalBlockCount,\n\t\tisBlockSelected,\n\t\tisFirstMultiSelectedBlock,\n\t\tisBlockMultiSelected,\n\t\tisAncestorMultiSelected,\n\t} = useSelect( blockEditorStore );\n\n\t// Whenever the trigger changes, we need to take a snapshot of the current\n\t// position of the block to use it as a destination point for the animation.\n\tconst { previous, prevRect } = useMemo(\n\t\t() => ( {\n\t\t\tprevious: ref.current && getAbsolutePosition( ref.current ),\n\t\t\tprevRect: ref.current && ref.current.getBoundingClientRect(),\n\t\t} ),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[ triggerAnimationOnChange ]\n\t);\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! previous || ! ref.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrollContainer = getScrollContainer( ref.current );\n\t\tconst isSelected = isBlockSelected( clientId );\n\t\tconst adjustScrolling =\n\t\t\tisSelected || isFirstMultiSelectedBlock( clientId );\n\n\t\tfunction preserveScrollPosition() {\n\t\t\tif ( adjustScrolling && prevRect ) {\n\t\t\t\tconst blockRect = ref.current.getBoundingClientRect();\n\t\t\t\tconst diff = blockRect.top - prevRect.top;\n\n\t\t\t\tif ( diff ) {\n\t\t\t\t\tscrollContainer.scrollTop += diff;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// We disable the animation if the user has a preference for reduced\n\t\t// motion, if the user is typing (insertion by Enter), or if the block\n\t\t// count exceeds the threshold (insertion caused all the blocks that\n\t\t// follow to animate).\n\t\t// To do: consider enableing the _moving_ animation even for large\n\t\t// posts, while only disabling the _insertion_ animation?\n\t\tconst disableAnimation =\n\t\t\twindow.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ||\n\t\t\tisTyping() ||\n\t\t\tgetGlobalBlockCount() > BLOCK_ANIMATION_THRESHOLD;\n\n\t\tif ( disableAnimation ) {\n\t\t\t// If the animation is disabled and the scroll needs to be adjusted,\n\t\t\t// just move directly to the final scroll position.\n\t\t\tpreserveScrollPosition();\n\t\t\treturn;\n\t\t}\n\n\t\tconst isPartOfSelection =\n\t\t\tisSelected ||\n\t\t\tisBlockMultiSelected( clientId ) ||\n\t\t\tisAncestorMultiSelected( clientId );\n\t\t// Make sure the other blocks move under the selected block(s).\n\t\tconst zIndex = isPartOfSelection ? '1' : '';\n\n\t\tconst controller = new Controller( {\n\t\t\tx: 0,\n\t\t\ty: 0,\n\t\t\tconfig: { mass: 5, tension: 2000, friction: 200 },\n\t\t\tonChange( { value } ) {\n\t\t\t\tif ( ! ref.current ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tlet { x, y } = value;\n\t\t\t\tx = Math.round( x );\n\t\t\t\ty = Math.round( y );\n\t\t\t\tconst finishedMoving = x === 0 && y === 0;\n\t\t\t\tref.current.style.transformOrigin = 'center center';\n\t\t\t\tref.current.style.transform = finishedMoving\n\t\t\t\t\t? null // Set to `null` to explicitly remove the transform.\n\t\t\t\t\t: `translate3d(${ x }px,${ y }px,0)`;\n\t\t\t\tref.current.style.zIndex = zIndex;\n\t\t\t\tpreserveScrollPosition();\n\t\t\t},\n\t\t} );\n\n\t\tref.current.style.transform = undefined;\n\t\tconst destination = getAbsolutePosition( ref.current );\n\n\t\tconst x = Math.round( previous.left - destination.left );\n\t\tconst y = Math.round( previous.top - destination.top );\n\n\t\tcontroller.start( { x: 0, y: 0, from: { x, y } } );\n\n\t\treturn () => {\n\t\t\tcontroller.stop();\n\t\t};\n\t}, [\n\t\tprevious,\n\t\tprevRect,\n\t\tclientId,\n\t\tisTyping,\n\t\tgetGlobalBlockCount,\n\t\tisBlockSelected,\n\t\tisFirstMultiSelectedBlock,\n\t\tisBlockMultiSelected,\n\t\tisAncestorMultiSelected,\n\t] );\n\n\treturn ref;\n}\n\nexport default useMovingAnimation;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,mBAAmB;;AAE9C;AACA;AACA;AACA,SAASC,eAAe,EAAEC,OAAO,EAAEC,MAAM,QAAQ,oBAAoB;AACrE,SAASC,kBAAkB,QAAQ,gBAAgB;AACnD,SAASC,SAAS,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;;AAEvD;AACA;AACA;AACA;AACA,MAAMC,yBAAyB,GAAG,GAAG;AAErC,SAASC,mBAAmBA,CAAEC,OAAO,EAAG;EACvC,OAAO;IACNC,GAAG,EAAED,OAAO,CAACE,SAAS;IACtBC,IAAI,EAAEH,OAAO,CAACI;EACf,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,kBAAkBA,CAAE;EAAEC,wBAAwB;EAAEC;AAAS,CAAC,EAAG;EACrE,MAAMC,GAAG,GAAGf,MAAM,CAAC,CAAC;EACpB,MAAM;IACLgB,QAAQ;IACRC,mBAAmB;IACnBC,eAAe;IACfC,yBAAyB;IACzBC,oBAAoB;IACpBC;EACD,CAAC,GAAGnB,SAAS,CAAEE,gBAAiB,CAAC;;EAEjC;EACA;EACA,MAAM;IAAEkB,QAAQ;IAAEC;EAAS,CAAC,GAAGxB,OAAO,CACrC,OAAQ;IACPuB,QAAQ,EAAEP,GAAG,CAACS,OAAO,IAAIlB,mBAAmB,CAAES,GAAG,CAACS,OAAQ,CAAC;IAC3DD,QAAQ,EAAER,GAAG,CAACS,OAAO,IAAIT,GAAG,CAACS,OAAO,CAACC,qBAAqB,CAAC;EAC5D,CAAC,CAAE;EACH;EACA,CAAEZ,wBAAwB,CAC3B,CAAC;EAEDf,eAAe,CAAE,MAAM;IACtB,IAAK,CAAEwB,QAAQ,IAAI,CAAEP,GAAG,CAACS,OAAO,EAAG;MAClC;IACD;IAEA,MAAME,eAAe,GAAGzB,kBAAkB,CAAEc,GAAG,CAACS,OAAQ,CAAC;IACzD,MAAMG,UAAU,GAAGT,eAAe,CAAEJ,QAAS,CAAC;IAC9C,MAAMc,eAAe,GACpBD,UAAU,IAAIR,yBAAyB,CAAEL,QAAS,CAAC;IAEpD,SAASe,sBAAsBA,CAAA,EAAG;MACjC,IAAKD,eAAe,IAAIL,QAAQ,EAAG;QAClC,MAAMO,SAAS,GAAGf,GAAG,CAACS,OAAO,CAACC,qBAAqB,CAAC,CAAC;QACrD,MAAMM,IAAI,GAAGD,SAAS,CAACtB,GAAG,GAAGe,QAAQ,CAACf,GAAG;QAEzC,IAAKuB,IAAI,EAAG;UACXL,eAAe,CAACM,SAAS,IAAID,IAAI;QAClC;MACD;IACD;;IAEA;IACA;IACA;IACA;IACA;IACA;IACA,MAAME,gBAAgB,GACrBC,MAAM,CAACC,UAAU,CAAE,kCAAmC,CAAC,CAACC,OAAO,IAC/DpB,QAAQ,CAAC,CAAC,IACVC,mBAAmB,CAAC,CAAC,GAAGZ,yBAAyB;IAElD,IAAK4B,gBAAgB,EAAG;MACvB;MACA;MACAJ,sBAAsB,CAAC,CAAC;MACxB;IACD;IAEA,MAAMQ,iBAAiB,GACtBV,UAAU,IACVP,oBAAoB,CAAEN,QAAS,CAAC,IAChCO,uBAAuB,CAAEP,QAAS,CAAC;IACpC;IACA,MAAMwB,MAAM,GAAGD,iBAAiB,GAAG,GAAG,GAAG,EAAE;IAE3C,MAAME,UAAU,GAAG,IAAI1C,UAAU,CAAE;MAClC2C,CAAC,EAAE,CAAC;MACJC,CAAC,EAAE,CAAC;MACJC,MAAM,EAAE;QAAEC,IAAI,EAAE,CAAC;QAAEC,OAAO,EAAE,IAAI;QAAEC,QAAQ,EAAE;MAAI,CAAC;MACjDC,QAAQA,CAAE;QAAEC;MAAM,CAAC,EAAG;QACrB,IAAK,CAAEhC,GAAG,CAACS,OAAO,EAAG;UACpB;QACD;QACA,IAAI;UAAEgB,CAAC;UAAEC;QAAE,CAAC,GAAGM,KAAK;QACpBP,CAAC,GAAGQ,IAAI,CAACC,KAAK,CAAET,CAAE,CAAC;QACnBC,CAAC,GAAGO,IAAI,CAACC,KAAK,CAAER,CAAE,CAAC;QACnB,MAAMS,cAAc,GAAGV,CAAC,KAAK,CAAC,IAAIC,CAAC,KAAK,CAAC;QACzC1B,GAAG,CAACS,OAAO,CAAC2B,KAAK,CAACC,eAAe,GAAG,eAAe;QACnDrC,GAAG,CAACS,OAAO,CAAC2B,KAAK,CAACE,SAAS,GAAGH,cAAc,GACzC,IAAI,CAAC;QAAA,EACJ,eAAeV,CAAG,MAAMC,CAAG,OAAM;QACrC1B,GAAG,CAACS,OAAO,CAAC2B,KAAK,CAACb,MAAM,GAAGA,MAAM;QACjCT,sBAAsB,CAAC,CAAC;MACzB;IACD,CAAE,CAAC;IAEHd,GAAG,CAACS,OAAO,CAAC2B,KAAK,CAACE,SAAS,GAAGC,SAAS;IACvC,MAAMC,WAAW,GAAGjD,mBAAmB,CAAES,GAAG,CAACS,OAAQ,CAAC;IAEtD,MAAMgB,CAAC,GAAGQ,IAAI,CAACC,KAAK,CAAE3B,QAAQ,CAACZ,IAAI,GAAG6C,WAAW,CAAC7C,IAAK,CAAC;IACxD,MAAM+B,CAAC,GAAGO,IAAI,CAACC,KAAK,CAAE3B,QAAQ,CAACd,GAAG,GAAG+C,WAAW,CAAC/C,GAAI,CAAC;IAEtD+B,UAAU,CAACiB,KAAK,CAAE;MAAEhB,CAAC,EAAE,CAAC;MAAEC,CAAC,EAAE,CAAC;MAAEgB,IAAI,EAAE;QAAEjB,CAAC;QAAEC;MAAE;IAAE,CAAE,CAAC;IAElD,OAAO,MAAM;MACZF,UAAU,CAACmB,IAAI,CAAC,CAAC;IAClB,CAAC;EACF,CAAC,EAAE,CACFpC,QAAQ,EACRC,QAAQ,EACRT,QAAQ,EACRE,QAAQ,EACRC,mBAAmB,EACnBC,eAAe,EACfC,yBAAyB,EACzBC,oBAAoB,EACpBC,uBAAuB,CACtB,CAAC;EAEH,OAAON,GAAG;AACX;AAEA,eAAeH,kBAAkB"}

package/build-module/components/use-on-block-drop/index.js

@@ -99,17 +99,16 @@ export function onBlockDrop(targetRootClientId, targetBlockIndex, getBlockIndex,
  * 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.
  *
  * @return {Function} The event handler for a block-related file drop event.
  */
-export function onFilesDrop(targetRootClientId, targetBlockIndex, hasUploadPermissions, updateBlockAttributes, canInsertBlockType, insertOrReplaceBlocks) {
+export function onFilesDrop(targetRootClientId, getSettings, updateBlockAttributes, canInsertBlockType, insertOrReplaceBlocks) {
   return files => {
-    if (!hasUploadPermissions) {
+    if (!getSettings().mediaUpload) {
       return;
     }
     const transformation = findTransform(getBlockTransforms('from'), transform => transform.type === 'files' && canInsertBlockType(transform.blockName, targetRootClientId) && transform.isMatch(files));
@@ -123,13 +122,11 @@ export function onFilesDrop(targetRootClientId, targetBlockIndex, hasUploadPermi
 /**
  * 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,
@@ -155,13 +152,13 @@ export default function useOnBlockDrop(targetRootClientId, targetBlockIndex, opt
   const {
     operation = 'insert'
   } = options;
-  const hasUploadPermissions = useSelect(select => select(blockEditorStore).getSettings().mediaUpload, []);
   const {
     canInsertBlockType,
     getBlockIndex,
     getClientIdsOfDescendants,
     getBlockOrder,
-    getBlocksByClientId
+    getBlocksByClientId,
+    getSettings
   } = useSelect(blockEditorStore);
   const {
     insertBlocks,
@@ -197,8 +194,8 @@ export default function useOnBlockDrop(targetRootClientId, targetBlockIndex, opt
     }
   }, [operation, getBlockOrder, getBlocksByClientId, moveBlocksToPosition, registry, removeBlocks, replaceBlocks, targetBlockIndex, targetRootClientId]);
   const _onDrop = onBlockDrop(targetRootClientId, targetBlockIndex, getBlockIndex, getClientIdsOfDescendants, moveBlocks, insertOrReplaceBlocks, clearSelectedBlock);
-  const _onFilesDrop = onFilesDrop(targetRootClientId, targetBlockIndex, hasUploadPermissions, updateBlockAttributes, canInsertBlockType, insertOrReplaceBlocks);
-  const _onHTMLDrop = onHTMLDrop(targetRootClientId, targetBlockIndex, insertOrReplaceBlocks);
+  const _onFilesDrop = onFilesDrop(targetRootClientId, getSettings, updateBlockAttributes, canInsertBlockType, insertOrReplaceBlocks);
+  const _onHTMLDrop = onHTMLDrop(insertOrReplaceBlocks);
   return event => {
     const files = getFilesFromDataTransfer(event.dataTransfer);
     const html = event.dataTransfer.getData('text/html');