Site Editor: Improve the header animation (#60408)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org>
WordPress · Apr 9, 2024 · 3ece636 · 3ece636
1 parent a7a62f7
commit 3ece636
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 69 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -191,7 +191,6 @@ $z-layers: (
 	// Site editor layout
 	".edit-site-layout__header-container": 4,
 	".edit-site-layout__hub": 3,
-	".edit-site-layout__header": 2,
 	".edit-site-page-header": 2,
 	".edit-site-page-content": 1,
 	".edit-site-patterns__header": 2,

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -7,8 +7,16 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Notice } from '@wordpress/components';
-import { useInstanceId, useViewportMatch } from '@wordpress/compose';
+import {
+	Notice,
+	__unstableAnimatePresence as AnimatePresence,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+import {
+	useInstanceId,
+	useViewportMatch,
+	useReducedMotion,
+} from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	BlockBreadcrumb,
@@ -40,6 +48,7 @@ import {
 	SidebarInspectorFill,
 } from '../sidebar-edit-mode';
 import CodeEditor from '../code-editor';
+import Header from '../header-edit-mode';
 import KeyboardShortcutsEditMode from '../keyboard-shortcuts/edit-mode';
 import WelcomeGuide from '../welcome-guide';
 import StartTemplateOptions from '../start-template-options';
@@ -70,8 +79,12 @@ const interfaceLabels = {
 	actions: __( 'Editor publish' ),
 	/* translators: accessibility text for the editor footer landmark region. */
 	footer: __( 'Editor footer' ),
+	/* translators: accessibility text for the editor header landmark region. */
+	header: __( 'Editor top bar' ),
 };
 
+const ANIMATION_DURATION = 0.25;
+
 export default function Editor( { isLoading, onClick } ) {
 	const {
 		record: editedPost,
@@ -82,6 +95,7 @@ export default function Editor( { isLoading, onClick } ) {
 	const { type: editedPostType } = editedPost;
 
 	const isLargeViewport = useViewportMatch( 'medium' );
+	const disableMotion = useReducedMotion();
 
 	const {
 		context,
@@ -213,6 +227,35 @@ export default function Editor( { isLoading, onClick } ) {
 								'show-icon-labels': showIconLabels,
 							}
 						) }
+						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 />
+									</motion.div>
+								) }
+							</AnimatePresence>
+						}
 						notices={ <EditorSnackbars /> }
 						content={
 							<>

diff --git a/packages/edit-site/src/components/layout/animation.js b/packages/edit-site/src/components/layout/animation.js
@@ -15,7 +15,7 @@ function getAbsolutePosition( element ) {
 	};
 }
 
-const ANIMATION_DURATION = 300;
+const ANIMATION_DURATION = 250;
 
 /**
  * Hook used to compute the styles required to move a div into a new position.

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -38,7 +38,6 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
 import Sidebar from '../sidebar';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
-import Header from '../header-edit-mode';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import SiteHub from '../site-hub';
 import ResizableFrame from '../resizable-frame';
@@ -217,42 +216,6 @@ export default function Layout() {
 						isTransparent={ isResizableFrameOversized }
 						className="edit-site-layout__hub"
 					/>
-
-					<AnimatePresence initial={ false }>
-						{ canvasMode === 'edit' && (
-							<NavigableRegion
-								key="header"
-								className="edit-site-layout__header"
-								ariaLabel={ __( 'Editor top bar' ) }
-								as={ motion.div }
-								variants={ {
-									isDistractionFree: { opacity: 0, y: 0 },
-									isDistractionFreeHovering: {
-										opacity: 1,
-										y: 0,
-									},
-									view: { opacity: 1, y: '-100%' },
-									edit: { opacity: 1, y: 0 },
-								} }
-								exit={ {
-									y: '-100%',
-								} }
-								initial={ {
-									opacity: isDistractionFree ? 1 : 0,
-									y: isDistractionFree ? 0 : '-100%',
-								} }
-								transition={ {
-									type: 'tween',
-									duration: disableMotion
-										? 0
-										: ANIMATION_DURATION,
-									ease: 'easeOut',
-								} }
-							>
-								<Header />
-							</NavigableRegion>
-						) }
-					</AnimatePresence>
 				</motion.div>
 
 				<div className="edit-site-layout__content">
@@ -291,8 +254,6 @@ export default function Layout() {
 						</NavigableRegion>
 					) }
 
-					<SavePanel />
-
 					{ isMobileViewport && areas.mobile && (
 						<div className="edit-site-layout__mobile">
 							{ areas.mobile }
@@ -358,6 +319,8 @@ export default function Layout() {
 						</div>
 					) }
 				</div>
+
+				<SavePanel />
 			</div>
 		</>
 	);

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -37,18 +37,6 @@
 	z-index: z-index(".edit-site-layout__header-container");
 }
 
-.edit-site-layout__header {
-	height: $header-height;
-	display: flex;
-	z-index: z-index(".edit-site-layout__header");
-
-	// This is only necessary for the exit animation
-	.edit-site-layout:not(.is-full-canvas) & {
-		position: fixed;
-		width: 100vw;
-	}
-}
-
 .edit-site-layout__content {
 	height: 100%;
 	flex-grow: 1;
@@ -272,26 +260,14 @@
 			div {
 				transform: translateX(0) translateY(0) translateZ(0) !important;
 			}
-
-			.edit-site-layout__header {
-				opacity: 1 !important;
-			}
 		}
 	}
 
-	.edit-site-site-hub,
-	.edit-site-layout__header {
+	.edit-site-site-hub {
 		position: absolute;
 		top: 0;
-		z-index: z-index(".edit-site-layout__header");
-	}
-	.edit-site-site-hub {
 		z-index: z-index(".edit-site-layout__hub");
 	}
-	.edit-site-layout__header {
-		width: 100%;
-	}
-
 }
 
 .edit-site-layout__area {

diff --git a/test/e2e/specs/site-editor/hybrid-theme.spec.js b/test/e2e/specs/site-editor/hybrid-theme.spec.js
@@ -53,7 +53,7 @@ test.describe( 'Hybrid theme', () => {
 
 	test( 'can not export Site Editor Templates', async ( { admin, page } ) => {
 		await admin.visitSiteEditor( {
-			postId: 'emptyhybrid//header',
+			postId: 'gutenberg-test-themes/emptyhybrid//header',
 			postType: 'wp_template_part',
 			canvas: 'edit',
 		} );