Tree Grid: use framer motion for all animations

WordPress · Jul 30, 2021 · 7481f98 · 7481f98
1 parent 9a47c2c
commit 7481f98
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 77 deletions.
diff --git a/packages/block-editor/src/components/list-view/appender.js b/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>
 	);
 }
diff --git a/packages/block-editor/src/components/list-view/block.js b/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,7 +42,6 @@ export default function ListViewBlock( {
 	rowCount,
 	siblingBlockCount,
 	showBlockMovers,
-	path,
 	isExpanded,
 } ) {
 	const cellRef = useRef( null );
@@ -122,6 +121,7 @@ export default function ListViewBlock( {
 	};
 
 	const classes = classnames( {
+		'block-editor-list-view-leaf': true,
 		'is-selected': isSelected,
 		'is-branch-selected':
 			withExperimentalPersistentListViewFeatures && isBranchSelected,
@@ -132,16 +132,15 @@ 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 }
@@ -243,6 +242,6 @@ export default function ListViewBlock( {
 					) }
 				</TreeGridCell>
 			) }
-		</ListViewLeaf>
+		</TreeGridRow>
 	);
 }
diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
@@ -27,7 +27,6 @@ export default function ListViewBranch( props ) {
 		parentBlockClientId,
 		level = 1,
 		terminatedLevels = [],
-		path = [],
 		isBranchSelected = false,
 		isLastOfBranch = false,
 	} = props;
@@ -55,7 +54,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 );
@@ -108,7 +106,6 @@ export default function ListViewBranch( props ) {
 							siblingBlockCount={ blockCount }
 							showBlockMovers={ showBlockMovers }
 							terminatedLevels={ terminatedLevels }
-							path={ updatedPath }
 							isExpanded={ isExpanded }
 						/>
 						{ hasNestedBranch && isExpanded && (
@@ -126,7 +123,6 @@ export default function ListViewBranch( props ) {
 								parentBlockClientId={ clientId }
 								level={ level + 1 }
 								terminatedLevels={ updatedTerminatedLevels }
-								path={ updatedPath }
 							/>
 						) }
 					</Fragment>
@@ -139,7 +135,6 @@ export default function ListViewBranch( props ) {
 					rowCount={ appenderPosition }
 					level={ level }
 					terminatedLevels={ terminatedLevels }
-					path={ [ ...path, appenderPosition ] }
 				/>
 			) }
 		</>

diff --git a/packages/block-editor/src/components/list-view/leaf.js b/packages/block-editor/src/components/list-view/leaf.js
diff --git a/packages/block-editor/src/components/list-view/style.scss b/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 );
 }

diff --git a/packages/components/src/tree-grid/index.js b/packages/components/src/tree-grid/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { includes } from 'lodash';
+import { motion, AnimateSharedLayout } from 'framer-motion';
 
 /**
  * WordPress dependencies
@@ -43,10 +44,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.motionEnabled Boolean item 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 = () => {},
+		motionEnabled = true,
+		...props
+	},
 	ref
 ) {
 	const onKeyDown = useCallback( ( event ) => {
@@ -201,7 +209,11 @@ function TreeGrid(
 				onKeyDown={ onKeyDown }
 				ref={ ref }
 			>
-				<tbody>{ children }</tbody>
+				<AnimateSharedLayout>
+					<motion.tbody layout={ motionEnabled }>
+						{ children }
+					</motion.tbody>
+				</AnimateSharedLayout>
 			</table>
 		</RovingTabIndexContainer>
 	);

diff --git a/packages/components/src/tree-grid/row.js b/packages/components/src/tree-grid/row.js
@@ -1,10 +1,37 @@
+/**
+ * External dependencies
+ */
+import { motion } from 'framer-motion';
+
 /**
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
 
+const TREE_GRID_ROW_VARIANTS = {
+	init: {
+		opacity: 0,
+	},
+	open: {
+		opacity: 1,
+	},
+	exit: {
+		opacity: 0,
+	},
+};
+
+const NO_MOTION_VARIANTS = { init: false, open: false, exit: false };
+
 function TreeGridRow(
-	{ children, level, positionInSet, setSize, isExpanded, ...props },
+	{
+		children,
+		level,
+		positionInSet,
+		setSize,
+		isExpanded,
+		motionEnabled = true,
+		...props
+	},
 	ref
 ) {
 	return (
@@ -14,7 +41,14 @@ function TreeGridRow(
 		// linting rule fails when validating this markup.
 		//
 		// eslint-disable-next-line jsx-a11y/role-supports-aria-props
-		<tr
+		<motion.tr
+			layout={ motionEnabled }
+			initial={ 'init' }
+			animate={ 'open' }
+			exit={ 'exit' }
+			variants={
+				motionEnabled ? TREE_GRID_ROW_VARIANTS : NO_MOTION_VARIANTS
+			}
 			{ ...props }
 			ref={ ref }
 			role="row"
@@ -24,7 +58,7 @@ function TreeGridRow(
 			aria-expanded={ isExpanded }
 		>
 			{ children }
-		</tr>
+		</motion.tr>
 	);
 }
 

diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss
@@ -45,7 +45,8 @@
 }
 
 .edit-post-editor__list-view-panel-content {
-	overflow-y: auto;
+	overflow-y: scroll; //TODO: avoids scaling distortions, also double check in other block editors
+	overflow-x: hidden;
 	// The table cells use an extra pixels of space left and right. We compensate for that here.
 	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
 }