Move the edit button in the site editor sidebar to a contextual widget

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

@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
-	__experimentalHStack as HStack,
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 	__unstableUseNavigateRegions as useNavigateRegions,
@@ -37,7 +36,6 @@ import { useLocation } from '../routes';
 import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
 import SiteIcon from '../site-icon';
-import SiteTitle from '../site-title';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 
 const ANIMATION_DURATION = 0.5;
@@ -86,13 +84,14 @@ export default function Layout( { onError } ) {
 	const showFrame =
 		! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport );
 	const showEditButton =
-		isEditorPage &&
-		isMobileViewport &&
-		canvasMode === 'view' &&
-		isMobileCanvasVisible;
+		( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
+		( isMobileViewport && canvasMode === 'view' && isMobileCanvasVisible );
 	const isBackToDashboardButton =
 		( ! isMobileViewport && canvasMode === 'view' ) ||
 		( isMobileViewport && ! isMobileCanvasVisible );
+	const isFullCanvas =
+		( isEditorPage && canvasMode === 'edit' && ! isMobileViewport ) ||
+		isMobileCanvasVisible;
 	// Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer, fullSize ] = useResizeObserver();
@@ -129,155 +128,111 @@ export default function Layout( { onError } ) {
 					'edit-site-layout',
 					navigateRegionsProps.className,
 					{
-						'is-full-canvas':
-							( isEditorPage &&
-								canvasMode === 'edit' &&
-								! isMobileViewport ) ||
-							isMobileCanvasVisible,
+						'is-full-canvas': isFullCanvas,
+						'is-edit-mode': canvasMode === 'edit',
 					}
 				) }
 			>
-				<div className="edit-site-layout__header">
-					<div className="edit-site-layout__logo">
+				<motion.div
+					className="edit-site-layout__hub"
+					layout
+					transition={ {
+						type: 'tween',
+						duration: disableMotion ? 0 : ANIMATION_DURATION,
+						ease: 'easeOut',
+					} }
+				>
+					<motion.div
+						className="edit-site-layout__view-mode-toggle-container"
+						layout
+						transition={ {
+							type: 'tween',
+							duration: disableMotion ? 0 : ANIMATION_DURATION,
+							ease: 'easeOut',
+						} }
+					>
 						<Button
 							{ ...siteIconButtonProps }
 							className="edit-site-layout__view-mode-toggle"
 						>
 							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
 						</Button>
-						<AnimatePresence initial={ false }>
-							{ ( isBackToDashboardButton || showEditButton ) && (
-								<motion.div
-									initial={ { opacity: 0 } }
-									exit={ { opacity: 0 } }
-									animate={ { opacity: 1 } }
-									style={ {
-										position: 'absolute',
-										left: 60,
-									} }
-								>
-									<HStack>
-										{ isBackToDashboardButton && (
-											<SiteTitle />
-										) }
+					</motion.div>
+					{ showEditButton && (
+						<Button
+							label={ __( 'Open the editor' ) }
+							onClick={ () => {
+								__unstableSetCanvasMode( 'edit' );
+							} }
+							variant="primary"
+						>
+							{ __( 'Edit' ) }
+						</Button>
+					) }
 
-										{ showEditButton && (
-											<Button
-												className="edit-site-layout__edit-button"
-												label={ __(
-													'Open the editor'
-												) }
-												onClick={ () => {
-													__unstableSetCanvasMode(
-														'edit'
-													);
-												} }
-											>
-												{ __( 'Edit' ) }
-											</Button>
-										) }
-									</HStack>
-								</motion.div>
-							) }
-						</AnimatePresence>
+					{ isMobileViewport && ! isMobileCanvasVisible && (
+						<Button
+							onClick={ () => setIsMobileCanvasVisible( true ) }
+							variant="primary"
+						>
+							{ __( 'View Editor' ) }
+						</Button>
+					) }
+				</motion.div>
 
-						{ isMobileViewport && ! isMobileCanvasVisible && (
-							<Button
-								onClick={ () =>
-									setIsMobileCanvasVisible( true )
-								}
-								style={ { position: 'fixed', right: 0 } }
-							>
-								{ __( 'View Editor' ) }
-							</Button>
-						) }
-					</div>
-					<AnimatePresence>
-						{ isEditorPage && canvasMode === 'edit' && (
+				{ isEditorPage &&
+					( canvasMode === 'edit' || isMobileCanvasVisible ) && (
+						<NavigableRegion
+							className="edit-site-layout__header"
+							ariaLabel={ __( 'Editor top bar' ) }
+						>
+							{ canvasMode === 'edit' && <Header /> }
+						</NavigableRegion>
+					) }
+
+				<div className="edit-site-layout__content">
+					<AnimatePresence initial={ false }>
+						{ showSidebar && (
 							<NavigableRegion
 								as={ motion.div }
-								initial={ { y: -60 } }
-								animate={ { y: 0 } }
-								exit={ { y: -60 } }
+								initial={ {
+									opacity: 0,
+								} }
+								animate={ {
+									opacity: 1,
+								} }
+								exit={ {
+									opacity: 0,
+								} }
 								transition={ {
 									type: 'tween',
 									duration: disableMotion
 										? 0
 										: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
-								className="edit-site-layout__editor-header"
-								ariaLabel={ __( 'Editor top bar' ) }
+								className="edit-site-layout__sidebar"
+								ariaLabel={ __( 'Navigation sidebar' ) }
 							>
-								<Header />
+								<Sidebar />
 							</NavigableRegion>
 						) }
 					</AnimatePresence>
-				</div>
 
-				<AnimatePresence initial={ false }>
-					{ showSidebar && (
-						<NavigableRegion
-							as={ motion.div }
-							initial={ {
-								opacity: 0,
-							} }
-							animate={ {
-								opacity: 1,
+					{ showCanvas && (
+						<div
+							className="edit-site-layout__canvas-container"
+							style={ {
+								paddingTop: showFrame ? canvasPadding : 0,
+								paddingBottom: showFrame ? canvasPadding : 0,
 							} }
-							exit={ {
-								opacity: 0,
-							} }
-							transition={ {
-								type: 'tween',
-								duration: disableMotion
-									? 0
-									: ANIMATION_DURATION,
-								ease: 'easeOut',
-							} }
-							className="edit-site-layout__sidebar"
-							ariaLabel={ __( 'Navigation sidebar' ) }
 						>
-							<Sidebar />
-						</NavigableRegion>
-					) }
-				</AnimatePresence>
-
-				{ showCanvas && (
-					<div
-						className="edit-site-layout__canvas-container"
-						style={ {
-							paddingTop: showFrame ? canvasPadding : 0,
-							paddingBottom: showFrame ? canvasPadding : 0,
-						} }
-					>
-						{ canvasResizer }
-						{ !! canvasSize.width && (
-							<motion.div
-								initial={ false }
-								layout="position"
-								className="edit-site-layout__canvas"
-								transition={ {
-									type: 'tween',
-									duration: disableMotion
-										? 0
-										: ANIMATION_DURATION,
-									ease: 'easeOut',
-								} }
-							>
+							{ canvasResizer }
+							{ !! canvasSize.width && (
 								<motion.div
-									style={ {
-										position: 'absolute',
-										top: 0,
-										left: 0,
-										bottom: 0,
-									} }
 									initial={ false }
-									animate={ {
-										width: showFrame
-											? canvasSize.width - canvasPadding
-											: fullSize.width,
-									} }
+									layout="position"
+									className="edit-site-layout__canvas"
 									transition={ {
 										type: 'tween',
 										duration: disableMotion
@@ -286,15 +241,38 @@ export default function Layout( { onError } ) {
 										ease: 'easeOut',
 									} }
 								>
-									<ErrorBoundary onError={ onError }>
-										{ isEditorPage && <Editor /> }
-										{ isListPage && <ListPage /> }
-									</ErrorBoundary>
+									<motion.div
+										style={ {
+											position: 'absolute',
+											top: 0,
+											left: 0,
+											bottom: 0,
+										} }
+										initial={ false }
+										animate={ {
+											width: showFrame
+												? canvasSize.width -
+												  canvasPadding
+												: fullSize.width,
+										} }
+										transition={ {
+											type: 'tween',
+											duration: disableMotion
+												? 0
+												: ANIMATION_DURATION,
+											ease: 'easeOut',
+										} }
+									>
+										<ErrorBoundary onError={ onError }>
+											{ isEditorPage && <Editor /> }
+											{ isListPage && <ListPage /> }
+										</ErrorBoundary>
+									</motion.div>
 								</motion.div>
-							</motion.div>
-						) }
-					</div>
-				) }
+							) }
+						</div>
+					) }
+				</div>
 			</div>
 		</>
 	);