diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 320f63555946c..d44e837eb42d5 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -25,6 +25,7 @@ import { import { KeyboardShortcuts, withFilters } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { + useSelect, withDispatch, withSelect, } from '@wordpress/data'; @@ -251,8 +252,9 @@ function BlockListBlock( { } }, [ isFirstMultiSelected ] ); + const isTyping = useSelect( ( select ) => select( 'core/block-editor' ).isTyping() ); // Block Reordering animation - const style = useMovingAnimation( wrapper, isSelected || isPartOfMultiSelection, enableAnimation, animateOnChange ); + const style = useMovingAnimation( wrapper, isSelected || isPartOfMultiSelection, enableAnimation && ! isTyping, animateOnChange ); // Other event handlers diff --git a/packages/block-editor/src/components/block-list/moving-animation.js b/packages/block-editor/src/components/block-list/moving-animation.js index 02ea888911cf0..393bfa33e2a7c 100644 --- a/packages/block-editor/src/components/block-list/moving-animation.js +++ b/packages/block-editor/src/components/block-list/moving-animation.js @@ -8,7 +8,6 @@ import { useSpring, interpolate } from 'react-spring/web.cjs'; */ import { useState, useLayoutEffect } from '@wordpress/element'; import { useReducedMotion } from '@wordpress/compose'; -import { useSelect } from '@wordpress/data'; /** * Hook used to compute the styles required to move a div into a new position. @@ -29,8 +28,7 @@ import { useSelect } from '@wordpress/data'; * @return {Object} Style object. */ function useMovingAnimation( ref, isSelected, enableAnimation, triggerAnimationOnChange ) { - const isTyping = useSelect( ( select ) => select( 'core/block-editor' ).isTyping() ); - const prefersReducedMotion = useReducedMotion() || isTyping || ! enableAnimation; + const prefersReducedMotion = useReducedMotion() || ! enableAnimation; const [ resetAnimation, setResetAnimation ] = useState( false ); const [ transform, setTransform ] = useState( { x: 0, y: 0 } );