From ff08eb94d5f0bfefa6ac33ba4d03862479277989 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 5 Jun 2023 16:38:57 +1000
Subject: [PATCH 1/3] DocumentActions: Animate between page and template mode

---
 .../document-actions/index.js                 | 44 ++++++++++-----
 .../document-actions/style.scss               | 53 ++++++++++++++++---
 2 files changed, 79 insertions(+), 18 deletions(-)

diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
index 5f14445ccefcd8..e04b59a55337b5 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ b/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,26 @@ function PageDocumentActions() {
 	}
 
 	return hasPageContentLock ? (
-		<BaseDocumentActions isPage icon={ pageIcon }>
+		<BaseDocumentActions
+			className={ classnames( 'is-page', {
+				'is-animated': hasEditedTemplate,
+			} ) }
+			icon={ pageIcon }
+		>
 			{ editedRecord.title }
 		</BaseDocumentActions>
 	) : (
 		<TemplateDocumentActions
-			onBack={ () => setHasPageContentLock( true ) }
+			className="is-animated"
+			onBack={ () => {
+				setHasEditedTemplate( true );
+				setHasPageContentLock( true );
+			} }
 		/>
 	);
 }
 
-function TemplateDocumentActions( { onBack } ) {
+function TemplateDocumentActions( { className, onBack } ) {
 	const { isLoaded, record, getTitle, icon } = useEditedEntityRecord();
 
 	if ( ! isLoaded ) {
@@ -95,7 +114,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 +131,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 +154,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">
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index 8bd3475de69564..766e7e2d87953d 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/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,12 +31,6 @@
 	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;
@@ -43,11 +38,30 @@
 		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.2s;
+		@include reduce-motion("animation");
+	}
+
+	.edit-site-document-actions.is-animated.is-page & {
+		animation: edit-site-document-actions__slide-in-right 0.2s;
+		@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.2s;
+		@include reduce-motion("animation");
+	}
+}
+
+@keyframes edit-site-document-actions__slide-in-right {
+	from {
+		transform: translateX(-40%);
+		opacity: 0;
+	}
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+@keyframes edit-site-document-actions__slide-in-left {
+	from {
+		transform: translateX(40%);
+		opacity: 0;
+	}
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
 }

From 063b5ac2a2b94cd00787cf5408075695c685192b Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 5 Jun 2023 19:42:22 +1000
Subject: [PATCH 2/3] Remove unnecessary setHasEditedTemplate()

---
 .../components/header-edit-mode/document-actions/index.js    | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
index e04b59a55337b5..c4f70f8b9c8c1e 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -85,10 +85,7 @@ function PageDocumentActions() {
 	) : (
 		<TemplateDocumentActions
 			className="is-animated"
-			onBack={ () => {
-				setHasEditedTemplate( true );
-				setHasPageContentLock( true );
-			} }
+			onBack={ () => setHasPageContentLock( true ) }
 		/>
 	);
 }

From 5279da6ccf6faa654974fdd67af055688d1d8a14 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 6 Jun 2023 10:00:41 +1000
Subject: [PATCH 3/3] refine toolbar animation

---
 .../header-edit-mode/document-actions/style.scss       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index 766e7e2d87953d..7421dc7a7b6dc0 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -48,12 +48,12 @@
 	}
 
 	.edit-site-document-actions.is-animated & {
-		animation: edit-site-document-actions__slide-in-left 0.2s;
+		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.2s;
+		animation: edit-site-document-actions__slide-in-right 0.3s;
 		@include reduce-motion("animation");
 	}
 }
@@ -75,14 +75,14 @@
 	z-index: 1;
 
 	.edit-site-document-actions.is-animated & {
-		animation: edit-site-document-actions__slide-in-left 0.2s;
+		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(-40%);
+		transform: translateX(-15%);
 		opacity: 0;
 	}
 	to {
@@ -93,7 +93,7 @@
 
 @keyframes edit-site-document-actions__slide-in-left {
 	from {
-		transform: translateX(40%);
+		transform: translateX(15%);
 		opacity: 0;
 	}
 	to {