Scroll on drag: remove dragElement dependency (#23561)

WordPress · Jun 29, 2020 · dc4c0d0 · dc4c0d0
1 parent 6225038
commit dc4c0d0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 28 deletions.
diff --git a/packages/block-editor/src/components/block-draggable/index.js b/packages/block-editor/src/components/block-draggable/index.js
@@ -3,14 +3,13 @@
  */
 import { Draggable } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useContext, useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockDraggableChip from './draggable-chip';
 import useScrollWhenDragging from './use-scroll-when-dragging';
-import { BlockNodes } from '../block-list/root-container';
 
 const BlockDraggable = ( {
 	children,
@@ -40,14 +39,11 @@ const BlockDraggable = ( {
 		[ clientIds ]
 	);
 	const isDragging = useRef( false );
-	const [ firstClientId ] = clientIds;
-	const blockNodes = useContext( BlockNodes );
-	const blockElement = blockNodes ? blockNodes[ firstClientId ] : undefined;
 	const [
 		startScrolling,
 		scrollOnDragOver,
 		stopScrolling,
-	] = useScrollWhenDragging( blockElement );
+	] = useScrollWhenDragging();
 
 	const { startDraggingBlocks, stopDraggingBlocks } = useDispatch(
 		'core/block-editor'

diff --git a/packages/block-editor/src/components/block-draggable/use-scroll-when-dragging.js b/packages/block-editor/src/components/block-draggable/use-scroll-when-dragging.js
@@ -13,13 +13,11 @@ const VELOCITY_MULTIPLIER =
 /**
  * React hook that scrolls the scroll container when a block is being dragged.
  *
- * @param {Element} dragElement The DOM element being dragged.
- *
  * @return {Function[]} `startScrolling`, `scrollOnDragOver`, `stopScrolling`
  *                      functions to be called in `onDragStart`, `onDragOver`
  *                      and `onDragEnd` events respectively.
  */
-export default function useScrollWhenDragging( dragElement ) {
+export default function useScrollWhenDragging() {
 	const dragStartY = useRef( null );
 	const velocityY = useRef( null );
 	const scrollParentY = useRef( null );
@@ -36,28 +34,25 @@ export default function useScrollWhenDragging( dragElement ) {
 		[]
 	);
 
-	const startScrolling = useCallback(
-		( event ) => {
-			dragStartY.current = event.clientY;
+	const startScrolling = useCallback( ( event ) => {
+		dragStartY.current = event.clientY;
 
-			// Find nearest parent(s) to scroll.
-			scrollParentY.current = getScrollContainer( dragElement );
+		// Find nearest parent(s) to scroll.
+		scrollParentY.current = getScrollContainer( event.target );
 
-			scrollEditorInterval.current = setInterval( () => {
-				if ( scrollParentY.current && velocityY.current ) {
-					const newTop =
-						scrollParentY.current.scrollTop + velocityY.current;
+		scrollEditorInterval.current = setInterval( () => {
+			if ( scrollParentY.current && velocityY.current ) {
+				const newTop =
+					scrollParentY.current.scrollTop + velocityY.current;
 
-					// Setting `behavior: 'smooth'` as a scroll property seems to hurt performance.
-					// Better to use a small scroll interval.
-					scrollParentY.current.scroll( {
-						top: newTop,
-					} );
-				}
-			}, SCROLL_INTERVAL_MS );
-		},
-		[ dragElement ]
-	);
+				// Setting `behavior: 'smooth'` as a scroll property seems to hurt performance.
+				// Better to use a small scroll interval.
+				scrollParentY.current.scroll( {
+					top: newTop,
+				} );
+			}
+		}, SCROLL_INTERVAL_MS );
+	}, [] );
 
 	const scrollOnDragOver = useCallback( ( event ) => {
 		const scrollParentHeight = scrollParentY.current.offsetHeight;