try animate frame

packages/block-library/src/navigation/editor.scss

@@ -637,8 +637,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 }
 
 .wp-block-navigation__menu-inspector-controls {
-	overflow-x: auto;
-
 	@include custom-scrollbars-on-hover(transparent, $gray-600);
 }
 

packages/components/src/navigator/styles.ts

@@ -5,12 +5,12 @@ import { css, keyframes } from '@emotion/react';
 
 export const navigatorProviderWrapper = css`
 	/* Prevents horizontal overflow while animating screen transitions */
-	overflow-x: hidden;
+	overflow: visible;
 	/* Mark this subsection of the DOM as isolated, providing performance benefits
 	 * by limiting calculations of layout, style and paint to a DOM subtree rather
 	 * than the entire page.
 	 */
-	contain: content;
+	/* contain: content; */
 `;
 
 const fadeInFromRight = keyframes( {
@@ -62,8 +62,6 @@ const navigatorScreenAnimation = ( {
 };
 
 export const navigatorScreen = ( props: NavigatorScreenAnimationProps ) => css`
-	/* Ensures horizontal overflow is visually accessible */
-	overflow-x: auto;
 	/* In case the root has a height, it should not be exceeded */
 	max-height: 100%;
 

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

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import {
+	Button,
+	SVG,
+	Path,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+const EditOverlay = ( { onClick, label } ) => {
+	const [ isVisible, setIsVisible ] = useState( true );
+	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
+
+	useEffect( () => {
+		const timeout = setTimeout( () => {
+			setIsVisible( false );
+		}, 4000 );
+
+		return () => clearTimeout( timeout );
+	}, [ backgroundColor ] );
+
+	return (
+		<AnimatePresence>
+			{ isVisible && (
+				<motion.div
+					initial={ { opacity: 0 } }
+					animate={ { opacity: 1 } }
+					exit={ { opacity: 0 } }
+					onClick={ onClick }
+					role="button"
+					className="edit-site-layout__edit-overlay"
+				>
+					<motion.div
+						initial={ { opacity: 0, y: 10 } }
+						animate={ { opacity: 1, y: 0 } }
+						exit={ { opacity: 0, y: 10 } }
+					>
+						<Button
+							className="edit-site-layout__edit-overlay-button"
+							onClick={ onClick }
+							icon={
+								<SVG
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth="2"
+									strokeLinecap="round"
+									strokeLinejoin="round"
+								>
+									<Path d="m9 9 5 12 1.8-5.2L21 14Z" />
+									<Path d="M7.2 2.2 8 5.1" />
+									<Path d="m5.1 8-2.9-.8" />
+									<Path d="M14 4.1 12 6" />
+									<Path d="m6 12-1.9 2" />
+								</SVG>
+							}
+						>
+							{ label }
+						</Button>
+					</motion.div>
+					{ /* Your content here */ }
+				</motion.div>
+			) }
+		</AnimatePresence>
+	);
+};
+
+export default EditOverlay;

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

@@ -0,0 +1,40 @@
+.edit-site-layout__edit-overlay {
+	position: absolute;
+	z-index: 100;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
+	padding-bottom: $grid-unit-40;
+	color: $white;
+	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.4) 100%);
+
+	.edit-site-layout__edit-overlay-button {
+		position: relative;
+		z-index: 10;
+		background: rgba(255, 255, 255, 0.6);
+		color: $gray-900;
+		border: 0;
+		border-radius: 999px;
+		cursor: pointer;
+		transition: background-color ease 0.1s;
+		box-shadow: 0 2px 4px rgba($black, 0.1);
+
+		&:hover {
+			background-color: $gray-100;
+		}
+	}
+
+	.edit-site-layout__edit-overlay-backdrop {
+		z-index: 5;
+		opacity: 0.7;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+}

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

@@ -6,8 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { Notice } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Notice,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
 import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -20,6 +24,7 @@ import {
 import {
 	InterfaceSkeleton,
 	ComplementaryArea,
+	NavigableRegion,
 	store as interfaceStore,
 } from '@wordpress/interface';
 import {
@@ -55,6 +60,8 @@ import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 import SiteEditorCanvas from '../block-editor/site-editor-canvas';
 import TemplatePartConverter from '../template-part-converter';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
+import Header from '../header-edit-mode';
+import EditOverlay from '../edit-overlay';
 
 const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
 const {
@@ -151,6 +158,8 @@ export default function Editor( { isLoading } ) {
 		};
 	}, [] );
 
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
 	const showVisualEditor = isViewMode || editorMode === 'visual';
@@ -195,6 +204,27 @@ export default function Editor( { isLoading } ) {
 
 	return (
 		<>
+			{ ! isLoading && canvasMode !== 'edit' && (
+				<EditOverlay
+					label="Click your site preview to edit"
+					onClick={ () => setCanvasMode( 'edit' ) }
+				/>
+			) }
+			<AnimatePresence>
+				{ ! isLoading && (
+					<NavigableRegion
+						key="header"
+						className="edit-site-layout__header"
+						ariaLabel={ __( 'Editor top bar' ) }
+						as={ motion.div }
+						animate={ {
+							marginTop: canvasMode === 'edit' ? 0 : -60,
+						} }
+					>
+						<Header />
+					</NavigableRegion>
+				) }
+			</AnimatePresence>
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			{ hasLoadedPost && ! editedPost && (