Fix animation

WordPress · May 27, 2022 · fb0fab2 · fb0fab2
1 parent 9e02ae3
commit fb0fab2
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 31 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -416,7 +416,7 @@
 
 .is-root-container.is-exploded-mode > .wp-block {
 	transform: scale(0.8);
-	transform-origin: top center;
+	transform-origin: center center;
 	position: relative;
 	overflow: hidden;
 

diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -75,6 +75,7 @@ export function useBlockProps(
 		adjustScrolling,
 		enableAnimation,
 		isExplodedMode,
+		isRootBlock,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -88,6 +89,7 @@ export function useBlockProps(
 				isAncestorMultiSelected,
 				isFirstMultiSelectedBlock,
 				__unstableGetEditorMode,
+				getBlockRootClientId,
 			} = select( blockEditorStore );
 			const isSelected = isBlockSelected( clientId );
 			const isPartOfMultiSelection =
@@ -109,6 +111,7 @@ export function useBlockProps(
 					! isTyping() &&
 					getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
 				isExplodedMode: __unstableGetEditorMode() === 'exploded',
+				isRootBlock: ! getBlockRootClientId( clientId ),
 			};
 		},
 		[ clientId ]
@@ -131,7 +134,7 @@ export function useBlockProps(
 			adjustScrolling,
 			enableAnimation,
 			triggerAnimationOnChange: index,
-			scale: isExplodedMode ? 0.8 : 1,
+			scale: isExplodedMode && isRootBlock ? 0.8 : 1,
 		} ),
 		useDisabled( { isDisabled: ! __unstableIsDisabled } ),
 	] );

diff --git a/packages/block-editor/src/components/block-tools/selected-block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js
@@ -79,18 +79,18 @@ function SelectedBlockPopover( {
 	const { stopTyping } = useDispatch( blockEditorStore );
 
 	const showEmptyBlockSideInserter =
-		! isTyping && ! editorMode === 'visual' && isEmptyDefaultBlock;
+		! isTyping && ! editorMode === 'edit' && isEmptyDefaultBlock;
 	const shouldShowBreadcrumb =
 		editorMode === 'navigation' || editorMode === 'exploded';
 	const shouldShowContextualToolbar =
-		editorMode === 'visual' &&
+		editorMode === 'edit' &&
 		! hasFixedToolbar &&
 		isLargeViewport &&
 		! isMultiSelecting &&
 		! showEmptyBlockSideInserter &&
 		! isTyping;
 	const canFocusHiddenToolbar =
-		editorMode === 'visual' &&
+		editorMode === 'edit' &&
 		! shouldShowContextualToolbar &&
 		! hasFixedToolbar &&
 		! isEmptyDefaultBlock;

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( {
 		0
 	);
 	const [ finishedAnimation, endAnimation ] = useReducer( counterReducer, 0 );
-	const [ transform, setTransform ] = useState( { x: 0, y: 0 } );
+	const [ transform, setTransform ] = useState( { x: 0, y: 0, scale: 1 } );
 	const previous = useMemo(
 		() => ( ref.current ? getAbsolutePosition( ref.current ) : null ),
 		[ triggerAnimationOnChange ]
@@ -111,56 +111,44 @@ function useMovingAnimation( {
 			return;
 		}
 
-		ref.current.style.transform = '';
+		ref.current.style.transform = `scale( ${ scale } )`;
 		const destination = getAbsolutePosition( ref.current );
 
 		triggerAnimation();
 		setTransform( {
 			x: Math.round( previous.left - destination.left ),
 			y: Math.round( previous.top - destination.top ),
+			scale,
 		} );
 	}, [ triggerAnimationOnChange ] );
 
-	// Only called when either the x or y value changes.
-	function onFrameChange( { x, y } ) {
+	function onChange( { value } ) {
 		if ( ! ref.current ) {
 			return;
 		}
-
-		const isMoving = x === 0 && y === 0;
-		ref.current.style.transformOrigin = 'center';
-		ref.current.style.transform = isMoving
-			? `scale(${ scale })`
-			: `translate3d(${ x }px,${ y }px,0) scale(${ scale })`;
-		ref.current.style.zIndex = ! isSelected || isMoving ? '' : '1';
-
-		preserveScrollPosition();
-	}
-
-	// Called for every frame computed by useSpring.
-	function onChange( { value } ) {
-		let { x, y } = value;
+		let { x, y, scale: currentScale } = value;
 		x = Math.round( x );
 		y = Math.round( y );
+		const finishedMoving = x === 0 && y === 0 && currentScale === scale;
+		ref.current.style.transformOrigin = 'center center';
+		ref.current.style.transform = finishedMoving
+			? `scale( ${ scale } )`
+			: `translate3d(${ x }px,${ y }px,0) scale(${ currentScale })`;
+		ref.current.style.zIndex = isSelected ? '1' : '';
 
-		if ( x !== onChange.x || y !== onChange.y ) {
-			onFrameChange( { x, y } );
-			onChange.x = x;
-			onChange.y = y;
-		}
+		preserveScrollPosition();
 	}
 
-	onChange.x = 0;
-	onChange.y = 0;
-
 	useSpring( {
 		from: {
 			x: transform.x,
 			y: transform.y,
+			scale: transform.scale,
 		},
 		to: {
 			x: 0,
 			y: 0,
+			scale,
 		},
 		reset: triggeredAnimation !== finishedAnimation,
 		config: { mass: 5, tension: 2000, friction: 200 },

diff --git a/packages/dom/src/dom/get-scroll-container.js b/packages/dom/src/dom/get-scroll-container.js
@@ -19,11 +19,16 @@ export default function getScrollContainer( node ) {
 	if ( node.scrollHeight > node.clientHeight ) {
 		// ...except when overflow is defined to be hidden or visible
 		const { overflowY } = getComputedStyle( node );
+
 		if ( /(auto|scroll)/.test( overflowY ) ) {
 			return node;
 		}
 	}
 
+	if ( node.ownerDocument === node.parentNode ) {
+		return node;
+	}
+
 	// Continue traversing.
 	return getScrollContainer( /** @type {Element} */ ( node.parentNode ) );
 }