Remove useSelect from useMovingAnimation

WordPress · Jul 18, 2019 · 357b53d · 357b53d
1 parent 8627ff0
commit 357b53d
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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 } );