Tree Grid: use framer motion for all animations

packages/block-editor/src/components/list-view/appender.js

@@ -6,15 +6,17 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __experimentalTreeGridCell as TreeGridCell } from '@wordpress/components';
+import {
+	__experimentalTreeGridCell as TreeGridCell,
+	__experimentalTreeGridRow as TreeGridRow,
+} from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import ListViewLeaf from './leaf';
 import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
 
@@ -23,7 +25,6 @@ export default function ListViewAppender( {
 	position,
 	level,
 	rowCount,
-	path,
 } ) {
 	const isDragging = useSelect(
 		( select ) => {
@@ -49,12 +50,13 @@ export default function ListViewAppender( {
 	);
 
 	return (
-		<ListViewLeaf
-			className={ classnames( { 'is-dragging': isDragging } ) }
+		<TreeGridRow
+			className={ classnames( 'block-editor-list-view-leaf', {
+				'is-dragging': isDragging,
+			} ) }
 			level={ level }
-			position={ position }
-			rowCount={ rowCount }
-			path={ path }
+			positionInSet={ position }
+			setSize={ rowCount }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-appender__cell"
@@ -77,6 +79,6 @@ export default function ListViewAppender( {
 					</div>
 				) }
 			</TreeGridCell>
-		</ListViewLeaf>
+		</TreeGridRow>
 	);
 }

packages/block-editor/src/components/list-view/block.js

@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
+	__experimentalTreeGridRow as TreeGridRow,
 	MenuGroup,
 	MenuItem,
 } from '@wordpress/components';
@@ -20,7 +21,6 @@ import { useDispatch, useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import ListViewLeaf from './leaf';
 import {
 	BlockMoverUpButton,
 	BlockMoverDownButton,
@@ -42,8 +42,8 @@ export default function ListViewBlock( {
 	rowCount,
 	siblingBlockCount,
 	showBlockMovers,
-	path,
 	isExpanded,
+	animateToggleOpen,
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -81,6 +81,7 @@ export default function ListViewBlock( {
 		__experimentalFeatures: withExperimentalFeatures,
 		__experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
 		isTreeGridMounted,
+		animate,
 	} = useListViewContext();
 	const listViewBlockSettingsClassName = classnames(
 		'block-editor-list-view-block__menu-cell',
@@ -122,6 +123,7 @@ export default function ListViewBlock( {
 	};
 
 	const classes = classnames( {
+		'block-editor-list-view-leaf': true,
 		'is-selected': isSelected,
 		'is-branch-selected':
 			withExperimentalPersistentListViewFeatures && isBranchSelected,
@@ -132,19 +134,20 @@ export default function ListViewBlock( {
 	} );
 
 	return (
-		<ListViewLeaf
+		<TreeGridRow
 			className={ classes }
 			onMouseEnter={ onMouseEnter }
 			onMouseLeave={ onMouseLeave }
 			onFocus={ onMouseEnter }
 			onBlur={ onMouseLeave }
 			level={ level }
-			position={ position }
-			rowCount={ rowCount }
-			path={ path }
+			positionInSet={ position }
+			setSize={ rowCount }
 			id={ `list-view-block-${ clientId }` }
 			data-block={ clientId }
 			isExpanded={ isExpanded }
+			animate={ animate }
+			animateOnMount={ animateToggleOpen }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
@@ -243,6 +246,6 @@ export default function ListViewBlock( {
 					) }
 				</TreeGridCell>
 			) }
-		</ListViewLeaf>
+		</TreeGridRow>
 	);
 }

packages/block-editor/src/components/list-view/branch.js

@@ -27,9 +27,9 @@ export default function ListViewBranch( props ) {
 		parentBlockClientId,
 		level = 1,
 		terminatedLevels = [],
-		path = [],
 		isBranchSelected = false,
 		isLastOfBranch = false,
+		animateToggleOpen = false,
 	} = props;
 
 	const isTreeRoot = ! parentBlockClientId;
@@ -44,7 +44,13 @@ export default function ListViewBranch( props ) {
 	const rowCount = hasAppender ? blockCount + 1 : blockCount;
 	const appenderPosition = rowCount;
 
-	const { expandedState, expand, collapse } = useListViewContext();
+	const {
+		expandedState,
+		expand,
+		collapse,
+		isTreeGridMounted,
+		animate,
+	} = useListViewContext();
 
 	return (
 		<>
@@ -55,7 +61,6 @@ export default function ListViewBranch( props ) {
 				const updatedTerminatedLevels = isLastRowAtLevel
 					? [ ...terminatedLevels, level ]
 					: terminatedLevels;
-				const updatedPath = [ ...path, position ];
 				const hasNestedBlocks =
 					showNestedBlocks && !! innerBlocks && !! innerBlocks.length;
 				const hasNestedAppender = itemHasAppender( clientId );
@@ -93,6 +98,13 @@ export default function ListViewBranch( props ) {
 					}
 				};
 
+				const animateToggle =
+					animate &&
+					( animateToggleOpen ||
+						( isExpanded &&
+							isTreeGridMounted &&
+							expandedState[ clientId ] !== undefined ) );
+
 				return (
 					<Fragment key={ clientId }>
 						<ListViewBlock
@@ -108,8 +120,8 @@ export default function ListViewBranch( props ) {
 							siblingBlockCount={ blockCount }
 							showBlockMovers={ showBlockMovers }
 							terminatedLevels={ terminatedLevels }
-							path={ updatedPath }
 							isExpanded={ isExpanded }
+							animateToggleOpen={ animateToggle }
 						/>
 						{ hasNestedBranch && isExpanded && (
 							<ListViewBranch
@@ -126,7 +138,7 @@ export default function ListViewBranch( props ) {
 								parentBlockClientId={ clientId }
 								level={ level + 1 }
 								terminatedLevels={ updatedTerminatedLevels }
-								path={ updatedPath }
+								animateToggleOpen={ animateToggle }
 							/>
 						) }
 					</Fragment>
@@ -139,7 +151,6 @@ export default function ListViewBranch( props ) {
 					rowCount={ appenderPosition }
 					level={ level }
 					terminatedLevels={ terminatedLevels }
-					path={ [ ...path, appenderPosition ] }
 				/>
 			) }
 		</>

packages/block-editor/src/components/list-view/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useReducedMotion } from '@wordpress/compose';
 import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import {
@@ -100,6 +100,8 @@ export default function ListView( {
 		collapse( row?.dataset?.block );
 	};
 
+	const animate = ! useReducedMotion();
+
 	const contextValue = useMemo(
 		() => ( {
 			__experimentalFeatures,
@@ -108,6 +110,7 @@ export default function ListView( {
 			expandedState,
 			expand,
 			collapse,
+			animate,
 		} ),
 		[
 			__experimentalFeatures,
@@ -116,6 +119,7 @@ export default function ListView( {
 			expandedState,
 			expand,
 			collapse,
+			animate,
 		]
 	);
 
@@ -131,6 +135,7 @@ export default function ListView( {
 				ref={ treeGridRef }
 				onCollapseRow={ collapseRow }
 				onExpandRow={ expandRow }
+				animate={ animate }
 			>
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch

packages/block-editor/src/components/list-view/style.scss

@@ -269,9 +269,9 @@
 	width: $icon-size;
 }
 
-// First level of indentation is aria-level 2, max indent is 8.
+// First level of indentation is aria-level 2, max indent is 7.
 // Indent is a full icon size, plus 4px which optically aligns child icons to the text label above.
-$block-navigation-max-indent: 8;
+$block-navigation-max-indent: 7;
 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
 	margin-left: ( $icon-size ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 );
 }

packages/components/src/tree-grid/index.js

@@ -14,6 +14,10 @@ import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import RovingTabIndexContainer from './roving-tab-index';
+import {
+	__unstableMotion as motion,
+	__unstableAnimateSharedLayout as AnimateSharedLayout,
+} from '../animation';
 
 /**
  * Return focusables in a row element, excluding those from other branches
@@ -43,10 +47,17 @@ function getRowFocusables( rowElement ) {
  * @param {WPElement} props.children      Children to be rendered.
  * @param {Function}  props.onExpandRow   Callback to fire when row is expanded.
  * @param {Function}  props.onCollapseRow Callback to fire when row is collapsed.
+ * @param {boolean}   props.animate       Boolean layout animation is enabled when true.
  * @param {Object}    ref                 A ref to the underlying DOM table element.
  */
 function TreeGrid(
-	{ children, onExpandRow = () => {}, onCollapseRow = () => {}, ...props },
+	{
+		children,
+		onExpandRow = () => {},
+		onCollapseRow = () => {},
+		animate = false,
+		...props
+	},
 	ref
 ) {
 	const onKeyDown = useCallback( ( event ) => {
@@ -201,7 +212,11 @@ function TreeGrid(
 				onKeyDown={ onKeyDown }
 				ref={ ref }
 			>
-				<tbody>{ children }</tbody>
+				<AnimateSharedLayout>
+					<motion.tbody layout={ animate ? 'position' : false }>
+						{ children }
+					</motion.tbody>
+				</AnimateSharedLayout>
 			</table>
 		</RovingTabIndexContainer>
 	);