Eliminate NavigatorButton from SidebarNavigationItem

WordPress · Apr 15, 2024 · d74bae6 · d74bae6
1 parent c592f4c
commit d74bae6
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 47 deletions.
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,45 @@ import {
 } from '@wordpress/components';
 import { isRTL } from '@wordpress/i18n';
 import { chevronRightSmall, chevronLeftSmall, Icon } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 export default function SidebarNavigationItem( {
 	className,
 	icon,
 	withChevron = false,
 	suffix,
+	path,
+	onClick,
 	children,
 	...props
 } ) {
+	const history = useHistory();
+	let handleClick = onClick;
+
+	// If there is no custom click handler, create one that navigates to `path`.
+	if ( ! handleClick && path ) {
+		handleClick = ( e ) => {
+			e.preventDefault();
+			// history.replaceState( { focusTargetSelector: `[$id="${ path }"]` } );
+			history.push( { path } );
+		};
+	}
+
 	return (
 		<Item
 			className={ classnames(
 				'edit-site-sidebar-navigation-item',
 				{ 'with-suffix': ! withChevron && suffix },
 				className
 			) }
+			onClick={ handleClick }
 			{ ...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,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalNavigatorButton as NavigatorButton,
-} 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';
@@ -39,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>
 				</>
 			}

diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
@@ -2,31 +2,12 @@
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { useHistory } = unlock( routerPrivateApis );
 
 export function useRouter() {
-	const history = useHistory();
-
-	const goMethods = useMemo( () => {
-		const goTo = ( p ) => {
-			history.push( { path: p } );
-		};
-
-		return { goTo };
-	}, [ history ] );
-
 	return useMemo(
 		() => ( {
 			location: { isBack: false, isInitial: false, skipFocus: false },
-			...goMethods,
 		} ),
-		[ goMethods ]
+		[]
 	);
 }