Site Editor: show pattern category step in navigation for mobile (#69206

)

Co-authored-by: t-hamano <[email protected]>
Co-authored-by: stokesman <[email protected]>

packages/edit-site/src/components/site-editor-routes/patterns.js

@@ -1,15 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import PagePatterns from '../page-patterns';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobilePatternsView() {
+	const { query = {} } = useLocation();
+	const { categoryId } = query;
+
+	return !! categoryId ? (
+		<PagePatterns />
+	) : (
+		<SidebarNavigationScreenPatterns backPath="/" />
+	);
+}
 
 export const patternsRoute = {
 	name: 'patterns',
 	path: '/pattern',
 	areas: {
 		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
 		content: <PagePatterns />,
-		mobile: <PagePatterns />,
+		mobile: <MobilePatternsView />,
 	},
 };