Navigation Overlay: Improve handling of open overlay.

WordPress · Jun 24, 2021 · f34022a · f34022a
1 parent 41bd403
commit f34022a
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 5 deletions.
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -385,22 +385,65 @@ $color-control-label-height: 20px;
 }
 
 // Emulate the fullscreen editing inside the editor.
+// Most of this can be removed when the iframe lands.
+
+// When not fullscreen.
 .wp-block-navigation__responsive-container.is-menu-open {
 	position: fixed;
+	top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width;
+
+	@include break-medium() {
+		top: $admin-bar-height + $header-height + $border-width;
+	}
 
-	// Handle top position.
-	// For now, the editing of menu items in the mobile view only happens <600px.
-	// That means we only have to consider the big adminbar height (<783px).
-	// And in that view we also know that the toolbar is stacked.
-	body.admin-bar & {
+	// Navigation sidebar rules.
+	@include break-medium() {
+		left: $admin-sidebar-width-collapsed;
+	}
+	@include break-large() {
+		left: $admin-sidebar-width;
+	}
+}
+
+.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
+	@include break-medium() {
+		top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
+	}
+}
+
+.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
+.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
+	top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
+}
+
+.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open {
+	right: $sidebar-width;
+}
+
+// When fullscreen.
+.is-fullscreen-mode {
+	.wp-block-navigation__responsive-container.is-menu-open {
+		left: 0; // Unset the value from non fullscreen mode.
 		top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width;
 
 		@include break-medium() {
 			top: $header-height + $border-width;
 		}
 	}
+
+	.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
+		@include break-medium() {
+			top: $header-height + $block-toolbar-height + $border-width;
+		}
+	}
+
+	.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
+	.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
+		top: $header-height + $block-toolbar-height + $border-width;
+	}
 }
 
+
 // Without this, the block cannot be selected, nor does the right container get focus.
 // @todo: this is disruptive. Ideally we can retire a few of the containers,
 // so focus is applied naturally on the block container.

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -137,6 +137,7 @@ export default function VisualEditor( { styles } ) {
 	const resizedCanvasStyles = useResizeCanvas( deviceType, isTemplateMode );
 	const defaultLayout = useSetting( 'layout' );
 	const { contentSize, wideSize } = defaultLayout || {};
+	const previewMode = 'is-' + deviceType.toLowerCase() + '-preview';
 
 	let animatedStyles = isTemplateMode
 		? templateModeStyles
@@ -219,6 +220,7 @@ export default function VisualEditor( { styles } ) {
 					<motion.div
 						animate={ animatedStyles }
 						initial={ desktopCanvasStyles }
+						className={ previewMode }
 					>
 						<MaybeIframe
 							isTemplateMode={ isTemplateMode }