DocumentActions: Animate between page and template mode (WordPress#51224)

* DocumentActions: Animate between page and template mode

* Remove unnecessary setHasEditedTemplate()

* refine toolbar animation

---------

Co-authored-by: Saxon Fletcher <[email protected]>

Author: 2 people

packages/edit-site/src/components/header-edit-mode/document-actions/index.js

@@ -22,6 +22,7 @@ import {
 } from '@wordpress/icons';
 import { useEntityRecord } from '@wordpress/core-data';
 import { displayShortcut } from '@wordpress/keycodes';
+import { useState, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -51,6 +52,15 @@ function PageDocumentActions() {
 
 	const { setHasPageContentLock } = useDispatch( editSiteStore );
 
+	const [ hasEditedTemplate, setHasEditedTemplate ] = useState( false );
+	const prevHasPageContentLock = useRef( false );
+	useEffect( () => {
+		if ( prevHasPageContentLock.current && ! hasPageContentLock ) {
+			setHasEditedTemplate( true );
+		}
+		prevHasPageContentLock.current = hasPageContentLock;
+	}, [ hasPageContentLock ] );
+
 	if ( ! hasResolved ) {
 		return null;
 	}
@@ -64,17 +74,23 @@ function PageDocumentActions() {
 	}
 
 	return hasPageContentLock ? (
-		<BaseDocumentActions isPage icon={ pageIcon }>
+		<BaseDocumentActions
+			className={ classnames( 'is-page', {
+				'is-animated': hasEditedTemplate,
+			} ) }
+			icon={ pageIcon }
+		>
 			{ editedRecord.title }
 		</BaseDocumentActions>
 	) : (
 		<TemplateDocumentActions
+			className="is-animated"
 			onBack={ () => setHasPageContentLock( true ) }
 		/>
 	);
 }
 
-function TemplateDocumentActions( { onBack } ) {
+function TemplateDocumentActions( { className, onBack } ) {
 	const { isLoaded, record, getTitle, icon } = useEditedEntityRecord();
 
 	if ( ! isLoaded ) {
@@ -95,7 +111,11 @@ function TemplateDocumentActions( { onBack } ) {
 			: __( 'template' );
 
 	return (
-		<BaseDocumentActions icon={ icon } onBack={ onBack }>
+		<BaseDocumentActions
+			className={ className }
+			icon={ icon }
+			onBack={ onBack }
+		>
 			<VisuallyHidden as="span">
 				{ sprintf(
 					/* translators: %s: the entity being edited, like "template"*/
@@ -108,10 +128,12 @@ function TemplateDocumentActions( { onBack } ) {
 	);
 }
 
-function BaseDocumentActions( { icon, children, onBack, isPage = false } ) {
+function BaseDocumentActions( { className, icon, children, onBack } ) {
 	const { open: openCommandCenter } = useDispatch( commandsStore );
 	return (
-		<div className="edit-site-document-actions">
+		<div
+			className={ classnames( 'edit-site-document-actions', className ) }
+		>
 			{ onBack && (
 				<Button
 					className="edit-site-document-actions__back"
@@ -129,14 +151,9 @@ function BaseDocumentActions( { icon, children, onBack, isPage = false } ) {
 				onClick={ () => openCommandCenter() }
 			>
 				<HStack
+					className="edit-site-document-actions__title"
 					spacing={ 1 }
 					justify="center"
-					className={ classnames(
-						'edit-site-document-actions__title',
-						{
-							'is-page': isPage,
-						}
-					) }
 				>
 					<BlockIcon icon={ icon } />
 					<Text size="body" as="h1">

packages/edit-site/src/components/header-edit-mode/document-actions/style.scss

@@ -10,6 +10,7 @@
 	background: $gray-100;
 	border-radius: 4px;
 	width: min(100%, 450px);
+	overflow: hidden;
 
 	&:hover {
 		color: currentColor;
@@ -30,24 +31,37 @@
 	color: var(--wp-block-synced-color);
 	overflow: hidden;
 	grid-column: 2 / 3;
-	&.is-page {
-		color: $gray-800;
-		h1 {
-			color: $gray-800;
-		}
-	}
 
 	h1 {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		color: var(--wp-block-synced-color);
 	}
+
+	.edit-site-document-actions.is-page & {
+		color: $gray-800;
+
+		h1 {
+			color: $gray-800;
+		}
+	}
+
+	.edit-site-document-actions.is-animated & {
+		animation: edit-site-document-actions__slide-in-left 0.3s;
+		@include reduce-motion("animation");
+	}
+
+	.edit-site-document-actions.is-animated.is-page & {
+		animation: edit-site-document-actions__slide-in-right 0.3s;
+		@include reduce-motion("animation");
+	}
 }
 
 .edit-site-document-actions__shortcut {
 	color: $gray-700;
 	text-align: right;
+
 	&:hover {
 		color: $gray-700;
 	}
@@ -59,4 +73,31 @@
 	grid-column: 1 / 2;
 	grid-row: 1;
 	z-index: 1;
+
+	.edit-site-document-actions.is-animated & {
+		animation: edit-site-document-actions__slide-in-left 0.3s;
+		@include reduce-motion("animation");
+	}
+}
+
+@keyframes edit-site-document-actions__slide-in-right {
+	from {
+		transform: translateX(-15%);
+		opacity: 0;
+	}
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+@keyframes edit-site-document-actions__slide-in-left {
+	from {
+		transform: translateX(15%);
+		opacity: 0;
+	}
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
 }