FSE Navigation Sidebar: Move navigation sidebar in DOM hierarchy (#25884

)

* Set toggle and nav panel as first element in interface skeleton

* Position sidebar toggle alongside header topbar

* Add site and content wrappers to interface skeleton

Previously, the navigation panel and navigation toggle lived within skeleton__body and skeleton__header, respectively. In order to address unexpected keyboard focus order between the nav toggle and nav panel, we create a new element inside of interface-skeleton called skeleton__navigation-sidebar.

To account for the layout changes of introducing a new element, we add two wrapper classes: skeleton__site and skeleton__content. Both ensure that the skeleton__header and skeleton__body shrink their children correctly when the navigation sidebar is open.

* Add and remove padding to ensure document settings title is centered

* Remove toggle from flow of page when sidebar is closed

The navigation sidebar lives alongside the skeleton header and skeleton body. This is to ensure that the children of the body and header shrink when the navigation sidebar is open.

The problem is that when the navigation sidebar is closed, the skeleton body (i.e. the block editor) no longer spans the entire width of the viewport. The sidebar (and toggle) occupy space at the edge of the screen. To address this, we position the navigation toggle absolutely when the sidebar is closed.

* Refactor navigation sidebar directory structure

Because navigation panel and navigation toggle live outside the header and body, we place both components in their own navigation sidebar directory

* Update scss references

* Update navbar-toggle references

* Modify z index of footer

* Remove unnecessary comment

* Remove interface-interface-skeleton__layout

* Use interface-skeleton as container

* Rename skeleton__site to skeleton_editor

* Rename skeleton__navigation sidebar to drawer

* Remove comment

* Use z-index mixin for interface-skeleton__footer

* Use z-index mixin for navigation toggle

* Add missing comma in z-index file

* Update interface drawer label for navigation sidebar

* Recenter document actions

* Create variable for header toolbar min width

* Use navigation sidebar redux actions and selectors in refactored nav sidebar

Navigation sidebar and inserter sidebar state were both moved into the 'core/edit-site' data store. We incorporate any relevant actions and selectors into our source code updates.

* Remove unnecessary isNavigationOpened selector

* Return isNavigationOpened directly from selector

Co-authored-by: Copons <Copons@users.noreply.github.com>

packages/base-styles/_variables.scss

@@ -56,6 +56,7 @@ $mobile-header-toolbar-height: 44px;
 $mobile-floating-toolbar-height: 44px;
 $mobile-floating-toolbar-margin: 8px;
 $mobile-color-swatch: 48px;
+$header-toolbar-min-width: 335px;
 
 /**
  * Shadows.

packages/base-styles/_z-index.scss

@@ -84,6 +84,12 @@ $z-layers: (
 	".edit-site-sidebar {greater than small}": 90,
 	".edit-widgets-sidebar {greater than small}": 90,
 
+	// Show interface skeleton footer above interface skeleton drawer
+	".interface-interface-skeleton__footer": 90,
+
+	// Show the navigation toggle above the skeleton header
+	".edit-site-navigation-toggle": 31,
+
 	// Show notices below expanded editor bar
 	// .edit-post-header { z-index: 30 }
 	".components-notice-list": 29,

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

@@ -37,9 +37,11 @@ import BlockEditor from '../block-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 import GlobalStylesProvider from './global-styles-provider';
 import LeftSidebar from '../left-sidebar';
+import NavigationSidebar from '../navigation-sidebar';
 
 const interfaceLabels = {
 	leftSidebar: __( 'Block Library' ),
+	drawer: __( 'Navigation Sidebar' ),
 };
 
 function Editor() {
@@ -209,6 +211,9 @@ function Editor() {
 												<SidebarComplementaryAreaFills />
 												<InterfaceSkeleton
 													labels={ interfaceLabels }
+													drawer={
+														<NavigationSidebar />
+													}
 													leftSidebar={
 														<LeftSidebar />
 													}

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

@@ -9,10 +9,7 @@ import {
 	__experimentalPreviewOptions as PreviewOptions,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	PinnedItems,
-	__experimentalMainDashboardButton as MainDashboardButton,
-} from '@wordpress/interface';
+import { PinnedItems } from '@wordpress/interface';
 import { _x } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
 import { Button } from '@wordpress/components';
@@ -25,39 +22,36 @@ import SaveButton from '../save-button';
 import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
-import NavigationToggle from './navigation-toggle';
 
 export default function Header( { openEntitiesSavedStates } ) {
-	const {
-		deviceType,
-		hasFixedToolbar,
-		template,
-		isNavigationOpen,
-		isInserterOpen,
-	} = useSelect( ( select ) => {
-		const {
-			__experimentalGetPreviewDeviceType,
-			isFeatureActive,
-			getTemplateId,
-			isNavigationOpened,
-			isInserterOpened,
-		} = select( 'core/edit-site' );
-		const { getEntityRecord } = select( 'core' );
+	const { deviceType, hasFixedToolbar, template, isInserterOpen } = useSelect(
+		( select ) => {
+			const {
+				__experimentalGetPreviewDeviceType,
+				isFeatureActive,
+				getTemplateId,
+				isInserterOpened,
+			} = select( 'core/edit-site' );
+			const { getEntityRecord } = select( 'core' );
 
-		const _templateId = getTemplateId();
-		return {
-			deviceType: __experimentalGetPreviewDeviceType(),
-			hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
-			template: getEntityRecord( 'postType', 'wp_template', _templateId ),
-			isNavigationOpen: isNavigationOpened(),
-			isInserterOpen: isInserterOpened(),
-		};
-	}, [] );
+			const _templateId = getTemplateId();
+			return {
+				deviceType: __experimentalGetPreviewDeviceType(),
+				hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
+				template: getEntityRecord(
+					'postType',
+					'wp_template',
+					_templateId
+				),
+				isInserterOpen: isInserterOpened(),
+			};
+		},
+		[]
+	);
 
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 		setIsInserterOpened,
-		setIsNavigationPanelOpened,
 	} = useDispatch( 'core/edit-site' );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -67,14 +61,6 @@ export default function Header( { openEntitiesSavedStates } ) {
 	return (
 		<div className="edit-site-header">
 			<div className="edit-site-header_start">
-				<MainDashboardButton.Slot>
-					<NavigationToggle
-						isOpen={ isNavigationOpen }
-						onClick={ () =>
-							setIsNavigationPanelOpened( ! isNavigationOpen )
-						}
-					/>
-				</MainDashboardButton.Slot>
 				<div className="edit-site-header__toolbar">
 					<Button
 						isPrimary

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

@@ -4,15 +4,21 @@
 	display: flex;
 	height: $header-height;
 	box-sizing: border-box;
+	width: 100%;
+	padding-left: $header-height;
 
 	.edit-site-header_start,
 	.edit-site-header_end {
-		// The 335px flex basis and 0 flex-shrink prevents the left and
-		// right toolbar from collapsing when shrinking the viewport
-		flex: 1 0 335px;
+		flex: 1 0;
 		display: flex;
 	}
 
+	.edit-site-header_start {
+		// Flex basis prevents the header_start toolbar
+		// from collapsing when shrinking the viewport.
+		flex-basis: calc(#{$header-toolbar-min-width} - #{$header-height});
+	}
+
 	.edit-site-header_center {
 		display: flex;
 		align-items: center;
@@ -26,14 +32,21 @@
 	}
 
 	.edit-site-header_end {
+		// Flex basis prevents the header_end toolbar
+		// from collapsing when shrinking the viewport
+		flex-basis: $header-toolbar-min-width;
 		justify-content: flex-end;
 	}
 }
 
 // Keeps the document title centered when the sidebar is open
 body.is-navigation-sidebar-open {
-	.edit-site-header_start {
-		flex-basis: calc(#{$nav-sidebar-width} + 335px);
+	.edit-site-header {
+		padding-left: 0;
+
+		.edit-site-header_start {
+			flex-basis: $header-toolbar-min-width;
+		}
 	}
 }
 

packages/edit-site/src/components/left-sidebar/index.js

@@ -7,25 +7,17 @@ import { useSelect, useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import InserterPanel from './inserter-panel';
-import NavigationPanel from './navigation-panel';
 
 const LeftSidebar = () => {
-	const { isNavigationOpen, isInserterOpen } = useSelect( ( select ) => {
-		const { isNavigationOpened, isInserterOpened } = select(
-			'core/edit-site'
-		);
+	const { isInserterOpen } = useSelect( ( select ) => {
+		const { isInserterOpened } = select( 'core/edit-site' );
 		return {
-			isNavigationOpen: isNavigationOpened(),
 			isInserterOpen: isInserterOpened(),
 		};
 	} );
 
 	const { setIsInserterOpened } = useDispatch( 'core/edit-site' );
 
-	if ( isNavigationOpen ) {
-		return <NavigationPanel />;
-	}
-
 	if ( isInserterOpen ) {
 		return (
 			<InserterPanel

packages/edit-site/src/components/navigation-sidebar/index.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import NavigationPanel from './navigation-panel';
+import NavigationToggle from './navigation-toggle';
+
+const NavigationSidebar = () => {
+	const isNavigationOpen = useSelect( ( select ) => {
+		return select( 'core/edit-site' ).isNavigationOpened();
+	} );
+
+	return (
+		<>
+			<NavigationToggle isOpen={ isNavigationOpen } />
+			{ isNavigationOpen && <NavigationPanel /> }
+		</>
+	);
+};
+
+export default NavigationSidebar;

packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss → packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss

@@ -1,7 +1,6 @@
 .edit-site-navigation-panel {
 	animation: edit-site-navigation-panel__slide-in 0.1s linear;
 	height: 100%;
-	position: relative;
 	width: $nav-sidebar-width;
 	background: $gray-900;
 	@include reduce-motion("animation");

packages/edit-site/src/components/header/navigation-toggle/index.js → packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js

@@ -1,12 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { Button, Icon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { wordpress } from '@wordpress/icons';
 
-function NavigationToggle( { icon, isOpen, onClick } ) {
+function NavigationToggle( { icon, isOpen } ) {
 	const {
 		isActive,
 		isRequestingSiteIcon,
@@ -31,6 +31,8 @@ function NavigationToggle( { icon, isOpen, onClick } ) {
 		};
 	}, [] );
 
+	const { setIsNavigationPanelOpened } = useDispatch( 'core/edit-site' );
+
 	if ( ! isActive ) {
 		return null;
 	}
@@ -60,7 +62,7 @@ function NavigationToggle( { icon, isOpen, onClick } ) {
 			<Button
 				className="edit-site-navigation-toggle__button has-icon"
 				label={ __( 'Toggle navigation' ) }
-				onClick={ onClick }
+				onClick={ () => setIsNavigationPanelOpened( ! isOpen ) }
 				showTooltip
 			>
 				{ buttonIcon }

packages/edit-site/src/components/header/navigation-toggle/style.scss → packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss

@@ -6,6 +6,8 @@
 		background: $gray-900;
 		border-radius: 0;
 		display: flex;
+		position: absolute;
+		z-index: z-index(".edit-site-navigation-toggle");
 		height: $header-height + $border-width; // Cover header border
 		width: $header-height;
 	}
@@ -15,6 +17,7 @@
 	flex-shrink: 0;
 	height: $header-height + $border-width; // Cover header border
 	width: 300px;
+	position: static;
 
 	// Delay to sync with `NavigationPanel` animation
 	transition: width 80ms linear;

packages/edit-site/src/index.js

@@ -68,4 +68,4 @@ export function initialize( id, settings ) {
 }
 
 export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
-export { default as __experimentalNavigationToggle } from './components/header/navigation-toggle';
+export { default as __experimentalNavigationToggle } from './components/navigation-sidebar/navigation-toggle';

packages/edit-site/src/store/reducer.js

@@ -12,7 +12,7 @@ import { combineReducers } from '@wordpress/data';
  * Internal dependencies
  */
 import { PREFERENCES_DEFAULTS } from './defaults';
-import { MENU_ROOT } from '../components/left-sidebar/navigation-panel/constants';
+import { MENU_ROOT } from '../components/navigation-sidebar/navigation-panel/constants';
 
 /**
  * Higher-order reducer creator which provides the given initial state for the

packages/edit-site/src/style.scss

@@ -5,9 +5,9 @@
 @import "./components/header/document-actions/style.scss";
 @import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/header/more-menu/style.scss";
-@import "./components/header/navigation-toggle/style.scss";
 @import "./components/left-sidebar/inserter-panel/style.scss";
-@import "./components/left-sidebar/navigation-panel/style.scss";
+@import "./components/navigation-sidebar/navigation-toggle/style.scss";
+@import "./components/navigation-sidebar/navigation-panel/style.scss";
 @import "./components/notices/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/editor/style.scss";