Site Editor (Experiment): Automatically open the sidebar to the appropriate menu

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

@@ -6,9 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { usePrevious } from '@wordpress/compose';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { ESCAPE } from '@wordpress/keycodes';
-import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -22,7 +24,7 @@ const NavigationPanel = ( { isOpen } ) => {
 	const [ contentActiveMenu, setContentActiveMenu ] = useState( MENU_ROOT );
 	const { templatesActiveMenu, siteTitle } = useSelect( ( select ) => {
 		const { getNavigationPanelActiveMenu } = select( editSiteStore );
-		const { getEntityRecord } = select( 'core' );
+		const { getEntityRecord } = select( coreDataStore );
 
 		const siteData =
 			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
@@ -42,6 +44,15 @@ const NavigationPanel = ( { isOpen } ) => {
 		}
 	}, [ templatesActiveMenu ] );
 
+	// Resets the content menu to its root whenever the navigation opens to avoid
+	// having it stuck on a sub-menu, interfering with the normal navigation behavior.
+	const prevIsOpen = usePrevious( isOpen );
+	useEffect( () => {
+		if ( contentActiveMenu !== MENU_ROOT && isOpen && ! prevIsOpen ) {
+			setContentActiveMenu( MENU_ROOT );
+		}
+	}, [ contentActiveMenu, isOpen ] );
+
 	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
 	const closeOnEscape = ( event ) => {
@@ -69,12 +80,10 @@ const NavigationPanel = ( { isOpen } ) => {
 				</div>
 
 				<div className="edit-site-navigation-panel__scroll-container">
-					{ ( contentActiveMenu === MENU_ROOT ||
-						templatesActiveMenu !== MENU_ROOT ) && (
+					{ contentActiveMenu === MENU_ROOT && (
 						<TemplatesNavigation />
 					) }
-					{ ( templatesActiveMenu === MENU_ROOT ||
-						contentActiveMenu !== MENU_ROOT ) && (
+					{ templatesActiveMenu === MENU_ROOT && (
 						<ContentNavigation
 							onActivateMenu={ setContentActiveMenu }
 						/>

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

@@ -5,16 +5,23 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { Button, Icon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { wordpress } from '@wordpress/icons';
+import { store as coreDataStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
 
 function NavigationToggle( { icon, isOpen } ) {
-	const { isRequestingSiteIcon, siteIconUrl } = useSelect( ( select ) => {
-		const { getEntityRecord } = select( 'core' );
-		const { isResolving } = select( 'core/data' );
+	const {
+		isRequestingSiteIcon,
+		navigationPanelMenu,
+		siteIconUrl,
+	} = useSelect( ( select ) => {
+		const { getCurrentTemplateNavigationPanelSubMenu } = select(
+			editSiteStore
+		);
+		const { getEntityRecord, isResolving } = select( coreDataStore );
 		const siteData =
 			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
 
@@ -24,11 +31,23 @@ function NavigationToggle( { icon, isOpen } ) {
 				'__unstableBase',
 				undefined,
 			] ),
+			navigationPanelMenu: getCurrentTemplateNavigationPanelSubMenu(),
 			siteIconUrl: siteData.site_icon_url,
 		};
 	}, [] );
 
-	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
+	const {
+		openNavigationPanelToMenu,
+		setIsNavigationPanelOpened,
+	} = useDispatch( editSiteStore );
+
+	const toggleNavigationPanel = () => {
+		if ( isOpen ) {
+			setIsNavigationPanelOpened( false );
+			return;
+		}
+		openNavigationPanelToMenu( navigationPanelMenu );
+	};
 
 	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
 
@@ -55,7 +74,7 @@ function NavigationToggle( { icon, isOpen } ) {
 			<Button
 				className="edit-site-navigation-toggle__button has-icon"
 				label={ __( 'Toggle navigation' ) }
-				onClick={ () => setIsNavigationPanelOpened( ! isOpen ) }
+				onClick={ toggleNavigationPanel }
 				showTooltip
 			>
 				{ buttonIcon }

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

@@ -29,11 +29,11 @@ describe( 'NavigationToggle', () => {
 		it( 'should display a user uploaded site icon if it exists', () => {
 			useSelect.mockImplementation( ( cb ) => {
 				return cb( () => ( {
-					isResolving: () => false,
-					isFeatureActive: () => true,
+					getCurrentTemplateNavigationPanelSubMenu: () => 'root',
 					getEntityRecord: () => ( {
 						site_icon_url: 'https://fakeUrl.com',
 					} ),
+					isResolving: () => false,
 				} ) );
 			} );
 
@@ -48,11 +48,11 @@ describe( 'NavigationToggle', () => {
 		it( 'should display a default site icon if no user uploaded site icon exists', () => {
 			useSelect.mockImplementation( ( cb ) => {
 				return cb( () => ( {
-					isResolving: () => false,
-					isFeatureActive: () => true,
+					getCurrentTemplateNavigationPanelSubMenu: () => 'root',
 					getEntityRecord: () => ( {
 						site_icon_url: '',
 					} ),
+					isResolving: () => false,
 				} ) );
 			} );
 

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

@@ -7,9 +7,19 @@ import createSelector from 'rememo';
 /**
  * WordPress dependencies
  */
+import { store as coreDataStore } from '@wordpress/core-data';
 import { createRegistrySelector } from '@wordpress/data';
 import { uploadMedia } from '@wordpress/media-utils';
 
+/**
+ * Internal dependencies
+ */
+import {
+	MENU_TEMPLATE_PARTS,
+	TEMPLATE_PARTS_SUB_MENUS,
+	MENU_TEMPLATES,
+} from '../components/navigation-sidebar/navigation-panel/constants';
+
 /**
  * Returns whether the given feature is enabled or not.
  *
@@ -41,7 +51,7 @@ export function __experimentalGetPreviewDeviceType( state ) {
  * @return {Object} Whether the current user can create media or not.
  */
 export const getCanUserCreateMedia = createRegistrySelector( ( select ) => () =>
-	select( 'core' ).canUser( 'create', 'media' )
+	select( coreDataStore ).canUser( 'create', 'media' )
 );
 
 /**
@@ -139,6 +149,41 @@ export function getNavigationPanelActiveMenu( state ) {
 	return state.navigationPanel.menu;
 }
 
+/**
+ * Returns the current template or template part's corresponding
+ * navigation panel's sub menu, to be used with `openNavigationPanelToMenu`.
+ *
+ * Currently, while template parts return their sub menu,
+ * templates always return their main menu.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} The current template or template part's sub menu.
+ */
+export const getCurrentTemplateNavigationPanelSubMenu = createRegistrySelector(
+	( select ) => ( state ) => {
+		const templateType = getEditedPostType( state );
+		if ( 'wp_template' === templateType ) {
+			return MENU_TEMPLATES;
+		}
+
+		const templateId = getEditedPostId( state );
+		const template = templateId
+			? select( coreDataStore ).getEntityRecord(
+					'postType',
+					templateType,
+					templateId
+			  )
+			: null;
+
+		return (
+			TEMPLATE_PARTS_SUB_MENUS.find(
+				( submenu ) => submenu.area === template?.area
+			)?.menu || MENU_TEMPLATE_PARTS
+		);
+	}
+);
+
 /**
  * Returns the current opened/closed state of the navigation panel.
  *

packages/edit-site/src/store/test/selectors.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreDataStore } from '@wordpress/core-data';
+
 /**
  * Internal dependencies
  */
@@ -71,7 +76,7 @@ describe( 'selectors', () => {
 			expect( getCanUserCreateMedia() ).toBe( true );
 			expect(
 				getCanUserCreateMedia.registry.select
-			).toHaveBeenCalledWith( 'core' );
+			).toHaveBeenCalledWith( coreDataStore );
 			expect( canUser ).toHaveBeenCalledWith( 'create', 'media' );
 		} );
 	} );