From a0acf14821172632d8dbcaac462b7fcd33bc6e65 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 31 May 2024 07:38:18 +0100
Subject: [PATCH 1/3] Distraction Free: Unify the header animation

---
 .../edit-site/src/components/editor/index.js  | 53 ++---------
 .../editor/src/components/header/index.js     | 29 ++++--
 .../components/interface-skeleton/index.js    | 94 ++++++++++++-------
 3 files changed, 91 insertions(+), 85 deletions(-)

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index ada8367f701748..0384b3c80ab42d 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -7,16 +7,8 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	Notice,
-	__unstableAnimatePresence as AnimatePresence,
-	__unstableMotion as motion,
-} from '@wordpress/components';
-import {
-	useInstanceId,
-	useViewportMatch,
-	useReducedMotion,
-} from '@wordpress/compose';
+import { Notice } from '@wordpress/components';
+import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	BlockBreadcrumb,
@@ -80,8 +72,6 @@ const interfaceLabels = {
 	header: __( 'Editor top bar' ),
 };
 
-const ANIMATION_DURATION = 0.25;
-
 export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
@@ -92,7 +82,6 @@ export default function Editor( { isLoading } ) {
 	const { type: editedPostType } = editedPost;
 
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const disableMotion = useReducedMotion();
 
 	const {
 		context,
@@ -292,37 +281,13 @@ export default function Editor( { isLoading } ) {
 							}
 						) }
 						header={
-							<AnimatePresence initial={ false }>
-								{ canvasMode === 'edit' && (
-									<motion.div
-										initial={ {
-											marginTop: -60,
-										} }
-										animate={ {
-											marginTop: 0,
-										} }
-										exit={ {
-											marginTop: -60,
-										} }
-										transition={ {
-											type: 'tween',
-											duration:
-												// Disable transition in mobile to emulate a full page transition.
-												disableMotion ||
-												! isLargeViewport
-													? 0
-													: ANIMATION_DURATION,
-											ease: [ 0.6, 0, 0.4, 1 ],
-										} }
-									>
-										<Header
-											setEntitiesSavedStatesCallback={
-												setEntitiesSavedStatesCallback
-											}
-										/>
-									</motion.div>
-								) }
-							</AnimatePresence>
+							canvasMode === 'edit' && (
+								<Header
+									setEntitiesSavedStatesCallback={
+										setEntitiesSavedStatesCallback
+									}
+								/>
+							)
 						}
 						actions={
 							<SavePublishPanels
diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
index 477ce41c968a6a..dea1d1dba9dd6d 100644
--- a/packages/editor/src/components/header/index.js
+++ b/packages/editor/src/components/header/index.js
@@ -30,10 +30,20 @@ import PostViewLink from '../post-view-link';
 import PreviewDropdown from '../preview-dropdown';
 import { store as editorStore } from '../../store';
 
-const slideY = {
-	hidden: { y: '-50px' },
-	distractionFreeInactive: { y: 0 },
-	hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
+const toolbarVariations = {
+	distractionFreeDisabled: { y: '-50px' },
+	distractionFreeHover: { y: 0 },
+	distractionFreeHidden: { y: '-50px' },
+	visible: { y: 0 },
+	hidden: { y: 0 },
+};
+
+const backButtonVariations = {
+	distractionFreeDisabled: { x: '-100%' },
+	distractionFreeHover: { x: 0 },
+	distractionFreeHidden: { x: '-100%' },
+	visible: { x: 0 },
+	hidden: { x: 0 },
 };
 
 function Header( {
@@ -81,9 +91,14 @@ function Header( {
 	// as some plugins might be relying on its presence.
 	return (
 		<div className="editor-header edit-post-header">
-			<BackButton.Slot />
 			<motion.div
-				variants={ slideY }
+				variants={ backButtonVariations }
+				transition={ { type: 'tween', delay: 0.2 } }
+			>
+				<BackButton.Slot />
+			</motion.div>
+			<motion.div
+				variants={ toolbarVariations }
 				transition={ { type: 'tween', delay: 0.8 } }
 				className="editor-header__toolbar"
 			>
@@ -112,7 +127,7 @@ function Header( {
 				</div>
 			</motion.div>
 			<motion.div
-				variants={ slideY }
+				variants={ toolbarVariations }
 				transition={ { type: 'tween', delay: 0.8 } }
 				className="editor-header__settings"
 			>
diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
index dc04ccec6fe5e5..81d95a97602737 100644
--- a/packages/interface/src/components/interface-skeleton/index.js
+++ b/packages/interface/src/components/interface-skeleton/index.js
@@ -26,6 +26,11 @@ import {
 import NavigableRegion from '../navigable-region';
 
 const ANIMATION_DURATION = 0.25;
+const commonTransition = {
+	type: 'tween',
+	duration: ANIMATION_DURATION,
+	ease: [ 0.6, 0, 0.4, 1 ],
+};
 
 function useHTMLClass( className ) {
 	useEffect( () => {
@@ -42,12 +47,30 @@ function useHTMLClass( className ) {
 }
 
 const headerVariants = {
-	hidden: { opacity: 0 },
-	hover: {
+	hidden: { opacity: 1, marginTop: -60 },
+	visible: { opacity: 1, marginTop: 0 },
+	distractionFreeHover: {
 		opacity: 1,
-		transition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },
+		marginTop: 0,
+		transition: {
+			...commonTransition,
+			delay: 0.2,
+			delayChildren: 0.2,
+		},
+	},
+	distractionFreeHidden: {
+		opacity: 0,
+		marginTop: -60,
+	},
+	distractionFreeDisabled: {
+		opacity: 0,
+		marginTop: 0,
+		transition: {
+			...commonTransition,
+			delay: 0.8,
+			delayChildren: 0.8,
+		},
 	},
-	distractionFreeInactive: { opacity: 1, transition: { delay: 0 } },
 };
 
 function InterfaceSkeleton(
@@ -114,36 +137,39 @@ function InterfaceSkeleton(
 			) }
 		>
 			<div className="interface-interface-skeleton__editor">
-				{ !! header && (
-					<NavigableRegion
-						as={ motion.div }
-						className="interface-interface-skeleton__header"
-						aria-label={ mergedLabels.header }
-						initial={
-							isDistractionFree
-								? 'hidden'
-								: 'distractionFreeInactive'
-						}
-						whileHover={
-							isDistractionFree
-								? 'hover'
-								: 'distractionFreeInactive'
-						}
-						animate={
-							isDistractionFree
-								? 'hidden'
-								: 'distractionFreeInactive'
-						}
-						variants={ headerVariants }
-						transition={
-							isDistractionFree
-								? { type: 'tween', delay: 0.8 }
-								: undefined
-						}
-					>
-						{ header }
-					</NavigableRegion>
-				) }
+				<AnimatePresence initial={ false }>
+					{ !! header && (
+						<NavigableRegion
+							as={ motion.div }
+							className="interface-interface-skeleton__header"
+							aria-label={ mergedLabels.header }
+							initial={
+								isDistractionFree
+									? 'distractionFreeHidden'
+									: 'hidden'
+							}
+							whileHover={
+								isDistractionFree
+									? 'distractionFreeHover'
+									: 'visible'
+							}
+							animate={
+								isDistractionFree
+									? 'distractionFreeDisabled'
+									: 'visible'
+							}
+							exit={
+								isDistractionFree
+									? 'distractionFreeHidden'
+									: 'hidden'
+							}
+							variants={ headerVariants }
+							transition={ defaultTransition }
+						>
+							{ header }
+						</NavigableRegion>
+					) }
+				</AnimatePresence>
 				{ isDistractionFree && (
 					<div className="interface-interface-skeleton__header">
 						{ editorNotices }

From 3c8feddf2b8a4815b5611339ad22efc83bd5e121 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 31 May 2024 08:23:03 +0100
Subject: [PATCH 2/3] Remove delays

---
 packages/editor/src/components/header/index.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
index dea1d1dba9dd6d..6c2a5731549ad8 100644
--- a/packages/editor/src/components/header/index.js
+++ b/packages/editor/src/components/header/index.js
@@ -91,15 +91,11 @@ function Header( {
 	// as some plugins might be relying on its presence.
 	return (
 		<div className="editor-header edit-post-header">
-			<motion.div
-				variants={ backButtonVariations }
-				transition={ { type: 'tween', delay: 0.2 } }
-			>
+			<motion.div variants={ backButtonVariations }>
 				<BackButton.Slot />
 			</motion.div>
 			<motion.div
 				variants={ toolbarVariations }
-				transition={ { type: 'tween', delay: 0.8 } }
 				className="editor-header__toolbar"
 			>
 				<DocumentTools
@@ -128,7 +124,6 @@ function Header( {
 			</motion.div>
 			<motion.div
 				variants={ toolbarVariations }
-				transition={ { type: 'tween', delay: 0.8 } }
 				className="editor-header__settings"
 			>
 				{ ! customSaveButton && ! isPublishSidebarOpened && (

From f2e0a213412108aae990a1958b610ddf786d206b Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 31 May 2024 08:32:54 +0100
Subject: [PATCH 3/3] Remove bouncing

---
 packages/editor/src/components/header/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
index 6c2a5731549ad8..4f1df093176a7d 100644
--- a/packages/editor/src/components/header/index.js
+++ b/packages/editor/src/components/header/index.js
@@ -91,12 +91,16 @@ function Header( {
 	// as some plugins might be relying on its presence.
 	return (
 		<div className="editor-header edit-post-header">
-			<motion.div variants={ backButtonVariations }>
+			<motion.div
+				variants={ backButtonVariations }
+				transition={ { type: 'tween' } }
+			>
 				<BackButton.Slot />
 			</motion.div>
 			<motion.div
 				variants={ toolbarVariations }
 				className="editor-header__toolbar"
+				transition={ { type: 'tween' } }
 			>
 				<DocumentTools
 					disableBlockTools={ forceDisableBlockTools || isTextEditor }
@@ -124,6 +128,7 @@ function Header( {
 			</motion.div>
 			<motion.div
 				variants={ toolbarVariations }
+				transition={ { type: 'tween' } }
 				className="editor-header__settings"
 			>
 				{ ! customSaveButton && ! isPublishSidebarOpened && (