Site Editor: Make sidebar back button go *back* instead of *up* if po…

…ssible
WordPress · Jul 10, 2023 · 44bc3b6 · 44bc3b6
1 parent 38fca8a
commit 44bc3b6
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 11 deletions.
diff --git a/packages/components/src/navigator/context.ts b/packages/components/src/navigator/context.ts
@@ -10,11 +10,12 @@ import type { NavigatorContext as NavigatorContextType } from './types';
 
 const initialContextValue: NavigatorContextType = {
 	location: {},
+	params: {},
+	hasBack: false,
 	goTo: () => {},
 	goBack: () => {},
 	goToParent: () => {},
 	addScreen: () => {},
 	removeScreen: () => {},
-	params: {},
 };
 export const NavigatorContext = createContext( initialContextValue );
diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -172,7 +172,7 @@ function UnconnectedNavigatorProvider(
 					skipFocus,
 				};
 
-				if ( prevLocationHistory.length < 1 ) {
+				if ( prevLocationHistory.length < 1 || isBack ) {
 					return [ newLocation ];
 				}
 
@@ -225,6 +225,7 @@ function UnconnectedNavigatorProvider(
 			},
 			params: matchedPath ? matchedPath.params : {},
 			match: matchedPath ? matchedPath.id : undefined,
+			hasBack: locationHistory.length > 1,
 			goTo,
 			goBack,
 			goToParent,

diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
@@ -26,6 +26,7 @@ export type NavigatorLocation = NavigateOptions & {
 export type Navigator = {
 	location: NavigatorLocation;
 	params: MatchParams;
+	hasBack: boolean;
 	goTo: ( path: string, options?: NavigateOptions ) => void;
 	goBack: () => void;
 	goToParent: () => void;

diff --git a/packages/components/src/navigator/use-navigator.ts b/packages/components/src/navigator/use-navigator.ts
@@ -13,15 +13,16 @@ import type { Navigator } from './types';
  * Retrieves a `navigator` instance.
  */
 function useNavigator(): Navigator {
-	const { location, params, goTo, goBack, goToParent } =
+	const { location, params, hasBack, goTo, goBack, goToParent } =
 		useContext( NavigatorContext );
 
 	return {
 		location,
+		params,
+		hasBack,
 		goTo,
 		goBack,
 		goToParent,
-		params,
 	};
 }
 

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
@@ -21,7 +21,6 @@ const config = {
 		description: __(
 			'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'
 		),
-		backPath: '/patterns',
 	},
 };
 
@@ -33,7 +32,6 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 		<SidebarNavigationScreen
 			title={ config[ postType ].title }
 			description={ config[ postType ].description }
-			backPath={ config[ postType ].backPath }
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -4,7 +4,6 @@
 import {
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
 	__experimentalUseNavigator as useNavigator,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -41,7 +40,7 @@ export default function SidebarNavigationScreen( {
 		};
 	}, [] );
 	const { getTheme } = useSelect( coreStore );
-	const { goTo } = useNavigator();
+	const { hasBack, goTo, goBack, goToParent } = useNavigator();
 	const theme = getTheme( currentlyPreviewingTheme() );
 	const icon = isRTL() ? chevronRight : chevronLeft;
 
@@ -58,9 +57,11 @@ export default function SidebarNavigationScreen( {
 					className="edit-site-sidebar-navigation-screen__title-icon"
 				>
 					{ ! isRoot && ! backPath && (
-						<NavigatorToParentButton
-							as={ SidebarButton }
-							icon={ isRTL() ? chevronRight : chevronLeft }
+						<SidebarButton
+							onClick={ () =>
+								hasBack ? goBack() : goToParent()
+							}
+							icon={ icon }
 							label={ __( 'Back' ) }
 							showTooltip={ false }
 						/>

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
@@ -109,6 +109,13 @@ export default function useSyncPathWithURL() {
 	}, [ navigatorLocation?.path, navigatorParams, history ] );
 
 	useEffect( () => {
+		if (
+			Object.entries( urlParams ).every( ( [ key, value ] ) => {
+				return currentUrlParams.current[ key ] === value;
+			} )
+		) {
+			return;
+		}
 		currentUrlParams.current = urlParams;
 		const path = getPathFromURL( urlParams );
 		if ( currentPath.current !== path ) {