Site Editor Hub: Simplify

packages/base-styles/_z-index.scss

@@ -189,8 +189,6 @@ $z-layers: (
 	".customize-widgets__block-toolbar": 7,
 
 	// Site editor layout
-	".edit-site-layout__header-container": 4,
-	".edit-site-layout__hub": 3,
 	".edit-site-page-header": 2,
 	".edit-site-page-content": 1,
 	".edit-site-patterns__dataviews-list-pagination": 2,

packages/edit-site/src/components/block-editor/style.scss

@@ -1,4 +1,15 @@
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+::view-transition-old(frame),
+::view-transition-new(frame) {
+  animation-duration: 0;
+}
+/* stylelint-enable */
+
 .edit-site-visual-editor__editor-canvas {
+	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+	view-transition-name: frame;
+	/* stylelint-enable */
+
 	&.is-focused {
 		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
 		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));

packages/edit-site/src/components/editor/index.js

@@ -7,6 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
+import { Button } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import {
 	EditorKeyboardShortcutsRegister,
@@ -40,10 +41,11 @@ import {
 } from '../editor-canvas-container';
 import SaveButton from '../save-button';
 import SiteEditorMoreMenu from '../more-menu';
+import SiteIcon from '../site-icon';
 import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 import useEditorTitle from './use-editor-title';
 
-const { Editor } = unlock( editorPrivateApis );
+const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
@@ -125,6 +127,7 @@ export default function EditSiteEditor( { isLoading } ) {
 		],
 		[ settings.styles, canvasMode, currentPostIsTrashed ]
 	);
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const history = useHistory();
 	const onActionPerformed = useCallback(
@@ -213,6 +216,23 @@ export default function EditSiteEditor( { isLoading } ) {
 						! isEditingPage && <PluginTemplateSettingPanel.Slot />
 					}
 				>
+					{ isEditMode && (
+						<BackButton>
+							{ ( { length } ) =>
+								length <= 1 && (
+									<Button
+										label={ __( 'Open Navigation' ) }
+										className="edit-site-layout__view-mode-toggle"
+										onClick={ () =>
+											setCanvasMode( 'view' )
+										}
+									>
+										<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+									</Button>
+								)
+							}
+						</BackButton>
+					) }
 					<SiteEditorMoreMenu />
 					{ supportsGlobalStyles && <GlobalStylesSidebar /> }
 				</Editor>

packages/edit-site/src/components/editor/style.scss

@@ -17,7 +17,3 @@
 	display: flex;
 	justify-content: center;
 }
-
-.editor-header {
-	padding-left: $header-height;
-}

packages/edit-site/src/components/layout/index.js

@@ -16,9 +16,10 @@ import {
 	useReducedMotion,
 	useViewportMatch,
 	useResizeObserver,
+	usePrevious,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useState, useRef, useEffect } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import {
 	CommandMenu,
@@ -72,7 +73,7 @@ export default function Layout() {
 	useCommonCommands();
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-
+	const toggleRef = useRef();
 	const {
 		isDistractionFree,
 		hasFixedToolbar,
@@ -120,27 +121,6 @@ export default function Layout() {
 		triggerAnimationOnChange: canvasMode + '__' + routeKey,
 	} );
 
-	// This determines which animation variant should apply to the header.
-	// There is also a `isDistractionFreeHovering` state that gets priority
-	// when hovering the `edit-site-layout__header-container` in distraction
-	// free mode. It's set via framer and trickles down to all the children
-	// so they can use this variant state too.
-	//
-	// TODO: The issue with this is we want to have the hover state stick when hovering
-	// a popover opened via the header. We'll probably need to lift this state to
-	// handle it ourselves. Also, focusWithin the header needs to be handled.
-	let headerAnimationState;
-
-	if ( canvasMode === 'view' ) {
-		// We need 'view' to always take priority so 'isDistractionFree'
-		// doesn't bleed over into the view (sidebar) state
-		headerAnimationState = 'view';
-	} else if ( isDistractionFree ) {
-		headerAnimationState = 'isDistractionFree';
-	} else {
-		headerAnimationState = canvasMode; // edit, view, init
-	}
-
 	// Sets the right context for the command palette
 	let commandContext = 'site-editor';
 
@@ -154,6 +134,14 @@ export default function Layout() {
 
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
+	const previousCanvaMode = usePrevious( canvasMode );
+	useEffect( () => {
+		if ( previousCanvaMode === 'edit' ) {
+			toggleRef.current?.focus();
+		}
+		// Should not depend on the previous canvas mode value but the next.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ canvasMode ] );
 
 	// Synchronizing the URL with the store value of canvasMode happens in an effect
 	// This condition ensures the component is only rendered after the synchronization happens
@@ -183,41 +171,6 @@ export default function Layout() {
 					}
 				) }
 			>
-				<motion.div
-					className="edit-site-layout__header-container"
-					variants={ {
-						isDistractionFree: {
-							opacity: 0,
-							transition: {
-								type: 'tween',
-								delay: 0.8,
-								delayChildren: 0.8,
-							}, // How long to wait before the header exits
-						},
-						isDistractionFreeHovering: {
-							opacity: 1,
-							transition: {
-								type: 'tween',
-								delay: 0.2,
-								delayChildren: 0.2,
-							}, // How long to wait before the header shows
-						},
-						view: { opacity: 1 },
-						edit: { opacity: 1 },
-					} }
-					whileHover={
-						isDistractionFree
-							? 'isDistractionFreeHovering'
-							: undefined
-					}
-					animate={ headerAnimationState }
-				>
-					<SiteHub
-						isTransparent={ isResizableFrameOversized }
-						className="edit-site-layout__hub"
-					/>
-				</motion.div>
-
 				<div className="edit-site-layout__content">
 					{ /*
 						The NavigableRegion must always be rendered and not use
@@ -246,6 +199,12 @@ export default function Layout() {
 										} }
 										className="edit-site-layout__sidebar"
 									>
+										<SiteHub
+											ref={ toggleRef }
+											isTransparent={
+												isResizableFrameOversized
+											}
+										/>
 										<SidebarContent routeKey={ routeKey }>
 											{ areas.sidebar }
 										</SidebarContent>

packages/edit-site/src/components/layout/style.scss

@@ -11,37 +11,6 @@
 	}
 }
 
-.edit-site-layout__hub {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: calc(100vw - #{$canvas-padding * 2});
-	height: $header-height;
-	z-index: z-index(".edit-site-layout__hub");
-
-	@include break-medium {
-		width: calc(#{$nav-sidebar-width} - #{$grid-unit-15});
-	}
-
-	.edit-site-layout.is-full-canvas & {
-		padding-right: 0;
-		border-radius: 0;
-		width: $header-height;
-		box-shadow: none;
-	}
-}
-
-.edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile>.edit-site-page) {
-	margin-bottom: $header-height;
-	@include break-medium {
-		margin-bottom: 0;
-	}
-}
-
-.edit-site-layout__header-container {
-	z-index: z-index(".edit-site-layout__header-container");
-}
-
 .edit-site-layout__content {
 	height: 100%;
 	flex-grow: 1;
@@ -163,17 +132,31 @@
 	height: 100%;
 }
 
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+html.canvas-mode-edit-transition::view-transition-group(toggle) {
+	animation-delay: 255ms;
+}
+/* stylelint-enable  */
+
+.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
+	display: none;
+}
+
 .edit-site-layout__view-mode-toggle.components-button {
+	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+	view-transition-name: toggle;
+	/* stylelint-enable  */
 	position: relative;
 	color: $white;
-	border-radius: 0;
 	height: $header-height;
 	width: $header-height;
 	overflow: hidden;
 	padding: 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	background: $gray-900;
+	border-radius: 0;
 
 	&:hover,
 	&:active {
@@ -207,7 +190,6 @@
 
 	.edit-site-layout__view-mode-toggle-icon {
 		display: flex;
-		border-radius: $radius-block-ui;
 		height: $grid-unit-80;
 		width: $grid-unit-80;
 		justify-content: center;
@@ -244,33 +226,6 @@
 	}
 }
 
-.edit-site-layout.is-distraction-free {
-	.edit-site-layout__header-container {
-		height: $header-height;
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		z-index: z-index(".edit-site-layout__header-container");
-		width: 100%;
-
-		// We need ! important because we override inline styles
-		// set by the motion component.
-		&:focus-within {
-			opacity: 1 !important;
-			div {
-				transform: translateX(0) translateY(0) translateZ(0) !important;
-			}
-		}
-	}
-
-	.edit-site-site-hub {
-		position: absolute;
-		top: 0;
-		z-index: z-index(".edit-site-layout__hub");
-	}
-}
-
 .edit-site-layout__area {
 	flex-grow: 1;
 	margin: 0;

packages/edit-site/src/components/sidebar-navigation-screen/style.scss

@@ -59,7 +59,7 @@
 	position: sticky;
 	top: 0;
 	background: $gray-900;
-	padding-top: $grid-unit-60 + $header-height;
+	padding-top: $grid-unit-60;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
 	z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon");