Only fade in on list view toggle open

WordPress · Aug 5, 2021 · b5c7b46 · b5c7b46
1 parent 1fd3136
commit b5c7b46
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
@@ -43,6 +43,7 @@ export default function ListViewBlock( {
 	siblingBlockCount,
 	showBlockMovers,
 	isExpanded,
+	animateToggleOpen,
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -144,6 +145,7 @@ export default function ListViewBlock( {
 			id={ `list-view-block-${ clientId }` }
 			data-block={ clientId }
 			isExpanded={ isExpanded }
+			animateOnMount={ animateToggleOpen }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"

diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
@@ -29,6 +29,7 @@ export default function ListViewBranch( props ) {
 		terminatedLevels = [],
 		isBranchSelected = false,
 		isLastOfBranch = false,
+		animateToggleOpen = false,
 	} = props;
 
 	const isTreeRoot = ! parentBlockClientId;
@@ -43,7 +44,12 @@ export default function ListViewBranch( props ) {
 	const rowCount = hasAppender ? blockCount + 1 : blockCount;
 	const appenderPosition = rowCount;
 
-	const { expandedState, expand, collapse } = useListViewContext();
+	const {
+		expandedState,
+		expand,
+		collapse,
+		isTreeGridMounted,
+	} = useListViewContext();
 
 	return (
 		<>
@@ -91,6 +97,12 @@ export default function ListViewBranch( props ) {
 					}
 				};
 
+				const animate =
+					animateToggleOpen ||
+					( isExpanded &&
+						isTreeGridMounted &&
+						expandedState[ clientId ] !== undefined );
+
 				return (
 					<Fragment key={ clientId }>
 						<ListViewBlock
@@ -107,6 +119,7 @@ export default function ListViewBranch( props ) {
 							showBlockMovers={ showBlockMovers }
 							terminatedLevels={ terminatedLevels }
 							isExpanded={ isExpanded }
+							animateToggleOpen={ animate }
 						/>
 						{ hasNestedBranch && isExpanded && (
 							<ListViewBranch
@@ -123,6 +136,7 @@ export default function ListViewBranch( props ) {
 								parentBlockClientId={ clientId }
 								level={ level + 1 }
 								terminatedLevels={ updatedTerminatedLevels }
+								animateToggleOpen={ animate }
 							/>
 						) }
 					</Fragment>

diff --git a/packages/components/src/tree-grid/index.js b/packages/components/src/tree-grid/index.js
@@ -17,7 +17,6 @@ import RovingTabIndexContainer from './roving-tab-index';
 import {
 	__unstableMotion as motion,
 	__unstableAnimateSharedLayout as AnimateSharedLayout,
-	__unstableAnimatePresence as AnimatePresence,
 } from '../animation';
 
 /**
@@ -215,9 +214,7 @@ function TreeGrid(
 			>
 				<AnimateSharedLayout>
 					<motion.tbody layout={ motionEnabled ? 'position' : false }>
-						<AnimatePresence>
-							{ children }
-						</AnimatePresence>
+						{ children }
 					</motion.tbody>
 				</AnimateSharedLayout>
 			</table>

diff --git a/packages/components/src/tree-grid/row.js b/packages/components/src/tree-grid/row.js
@@ -15,12 +15,9 @@ const TREE_GRID_ROW_VARIANTS = {
 	open: {
 		opacity: 1,
 	},
-	exit: {
-		opacity: 0,
-	},
 };
 
-const NO_MOTION_VARIANTS = { init: false, open: false, exit: false };
+const NO_MOTION_VARIANTS = { init: false, open: false };
 
 function TreeGridRow(
 	{
@@ -30,6 +27,7 @@ function TreeGridRow(
 		setSize,
 		isExpanded,
 		motionEnabled = true,
+		animateOnMount = false,
 		...props
 	},
 	ref
@@ -43,9 +41,8 @@ function TreeGridRow(
 		// eslint-disable-next-line jsx-a11y/role-supports-aria-props
 		<motion.tr
 			layout={ motionEnabled ? 'position' : false }
-			initial={ 'init' }
+			initial={ animateOnMount ? 'init' : false }
 			animate={ 'open' }
-			exit={ 'exit' }
 			variants={
 				motionEnabled ? TREE_GRID_ROW_VARIANTS : NO_MOTION_VARIANTS
 			}