Try/nav dedicated sidebar 2

packages/block-editor/src/components/list-view/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -61,6 +66,7 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {boolean} props.__experimentalHideContainerBlockActions  Flag to hide actions of top level blocks (like core/widget-area)
  * @param {string}  props.id                                       Unique identifier for the root list element (primarily for a11y purposes).
  * @param {boolean} props.expandNested                             Flag to determine whether nested levels are expanded by default.
+ * @param {boolean}  props.__experimentalDarkMode                   Flag to turn on dark mode
  * @param {Object}  ref                                            Forwarded ref
  */
 function ListView(
@@ -69,6 +75,7 @@ function ListView(
 		__experimentalFeatures,
 		__experimentalPersistentListViewFeatures,
 		__experimentalHideContainerBlockActions,
+		__experimentalDarkMode,
 		showNestedBlocks,
 		showBlockMovers,
 		id,
@@ -210,7 +217,9 @@ function ListView(
 			/>
 			<TreeGrid
 				id={ id }
-				className="block-editor-list-view-tree"
+				className={ classnames( 'block-editor-list-view-tree', {
+					'is-dark': __experimentalDarkMode,
+				} ) }
 				aria-label={ __( 'Block navigation structure' ) }
 				ref={ treeGridRef }
 				onCollapseRow={ collapseRow }

packages/block-editor/src/components/list-view/style.scss

@@ -366,3 +366,16 @@ $block-navigation-max-indent: 8;
 	height: 36px;
 }
 
+.block-editor-list-view-tree.is-dark {
+	background: $gray-900;
+	.block-editor-list-view-block-contents {
+		color: $gray-100;
+	}
+	.block-editor-list-view-leaf.is-branch-selected:not(.is-selected) {
+		background: var(--wp-admin-theme-color-darker-20);
+	}
+	.block-editor-block-mover-button,
+	.block-editor-list-view-block__menu {
+		color: $gray-100;
+	}
+}

packages/core-data/src/entities.js

@@ -176,6 +176,14 @@ export const rootEntitiesConfig = [
 		baseURLParams: { context: 'edit' },
 		key: 'plugin',
 	},
+	{
+		label: __( 'Navigation' ),
+		name: 'navigationMenu',
+		kind: 'root',
+		baseURL: '/wp/v2/navigation',
+		baseURLParams: { context: 'edit' },
+		plural: 'navigationMenus',
+	},
 ];
 
 export const additionalEntityConfigLoaders = [

packages/e2e-test-utils/src/site-editor.js

@@ -265,7 +265,7 @@ export async function visitSiteEditor( query, skipWelcomeGuide = true ) {
  */
 export async function toggleGlobalStyles() {
 	await page.click(
-		'.edit-site-header__actions button[aria-label="Styles"]'
+		'.interface-interface-skeleton__drawer button[aria-label="Styles"]'
 	);
 }
 
@@ -275,7 +275,7 @@ export async function toggleGlobalStyles() {
  * @param {string} panelName Name of the panel that is going to be opened.
  */
 export async function openGlobalStylesPanel( panelName ) {
-	const selector = `//div[@aria-label="Settings"]//button[.//*[text()="${ panelName }"]]`;
+	const selector = `//div[contains(@class, "edit-site-global-styles-sidebar__panel")]//button[.//*[text()="${ panelName }"]]`;
 	await ( await page.waitForXPath( selector ) ).click();
 }
 
@@ -284,6 +284,6 @@ export async function openGlobalStylesPanel( panelName ) {
  */
 export async function openPreviousGlobalStylesPanel() {
 	await page.click(
-		'div[aria-label="Settings"] button[aria-label="Navigate to the previous view"]'
+		'.edit-site-global-styles-sidebar__panel button[aria-label="Navigate to the previous view"]'
 	);
 }

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

@@ -102,8 +102,8 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const openNavigationSidebar = useCallback( () => {
 		enableComplementaryArea(
-			'core/edit-site',
-			'edit-site/navigation-menu'
+			'core/edit-global',
+			'edit-global/navigation-menu'
 		);
 	}, [ enableComplementaryArea ] );
 	const contentRef = useRef();

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

@@ -220,7 +220,10 @@ function Editor( { onError } ) {
 												)
 											}
 											drawer={
-												<NavigationSidebar.Slot />
+												<>
+													<NavigationSidebar.Slot />
+													<ComplementaryArea.Slot scope="core/edit-global" />
+												</>
 											}
 											header={
 												<Header

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

@@ -10,7 +10,6 @@ $header-toolbar-min-width: 335px;
 	justify-content: space-between;
 
 	body.is-fullscreen-mode & {
-		padding-left: 60px;
 		transition: padding-left 20ms linear;
 		transition-delay: 80ms;
 		@include reduce-motion("transition");
@@ -65,14 +64,14 @@ body.is-navigation-sidebar-open {
 .edit-site-header__toolbar {
 	display: flex;
 	align-items: center;
-	padding-left: $grid-unit-10;
+	padding-left: $grid-unit-20 + 170;
 
 	@include break-small() {
-		padding-left: $grid-unit-30;
+		padding-left: $grid-unit-20 + 170;
 	}
 
 	@include break-wide() {
-		padding-right: $grid-unit-10;
+		padding-right: $grid-unit-10 + 170;
 	}
 
 	.edit-site-header-toolbar__inserter-toggle {

packages/edit-site/src/components/sidebar/global-styles-sidebar.js → packages/edit-site/src/components/navigation-sidebar/global-styles-sidebar.js

@@ -10,7 +10,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 /**
  * Internal dependencies
  */
-import DefaultSidebar from './default-sidebar';
+import DefaultSidebar from '../sidebar/default-sidebar';
 import { GlobalStylesUI, useGlobalStylesReset } from '../global-styles';
 
 export default function GlobalStylesSidebar() {
@@ -20,7 +20,8 @@ export default function GlobalStylesSidebar() {
 	return (
 		<DefaultSidebar
 			className="edit-site-global-styles-sidebar"
-			identifier="edit-site/global-styles"
+			scope="core/edit-global"
+			identifier="edit-global/global-styles"
 			title={ __( 'Styles' ) }
 			icon={ styles }
 			closeLabel={ __( 'Close global styles sidebar' ) }

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

@@ -12,6 +12,8 @@ import { useDispatch } from '@wordpress/data';
 import { store as editSiteStore } from '../../store';
 import NavigationPanel from './navigation-panel';
 import NavigationToggle from './navigation-toggle';
+import GlobalStylesSidebar from './global-styles-sidebar';
+import NavigationMenuSidebar from './navigation-menu-sidebar';
 
 export const {
 	Fill: NavigationPanelPreviewFill,
@@ -38,6 +40,8 @@ function NavigationSidebar( { isDefaultOpen = false, activeTemplateType } ) {
 		<NavigationSidebarFill>
 			<NavigationToggle />
 			<NavigationPanel activeItem={ activeTemplateType } />
+			<NavigationMenuSidebar />
+			<GlobalStylesSidebar />
 			<NavigationPanelPreviewSlot />
 		</NavigationSidebarFill>
 	);

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

@@ -8,7 +8,7 @@ import { navigation } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import DefaultSidebar from '../default-sidebar';
+import DefaultSidebar from '../../sidebar/default-sidebar';
 import NavigationInspector from './navigation-inspector';
 
 export default function NavigationMenuSidebar() {
@@ -17,6 +17,7 @@ export default function NavigationMenuSidebar() {
 			className="edit-site-navigation-menu-sidebar"
 			identifier="edit-site/navigation-menu"
 			title={ __( 'Navigation Menus' ) }
+			scope="core/edit-global"
 			icon={ navigation }
 			closeLabel={ __( 'Close navigation menu sidebar' ) }
 			panelClassName="edit-site-navigation-menu-sidebar__panel"

packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js → packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/navigation-menu.js

@@ -57,6 +57,7 @@ export default function NavigationMenu( { innerBlocks, id } ) {
 				expandNested={ false }
 				__experimentalFeatures
 				__experimentalPersistentListViewFeatures
+				__experimentalDarkMode
 			/>
 		</>
 	);

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

@@ -31,7 +31,7 @@
 .edit-site-navigation-inspector__placeholder {
 	padding: $grid-unit-10;
 	margin: $grid-unit-10;
-	background-color: $gray-100;
+	background-color: $gray-300;
 	animation: loadingpulse 1s linear infinite;
 	animation-delay: 0.5s; // avoid animating for fast network responses
 
@@ -40,3 +40,10 @@
 		width: 50%;
 	}
 }
+.edit-site-navigation-menu-sidebar,
+.edit-site-navigation-menu-sidebar .components-panel__header,
+.edit-site-navigation-inspector,
+.edit-site-navigation-menu-sidebar .interface-complementary-area-header .components-button {
+	background: $gray-900;
+	color: $gray-100;
+}

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

@@ -39,7 +39,7 @@
 
 .edit-site-navigation-panel__site-title-container {
 	height: $header-height;
-	padding-left: $header-height;
+	padding-left: $grid-unit-30;
 	margin: 0 $grid-unit-20 0 $grid-unit-10;
 	display: flex;
 	align-items: center;

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

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 import {
 	Button,
 	Icon,
@@ -17,6 +17,7 @@ import { __ } from '@wordpress/i18n';
 import { wordpress } from '@wordpress/icons';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { useReducedMotion } from '@wordpress/compose';
+import { PinnedItems } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -48,14 +49,6 @@ function NavigationToggle( { icon } ) {
 
 	const navigationToggleRef = useRef();
 
-	useEffect( () => {
-		// TODO: Remove this effect when alternative solution is merged.
-		// See: https://github.com/WordPress/gutenberg/pull/37314
-		if ( ! isNavigationOpen ) {
-			navigationToggleRef.current.focus();
-		}
-	}, [ isNavigationOpen ] );
-
 	const toggleNavigationPanel = () =>
 		setIsNavigationPanelOpened( ! isNavigationOpen );
 
@@ -107,6 +100,7 @@ function NavigationToggle( { icon } ) {
 			>
 				{ buttonIcon }
 			</Button>
+			<PinnedItems.Slot scope="core/edit-global" />
 		</motion.div>
 	);
 }

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

@@ -3,21 +3,24 @@
 
 .edit-site-navigation-toggle {
 	align-items: center;
-	background: $gray-900;
+	background: $black;
 	border-radius: 0;
 	display: flex;
 	position: absolute;
 	z-index: z-index(".edit-site-navigation-toggle");
 	height: $header-height;
-	width: $header-height;
+	width: $header-height + 94px;
+
+	button {
+		color: $white;
+	}
 }
 
 .edit-site-navigation-toggle__button.components-button {
 	align-items: center;
-	background: $gray-900;
+	background: $black;
 	border-radius: 0;
-	color: $white;
-	height: $header-height + $border-width;
+	height: $header-height - 1px;
 	width: $header-height;
 	z-index: 1;
 	margin-bottom: - $border-width;
@@ -32,20 +35,6 @@
 		box-shadow: none;
 	}
 
-	&::before {
-		transition: box-shadow 0.1s ease;
-		@include reduce-motion("transition");
-		content: "";
-		display: block;
-		position: absolute;
-		top: 9px;
-		right: 9px;
-		bottom: 9px;
-		left: 9px;
-		border-radius: $radius-block-ui + $border-width + $border-width;
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
-	}
-
 	// Hover color.
 	&:hover::before {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
@@ -69,3 +58,12 @@
 		margin-top: -($border-width);
 	}
 }
+
+.edit-site-navigation-toggle .interface-pinned-items {
+	button {
+		background: $black;
+	}
+	.is-pressed {
+		background: $gray-900;
+	}
+}