Site Editor: create router adapter for sidebar (#60466)

* Site Editor: create router adapter for sidebar * Dissolve the Sidebar component, put items into areas.sidebar * Remove unused SidebarNavigationScreenNavigationItem * Eliminate usages of useNavigator() * Eliminate NavigatorButton from SidebarNavigationItem * Remove NavigatorProvider and NavigatorScreen * edit-site no longer needs path-to-regexp * Animation when navigating forward/backward * Sidebar animation with motion.div, basic focus mgmt * Add id attr to SidebarNavigationItem * Separate module for SidebarContent * Fix focusing when going back * Don't focus on initial render * Keep focusSelector across multiple back navigations
WordPress · Apr 17, 2024 · 1a11f07 · 1a11f07
1 parent e7f17e6
commit 1a11f07
Show file tree

Hide file tree

Showing 17 changed files with 264 additions and 412 deletions.
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -35,7 +35,6 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
-import Sidebar from '../sidebar';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
@@ -51,6 +50,8 @@ import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands
 import { useIsSiteEditorLoading } from './hooks';
 import useLayoutAreas from './router';
 import useMovingAnimation from './animation';
+import SidebarContent from '../sidebar';
+import SaveHub from '../save-hub';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
@@ -224,8 +225,7 @@ export default function Layout() {
 						The NavigableRegion must always be rendered and not use
 						`inert` otherwise `useNavigateRegions` will fail.
 					*/ }
-					{ ( ! isMobileViewport ||
-						( isMobileViewport && ! areas.mobile ) ) && (
+					{ ( ! isMobileViewport || ! areas.mobile ) && (
 						<NavigableRegion
 							ariaLabel={ __( 'Navigation' ) }
 							className="edit-site-layout__sidebar-region"
@@ -248,7 +248,10 @@ export default function Layout() {
 										} }
 										className="edit-site-layout__sidebar"
 									>
-										<Sidebar />
+										<SidebarContent routeKey={ routeKey }>
+											{ areas.sidebar }
+										</SidebarContent>
+										<SaveHub />
 									</motion.div>
 								) }
 							</AnimatePresence>

diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -12,7 +13,17 @@ import Editor from '../editor';
 import PagePages from '../page-pages';
 import PagePatterns from '../page-patterns';
 import PageTemplatesTemplateParts from '../page-templates-template-parts';
-
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
+import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
+import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
+import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
+import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
+import DataViewsSidebarContent from '../sidebar-dataviews';
 import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
@@ -29,19 +40,24 @@ export default function useLayoutAreas() {
 	// Note: Since "sidebar" is not yet supported here,
 	// returning undefined from "mobile" means show the sidebar.
 
-	// Regular page
+	// Page list
 	if ( path === '/page' ) {
 		const isListLayout = layout === 'list' || ! layout;
 		return {
 			key: 'pages-list',
 			areas: {
+				sidebar: (
+					<SidebarNavigationScreen
+						title={ __( 'Manage pages' ) }
+						content={ <DataViewsSidebarContent /> }
+					/>
+				),
 				content: <PagePages />,
 				preview: isListLayout && (
 					<Editor
 						isLoading={ isSiteEditorLoading }
 						onClick={ () =>
 							history.push( {
-								path,
 								postType: 'page',
 								postId,
 								canvas: 'edit',
@@ -64,14 +80,24 @@ export default function useLayoutAreas() {
 
 	// Regular other post types
 	if ( postType && postId ) {
+		let sidebar;
+		if ( postType === 'wp_template_part' || postType === 'wp_block' ) {
+			sidebar = <SidebarNavigationScreenPattern />;
+		} else if ( postType === 'wp_template' ) {
+			sidebar = <SidebarNavigationScreenTemplate />;
+		} else if ( postType === 'page' ) {
+			sidebar = <SidebarNavigationScreenPage />;
+		} else {
+			sidebar = <SidebarNavigationScreenNavigationMenu />;
+		}
 		return {
 			key: 'page',
 			areas: {
+				sidebar,
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile:
-					canvas === 'edit' ? (
-						<Editor isLoading={ isSiteEditorLoading } />
-					) : undefined,
+				mobile: canvas === 'edit' && (
+					<Editor isLoading={ isSiteEditorLoading } />
+				),
 			},
 		};
 	}
@@ -82,6 +108,11 @@ export default function useLayoutAreas() {
 		return {
 			key: 'templates-list',
 			areas: {
+				sidebar: postId ? (
+					<SidebarNavigationScreenTemplate />
+				) : (
+					<SidebarNavigationScreenTemplatesBrowse postType="wp_template" />
+				),
 				content: (
 					<PageTemplatesTemplateParts
 						postType={ TEMPLATE_POST_TYPE }
@@ -108,6 +139,9 @@ export default function useLayoutAreas() {
 		return {
 			key: 'template-parts',
 			areas: {
+				sidebar: (
+					<SidebarNavigationScreenTemplatesBrowse postType="wp_template_part" />
+				),
 				content: (
 					<PageTemplatesTemplateParts
 						postType={ TEMPLATE_PART_POST_TYPE }
@@ -133,21 +167,50 @@ export default function useLayoutAreas() {
 		return {
 			key: 'patterns',
 			areas: {
+				sidebar: <SidebarNavigationScreenPatterns />,
 				content: <PagePatterns />,
 				mobile: <PagePatterns />,
 			},
 		};
 	}
 
+	// Styles
+	if ( path === '/wp_global_styles' ) {
+		return {
+			key: 'styles',
+			areas: {
+				sidebar: <SidebarNavigationScreenGlobalStyles />,
+				preview: <Editor isLoading={ isSiteEditorLoading } />,
+				mobile: canvas === 'edit' && (
+					<Editor isLoading={ isSiteEditorLoading } />
+				),
+			},
+		};
+	}
+
+	// Navigation
+	if ( path === '/navigation' ) {
+		return {
+			key: 'styles',
+			areas: {
+				sidebar: <SidebarNavigationScreenNavigationMenus />,
+				preview: <Editor isLoading={ isSiteEditorLoading } />,
+				mobile: canvas === 'edit' && (
+					<Editor isLoading={ isSiteEditorLoading } />
+				),
+			},
+		};
+	}
+
 	// Fallback shows the home page preview
 	return {
 		key: 'default',
 		areas: {
+			sidebar: <SidebarNavigationScreenMain />,
 			preview: <Editor isLoading={ isSiteEditorLoading } />,
-			mobile:
-				canvas === 'edit' ? (
-					<Editor isLoading={ isSiteEditorLoading } />
-				) : undefined,
+			mobile: canvas === 'edit' && (
+				<Editor isLoading={ isSiteEditorLoading } />
+			),
 		},
 	};
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-item/index.js
@@ -13,22 +13,51 @@ import {
 } from '@wordpress/components';
 import { isRTL } from '@wordpress/i18n';
 import { chevronRightSmall, chevronLeftSmall, Icon } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { SidebarNavigationContext } from '../sidebar';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 export default function SidebarNavigationItem( {
 	className,
 	icon,
 	withChevron = false,
 	suffix,
+	path,
+	onClick,
 	children,
 	...props
 } ) {
+	const history = useHistory();
+	const navigate = useContext( SidebarNavigationContext );
+
+	// If there is no custom click handler, create one that navigates to `path`.
+	function handleClick( e ) {
+		if ( onClick ) {
+			onClick( e );
+			navigate( 'forward' );
+		} else if ( path ) {
+			e.preventDefault();
+			history.push( { path } );
+			navigate( 'forward', `[id="${ path }"]` );
+		}
+	}
+
 	return (
 		<Item
 			className={ classnames(
 				'edit-site-sidebar-navigation-item',
 				{ 'with-suffix': ! withChevron && suffix },
 				className
 			) }
+			onClick={ handleClick }
+			id={ path }
 			{ ...props }
 		>
 			<HStack justify="flex-start">

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -5,10 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { edit, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import {
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { __experimentalVStack as VStack } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { useCallback } from '@wordpress/element';
@@ -48,13 +45,7 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 		[]
 	);
 	if ( hasGlobalStyleVariations ) {
-		return (
-			<NavigatorButton
-				{ ...props }
-				as={ SidebarNavigationItem }
-				path="/wp_global_styles"
-			/>
-		);
+		return <SidebarNavigationItem { ...props } path="/wp_global_styles" />;
 	}
 	return (
 		<SidebarNavigationItem

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -1,15 +1,10 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalUseNavigator as useNavigator,
-} from '@wordpress/components';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
-
 import { useEffect } from '@wordpress/element';
 
 /**
@@ -22,17 +17,14 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
 export default function SidebarNavigationScreenMain() {
-	const { location } = useNavigator();
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
 
 	// Clear the editor canvas container view when accessing the main navigation screen.
 	useEffect( () => {
-		if ( location?.path === '/' ) {
-			setEditorCanvasContainerView( undefined );
-		}
-	}, [ setEditorCanvasContainerView, location?.path ] );
+		setEditorCanvasContainerView( undefined );
+	}, [ setEditorCanvasContainerView ] );
 
 	return (
 		<SidebarNavigationScreen
@@ -44,44 +36,40 @@ export default function SidebarNavigationScreenMain() {
 			content={
 				<>
 					<ItemGroup>
-						<NavigatorButton
-							as={ SidebarNavigationItem }
+						<SidebarNavigationItem
 							path="/navigation"
 							withChevron
 							icon={ navigation }
 						>
 							{ __( 'Navigation' ) }
-						</NavigatorButton>
+						</SidebarNavigationItem>
 						<SidebarNavigationItemGlobalStyles
 							withChevron
 							icon={ styles }
 						>
 							{ __( 'Styles' ) }
 						</SidebarNavigationItemGlobalStyles>
-						<NavigatorButton
-							as={ SidebarNavigationItem }
+						<SidebarNavigationItem
 							path="/page"
 							withChevron
 							icon={ page }
 						>
 							{ __( 'Pages' ) }
-						</NavigatorButton>
-						<NavigatorButton
-							as={ SidebarNavigationItem }
+						</SidebarNavigationItem>
+						<SidebarNavigationItem
 							path="/wp_template"
 							withChevron
 							icon={ layout }
 						>
 							{ __( 'Templates' ) }
-						</NavigatorButton>
-						<NavigatorButton
-							as={ SidebarNavigationItem }
+						</SidebarNavigationItem>
+						<SidebarNavigationItem
 							path="/patterns"
 							withChevron
 							icon={ symbol }
 						>
 							{ __( 'Patterns' ) }
-						</NavigatorButton>
+						</SidebarNavigationItem>
 					</ItemGroup>
 				</>
 			}