Fix block & block toolbar vibration on block move (#22640)

* Fix block & block toolbar vibration on block move * Clean up
WordPress · Jun 23, 2020 · abf02d5 · abf02d5
1 parent f88cdfa
commit abf02d5
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 87 deletions.
diff --git a/packages/block-editor/src/components/block-list/block-popover.js b/packages/block-editor/src/components/block-list/block-popover.js
@@ -155,13 +155,8 @@ function BlockPopover( {
 			__unstableSticky={ ! showEmptyBlockSideInserter }
 			__unstableSlotName="block-toolbar"
 			__unstableBoundaryParent
-			// Allow subpixel positioning for the block movement animation.
-			__unstableAllowVerticalSubpixelPosition={
-				moverDirection !== 'horizontal' && node
-			}
-			__unstableAllowHorizontalSubpixelPosition={
-				moverDirection === 'horizontal' && node
-			}
+			// Observe movement for block animations (especially horizontal).
+			__unstableObserveElement={ node }
 			onBlur={ () => setIsToolbarForced( false ) }
 			shouldAnchorIncludePadding
 			// Popover calculates the width once. Trigger a reset by remounting

diff --git a/packages/block-editor/src/components/use-moving-animation/index.js b/packages/block-editor/src/components/use-moving-animation/index.js
@@ -63,7 +63,7 @@ function useMovingAnimation(
 	const [ transform, setTransform ] = useState( {
 		x: 0,
 		y: 0,
-		scrollTop: 0,
+		clientTop: 0,
 	} );
 
 	const previous = ref.current ? getAbsolutePosition( ref.current ) : null;
@@ -80,11 +80,12 @@ function useMovingAnimation(
 		}
 
 		scrollContainer.current = getScrollContainer( ref.current );
+
 		if ( prefersReducedMotion ) {
 			if ( adjustScrolling && scrollContainer.current ) {
 				// if the animation is disabled and the scroll needs to be adjusted,
 				// just move directly to the final scroll position
-				ref.current.style.transform = 'none';
+				ref.current.style.transform = '';
 				const destination = getAbsolutePosition( ref.current );
 				scrollContainer.current.scrollTop =
 					scrollContainer.current.scrollTop -
@@ -94,25 +95,65 @@ function useMovingAnimation(
 
 			return;
 		}
-		ref.current.style.transform = 'none';
+
+		ref.current.style.transform = '';
 		const destination = getAbsolutePosition( ref.current );
+		const x = Math.round( previous.left - destination.left );
+		const y = Math.round( previous.top - destination.top );
+		ref.current.style.transform =
+			x === 0 && y === 0 ? '' : `translate3d(${ x }px,${ y }px,0)`;
+		const blockRect = ref.current.getBoundingClientRect();
 		const newTransform = {
-			x: previous.left - destination.left,
-			y: previous.top - destination.top,
-			scrollTop: scrollContainer.current
-				? scrollContainer.current.scrollTop -
-				  previous.top +
-				  destination.top
-				: 0,
+			x,
+			y,
+			clientTop: blockRect.top,
 		};
-		ref.current.style.transform =
-			newTransform.x === 0 && newTransform.y === 0
-				? undefined
-				: `translate3d(${ newTransform.x }px,${ newTransform.y }px,0)`;
 		triggerAnimation();
 		setTransform( newTransform );
 	}, [ triggerAnimationOnChange ] );
 
+	// Only called when either the x or y value changes.
+	function onFrameChange( { x, y } ) {
+		if ( ! ref.current ) {
+			return;
+		}
+
+		const isMoving = x === 0 && y === 0;
+		ref.current.style.transformOrigin = isMoving ? '' : 'center';
+		ref.current.style.transform = isMoving
+			? ''
+			: `translate3d(${ x }px,${ y }px,0)`;
+		ref.current.style.zIndex = ! isSelected || isMoving ? '' : '1';
+
+		if (
+			adjustScrolling &&
+			scrollContainer.current &&
+			! prefersReducedMotion
+		) {
+			const blockRect = ref.current.getBoundingClientRect();
+			const diff = blockRect.top - transform.clientTop;
+
+			if ( diff ) {
+				scrollContainer.current.scrollTop += diff;
+			}
+		}
+	}
+
+	// Called for every frame computed by useSpring.
+	function onFrame( { x, y } ) {
+		x = Math.round( x );
+		y = Math.round( y );
+
+		if ( x !== onFrame.x || y !== onFrame.y ) {
+			onFrameChange( { x, y } );
+			onFrame.x = x;
+			onFrame.y = y;
+		}
+	}
+
+	onFrame.x = 0;
+	onFrame.y = 0;
+
 	useSpring( {
 		from: {
 			x: transform.x,
@@ -125,26 +166,7 @@ function useMovingAnimation(
 		reset: triggeredAnimation !== finishedAnimation,
 		config: { mass: 5, tension: 2000, friction: 200 },
 		immediate: prefersReducedMotion,
-		onFrame( { x, y } ) {
-			if (
-				adjustScrolling &&
-				scrollContainer.current &&
-				! prefersReducedMotion &&
-				y
-			) {
-				scrollContainer.current.scrollTop = transform.scrollTop + y;
-			}
-
-			if ( ref.current ) {
-				ref.current.style.transformOrigin = 'center';
-				ref.current.style.transform =
-					x === 0 && y === 0
-						? null
-						: `translate3d(${ x }px,${ y }px,0)`;
-				ref.current.style.zIndex =
-					! isSelected || ( x === 0 && y === 0 ) ? null : '1';
-			}
-		},
+		onFrame,
 	} );
 }
 

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
@@ -255,8 +255,7 @@ const Popover = ( {
 	onFocusOutside,
 	__unstableSticky,
 	__unstableSlotName = SLOT_NAME,
-	__unstableAllowVerticalSubpixelPosition,
-	__unstableAllowHorizontalSubpixelPosition,
+	__unstableObserveElement,
 	__unstableFixedPosition = true,
 	__unstableBoundaryParent,
 	/* eslint-enable no-unused-vars */
@@ -286,7 +285,7 @@ const Popover = ( {
 			return;
 		}
 
-		const refresh = ( { subpixels } = {} ) => {
+		const refresh = () => {
 			if ( ! containerRef.current || ! contentRef.current ) {
 				return;
 			}
@@ -359,38 +358,8 @@ const Popover = ( {
 				typeof popoverTop === 'number' &&
 				typeof popoverLeft === 'number'
 			) {
-				if ( subpixels && __unstableAllowVerticalSubpixelPosition ) {
-					setStyle(
-						containerRef.current,
-						'left',
-						popoverLeft + 'px'
-					);
-					setStyle( containerRef.current, 'top' );
-					setStyle(
-						containerRef.current,
-						'transform',
-						`translateY(${ popoverTop }px)`
-					);
-				} else if (
-					subpixels &&
-					__unstableAllowHorizontalSubpixelPosition
-				) {
-					setStyle( containerRef.current, 'top', popoverTop + 'px' );
-					setStyle( containerRef.current, 'left' );
-					setStyle(
-						containerRef.current,
-						'transform',
-						`translate(${ popoverLeft }px)`
-					);
-				} else {
-					setStyle( containerRef.current, 'top', popoverTop + 'px' );
-					setStyle(
-						containerRef.current,
-						'left',
-						popoverLeft + 'px'
-					);
-					setStyle( containerRef.current, 'transform' );
-				}
+				setStyle( containerRef.current, 'top', popoverTop + 'px' );
+				setStyle( containerRef.current, 'left', popoverLeft + 'px' );
 			}
 
 			setClass(
@@ -455,15 +424,9 @@ const Popover = ( {
 
 		let observer;
 
-		const observeElement =
-			__unstableAllowVerticalSubpixelPosition ||
-			__unstableAllowHorizontalSubpixelPosition;
-
-		if ( observeElement ) {
-			observer = new window.MutationObserver( () =>
-				refresh( { subpixels: true } )
-			);
-			observer.observe( observeElement, { attributes: true } );
+		if ( __unstableObserveElement ) {
+			observer = new window.MutationObserver( refresh );
+			observer.observe( __unstableObserveElement, { attributes: true } );
 		}
 
 		return () => {
@@ -487,8 +450,7 @@ const Popover = ( {
 		position,
 		contentSize,
 		__unstableSticky,
-		__unstableAllowVerticalSubpixelPosition,
-		__unstableAllowHorizontalSubpixelPosition,
+		__unstableObserveElement,
 		__unstableBoundaryParent,
 	] );