DocumentBar: Simplify component, use framer for animation (WordPress#…

…58656) * DocumentBar: Simplify component, use framer for animation * Disable animation if reduced motion is on Co-authored-by: noisysocks <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: youknowriad <[email protected]>
akasunil · Feb 20, 2024 · 0dc55a8 · 0dc55a8
1 parent e9980ac
commit 0dc55a8
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 126 deletions.
diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js
@@ -12,6 +12,8 @@ import {
 	Button,
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
 import {
@@ -22,16 +24,17 @@ import {
 	symbol,
 } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
-import { useEntityRecord } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 import { store as commandsStore } from '@wordpress/commands';
-import { useState, useEffect, useRef } from '@wordpress/element';
+import { useRef, useEffect } from '@wordpress/element';
+import { useReducedMotion } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-const typeLabels = {
+const TYPE_LABELS = {
 	// translators: 1: Pattern title.
 	wp_pattern: __( 'Editing pattern: %s' ),
 	// translators: 1: Navigation menu title.
@@ -42,127 +45,149 @@ const typeLabels = {
 	wp_template_part: __( 'Editing template part: %s' ),
 };
 
-const icons = {
+const ICONS = {
 	wp_block: symbol,
 	wp_navigation: navigationIcon,
 };
 
-export default function DocumentBar() {
-	const { postType, postId, onNavigateToPreviousEntityRecord } = useSelect(
-		( select ) => {
-			const {
-				getCurrentPostId,
-				getCurrentPostType,
-				getEditorSettings: getSettings,
-			} = select( editorStore );
-			return {
-				postType: getCurrentPostType(),
-				postId: getCurrentPostId(),
-				onNavigateToPreviousEntityRecord:
-					getSettings().onNavigateToPreviousEntityRecord,
-				getEditorSettings: getSettings,
-			};
-		},
-		[]
-	);
+const TEMPLATE_POST_TYPES = [ 'wp_template', 'wp_template_part' ];
 
-	const handleOnBack = () => {
-		if ( onNavigateToPreviousEntityRecord ) {
-			onNavigateToPreviousEntityRecord();
-		}
-	};
+const GLOBAL_POST_TYPES = [
+	...TEMPLATE_POST_TYPES,
+	'wp_block',
+	'wp_navigation',
+];
 
-	return (
-		<BaseDocumentActions
-			postType={ postType }
-			postId={ postId }
-			onBack={
-				onNavigateToPreviousEntityRecord ? handleOnBack : undefined
-			}
-		/>
-	);
-}
+const MotionButton = motion( Button );
 
-function BaseDocumentActions( { postType, postId, onBack } ) {
-	const { open: openCommandCenter } = useDispatch( commandsStore );
-	const { editedRecord: doc, isResolving } = useEntityRecord(
-		'postType',
+export default function DocumentBar() {
+	const {
 		postType,
-		postId
-	);
-	const { templateIcon, templateTitle } = useSelect( ( select ) => {
-		const { __experimentalGetTemplateInfo: getTemplateInfo } =
-			select( editorStore );
-		const templateInfo = getTemplateInfo( doc );
+		document,
+		isResolving,
+		templateIcon,
+		templateTitle,
+		onNavigateToPreviousEntityRecord,
+	} = useSelect( ( select ) => {
+		const {
+			getCurrentPostType,
+			getCurrentPostId,
+			getEditorSettings,
+			__experimentalGetTemplateInfo: getTemplateInfo,
+		} = select( editorStore );
+		const { getEditedEntityRecord, getIsResolving } = select( coreStore );
+		const _postType = getCurrentPostType();
+		const _postId = getCurrentPostId();
+		const _document = getEditedEntityRecord(
+			'postType',
+			_postType,
+			_postId
+		);
+		const _templateInfo = getTemplateInfo( _document );
 		return {
-			templateIcon: templateInfo.icon,
-			templateTitle: templateInfo.title,
+			postType: _postType,
+			document: _document,
+			isResolving: getIsResolving(
+				'getEditedEntityRecord',
+				'postType',
+				_postType,
+				_postId
+			),
+			templateIcon: _templateInfo.icon,
+			templateTitle: _templateInfo.title,
+			onNavigateToPreviousEntityRecord:
+				getEditorSettings().onNavigateToPreviousEntityRecord,
 		};
-	} );
-	const isNotFound = ! doc && ! isResolving;
-	const icon = icons[ postType ] ?? pageIcon;
-	const [ isAnimated, setIsAnimated ] = useState( false );
-	const isMounting = useRef( true );
-	const isTemplate = [ 'wp_template', 'wp_template_part' ].includes(
-		postType
-	);
-	const isGlobalEntity = [
-		'wp_template',
-		'wp_navigation',
-		'wp_template_part',
-		'wp_block',
-	].includes( postType );
+	}, [] );
 
-	useEffect( () => {
-		if ( ! isMounting.current ) {
-			setIsAnimated( true );
-		}
-		isMounting.current = false;
-	}, [ postType, postId ] );
+	const { open: openCommandCenter } = useDispatch( commandsStore );
+	const isReducedMotion = useReducedMotion();
+
+	const isNotFound = ! document && ! isResolving;
+	const icon = ICONS[ postType ] ?? pageIcon;
+	const isTemplate = TEMPLATE_POST_TYPES.includes( postType );
+	const isGlobalEntity = GLOBAL_POST_TYPES.includes( postType );
+	const hasBackButton = !! onNavigateToPreviousEntityRecord;
+	const title = isTemplate ? templateTitle : document.title;
 
-	const title = isTemplate ? templateTitle : doc.title;
+	const mounted = useRef( false );
+	useEffect( () => {
+		mounted.current = true;
+	}, [] );
 
 	return (
 		<div
 			className={ classnames( 'editor-document-bar', {
-				'has-back-button': !! onBack,
-				'is-animated': isAnimated,
+				'has-back-button': hasBackButton,
 				'is-global': isGlobalEntity,
 			} ) }
 		>
-			{ onBack && (
-				<Button
-					className="editor-document-bar__back"
-					icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
-					onClick={ ( event ) => {
-						event.stopPropagation();
-						onBack();
-					} }
-					size="compact"
-				>
-					{ __( 'Back' ) }
-				</Button>
-			) }
-			{ isNotFound && <Text>{ __( 'Document not found' ) }</Text> }
-			{ ! isNotFound && (
+			<AnimatePresence>
+				{ hasBackButton && (
+					<MotionButton
+						className="editor-document-bar__back"
+						icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
+						onClick={ ( event ) => {
+							event.stopPropagation();
+							onNavigateToPreviousEntityRecord();
+						} }
+						size="compact"
+						initial={
+							mounted.current
+								? { opacity: 0, transform: 'translateX(15%)' }
+								: false // Don't show entry animation when DocumentBar mounts.
+						}
+						animate={ { opacity: 1, transform: 'translateX(0%)' } }
+						exit={ { opacity: 0, transform: 'translateX(15%)' } }
+						transition={
+							isReducedMotion ? { duration: 0 } : undefined
+						}
+					>
+						{ __( 'Back' ) }
+					</MotionButton>
+				) }
+			</AnimatePresence>
+			{ isNotFound ? (
+				<Text>{ __( 'Document not found' ) }</Text>
+			) : (
 				<Button
 					className="editor-document-bar__command"
 					onClick={ () => openCommandCenter() }
 					size="compact"
 				>
 					<HStack
+						as={ motion.div }
 						className="editor-document-bar__title"
 						spacing={ 1 }
 						justify="center"
+						// Force entry animation when the back button is added or removed.
+						key={ hasBackButton }
+						initial={
+							mounted.current
+								? {
+										opacity: 0,
+										transform: hasBackButton
+											? 'translateX(15%)'
+											: 'translateX(-15%)',
+								  }
+								: false // Don't show entry animation when DocumentBar mounts.
+						}
+						animate={ {
+							opacity: 1,
+							transform: 'translateX(0%)',
+						} }
+						transition={
+							isReducedMotion ? { duration: 0 } : undefined
+						}
 					>
 						<BlockIcon icon={ isTemplate ? templateIcon : icon } />
 						<Text
 							size="body"
 							as="h1"
 							aria-label={
-								typeLabels[ postType ]
+								TYPE_LABELS[ postType ]
 									? // eslint-disable-next-line @wordpress/valid-sprintf
-									  sprintf( typeLabels[ postType ], title )
+									  sprintf( TYPE_LABELS[ postType ], title )
 									: undefined
 							}
 						>

diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss
@@ -66,16 +66,6 @@
 		max-width: 50%;
 		color: currentColor;
 	}
-
-	.editor-document-bar.is-animated.has-back-button & {
-		animation: editor-document-bar__slide-in-left 0.3s;
-		@include reduce-motion("animation");
-	}
-
-	.editor-document-bar.is-animated & {
-		animation: editor-document-bar__slide-in-right 0.3s;
-		@include reduce-motion("animation");
-	}
 }
 
 .editor-document-bar__shortcut {
@@ -100,31 +90,4 @@
 		color: var(--wp-block-synced-color);
 		background-color: transparent;
 	}
-
-	.editor-document-bar.is-animated & {
-		animation: editor-document-bar__slide-in-left 0.3s;
-		@include reduce-motion("animation");
-	}
-}
-
-@keyframes editor-document-bar__slide-in-right {
-	from {
-		transform: translateX(-15%);
-		opacity: 0;
-	}
-	to {
-		transform: translateX(0);
-		opacity: 1;
-	}
-}
-
-@keyframes editor-document-bar__slide-in-left {
-	from {
-		transform: translateX(15%);
-		opacity: 0;
-	}
-	to {
-		transform: translateX(0);
-		opacity: 1;
-	}
 }