From 8b501b4754c7c39076b6d98b8826bb2f67fa6578 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 28 Nov 2024 21:18:41 +0100 Subject: [PATCH 1/2] Drag and drop: fix scroll disorientation after drop --- .../src/components/use-moving-animation/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/use-moving-animation/index.js b/packages/block-editor/src/components/use-moving-animation/index.js index 602b683150d0cc..9c9a04c4971544 100644 --- a/packages/block-editor/src/components/use-moving-animation/index.js +++ b/packages/block-editor/src/components/use-moving-animation/index.js @@ -52,6 +52,7 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) { isFirstMultiSelectedBlock, isBlockMultiSelected, isAncestorMultiSelected, + isDraggingBlocks, } = useSelect( blockEditorStore ); // Whenever the trigger changes, we need to take a snapshot of the current @@ -94,12 +95,10 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) { const disableAnimation = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches || isTyping() || + isDraggingBlocks() || 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; } @@ -153,6 +152,7 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) { isFirstMultiSelectedBlock, isBlockMultiSelected, isAncestorMultiSelected, + isDraggingBlocks, ] ); return ref; From 4e7ea25c3a3fa3d79ca5a054459d88ea792993f0 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 28 Nov 2024 23:57:11 +0100 Subject: [PATCH 2/2] restore scroll for other conditions --- .../src/components/use-moving-animation/index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/use-moving-animation/index.js b/packages/block-editor/src/components/use-moving-animation/index.js index 9c9a04c4971544..ef367c0f332101 100644 --- a/packages/block-editor/src/components/use-moving-animation/index.js +++ b/packages/block-editor/src/components/use-moving-animation/index.js @@ -86,6 +86,11 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) { } } + // Neither animate nor scroll. + if ( isDraggingBlocks() ) { + return; + } + // 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 @@ -95,10 +100,12 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) { const disableAnimation = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches || isTyping() || - isDraggingBlocks() || 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; }