Make SiteHub great again

WordPress · Jun 6, 2024 · 9a35208 · 9a35208
1 parent 044a05f
commit 9a35208
Show file tree

Hide file tree

Showing 7 changed files with 196 additions and 201 deletions.
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import {
 	EditorKeyboardShortcutsRegister,
@@ -41,11 +40,10 @@ 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, BackButton } = unlock( editorPrivateApis );
+const { Editor } = unlock( editorPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
@@ -127,7 +125,6 @@ export default function EditSiteEditor( { isLoading } ) {
 		],
 		[ settings.styles, canvasMode, currentPostIsTrashed ]
 	);
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const history = useHistory();
 	const onActionPerformed = useCallback(
@@ -216,23 +213,6 @@ 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>

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -16,10 +16,9 @@ import {
 	useReducedMotion,
 	useViewportMatch,
 	useResizeObserver,
-	usePrevious,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useState, useRef, useEffect } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import {
 	CommandMenu,
@@ -73,7 +72,6 @@ export default function Layout() {
 	useCommonCommands();
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const toggleRef = useRef();
 	const {
 		isDistractionFree,
 		hasFixedToolbar,
@@ -110,7 +108,7 @@ export default function Layout() {
 		previous: previousShortcut,
 		next: nextShortcut,
 	} );
-	const disableMotion = useReducedMotion();
+	const reduceMotion = useReducedMotion();
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer ] = useResizeObserver();
 	const isEditorLoading = useIsSiteEditorLoading();
@@ -134,14 +132,6 @@ 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
@@ -181,6 +171,10 @@ export default function Layout() {
 							ariaLabel={ __( 'Navigation' ) }
 							className="edit-site-layout__sidebar-region"
 						>
+							<SiteHub
+								isTransparent={ isResizableFrameOversized }
+								canvasMode={ canvasMode }
+							/>
 							<AnimatePresence>
 								{ canvasMode === 'view' && (
 									<motion.div
@@ -191,20 +185,15 @@ export default function Layout() {
 											type: 'tween',
 											duration:
 												// Disable transition in mobile to emulate a full page transition.
-												disableMotion ||
-												isMobileViewport
+												reduceMotion || isMobileViewport
 													? 0
 													: ANIMATION_DURATION,
-											ease: 'easeOut',
+											ease: 'linear',
+											delay:
+												canvasMode === 'view' ? 0.2 : 0,
 										} }
 										className="edit-site-layout__sidebar"
 									>
-										<SiteHub
-											ref={ toggleRef }
-											isTransparent={
-												isResizableFrameOversized
-											}
-										/>
 										<SidebarContent routeKey={ routeKey }>
 											{ areas.sidebar }
 										</SidebarContent>

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -18,26 +18,31 @@
 }
 
 .edit-site-layout__sidebar-region {
-	z-index: z-index(".edit-site-layout__sidebar");
+	/* z-index: z-index(".edit-site-layout__sidebar"); */
 	width: 100vw;
 	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
 
-	@include break-medium {
-		width: $nav-sidebar-width;
+	&,
+	// Direct children’s width is also specified so they maintain it when the
+	// sidebar region collapses for full screen canvas.
+	& > * {
+		@include break-medium {
+			width: $nav-sidebar-width;
+		}
 	}
 
-	// This is only necessary for the exit animation
 	.edit-site-layout.is-full-canvas & {
-		position: fixed !important;
-		height: 100vh;
-		left: 0;
-		top: 0;
+		// Frees the space for the canvas.
+		width: 0;
 	}
 
 	.edit-site-layout__sidebar {
 		display: flex;
 		flex-direction: column;
-		height: 100%;
+		flex: 1;
+		overflow: hidden;
 	}
 
 	.resizable-editor__drag-handle {
@@ -81,7 +86,7 @@
 .edit-site-layout__canvas {
 	position: absolute;
 	top: 0;
-	left: 0;
+	left: auto;
 	bottom: 0;
 	width: 100%;
 	display: flex;
@@ -132,20 +137,7 @@
 	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;
 	height: $header-height;
@@ -197,6 +189,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	}
 }
 
+.edit-site-editor__editor-interface .editor-header {
+	padding-inline: $header-height 0;
+}
+
 .edit-site-layout__actions {
 	z-index: z-index(".edit-site-layout__actions");
 	position: fixed !important; // Need to override the default relative positioning