Site Editor: Make current theme and editor settings available to rout…

…e area resolvers (#69299) * Router: Add context parameter to useMatch * Change `context` prop to `matchResolverArgs` * Remove `getThemeSupports` selector * Memorize matchResolverArgs value * Add editor settings to route area resolvers * Add comment for editorSettings Co-authored-by: t-hamano <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: carolinan <[email protected]>
WordPress · Mar 6, 2025 · 877c45b · 877c45b · github-actions · Mar 6, 2025
1 parent a793830
commit 877c45b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js
@@ -3,7 +3,8 @@
  */
 import { useSelect } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -30,9 +31,15 @@ function AppLayout() {
 
 export default function App() {
 	useRegisterSiteEditorRoutes();
-	const routes = useSelect( ( select ) => {
-		return unlock( select( editSiteStore ) ).getRoutes();
+	const { routes, currentTheme, editorSettings } = useSelect( ( select ) => {
+		return {
+			routes: unlock( select( editSiteStore ) ).getRoutes(),
+			currentTheme: select( coreStore ).getCurrentTheme(),
+			// This is a temp solution until the has_theme_json value is available for the current theme.
+			editorSettings: select( editSiteStore ).getSettings(),
+		};
 	}, [] );
+
 	const beforeNavigate = useCallback( ( { path, query } ) => {
 		if ( ! isPreviewingTheme() ) {
 			return { path, query };
@@ -50,11 +57,19 @@ export default function App() {
 		};
 	}, [] );
 
+	const matchResolverArgsValue = useMemo(
+		() => ( {
+			siteData: { currentTheme, editorSettings },
+		} ),
+		[ currentTheme, editorSettings ]
+	);
+
 	return (
 		<RouterProvider
 			routes={ routes }
 			pathArg="p"
 			beforeNavigate={ beforeNavigate }
+			matchResolverArgs={ matchResolverArgsValue }
 		>
 			<AppLayout />
 		</RouterProvider>

diff --git a/packages/router/src/router.tsx b/packages/router/src/router.tsx
@@ -153,7 +153,8 @@ export function useHistory() {
 export default function useMatch(
 	location: LocationWithQuery,
 	matcher: RouteRecognizer,
-	pathArg: string
+	pathArg: string,
+	matchResolverArgs: Record< string, any >
 ): Match {
 	const { query: rawQuery = {} } = location;
 
@@ -178,7 +179,11 @@ export default function useMatch(
 					if ( typeof value === 'function' ) {
 						return [
 							key,
-							value( { query, params: result.params } ),
+							value( {
+								query,
+								params: result.params,
+								...matchResolverArgs,
+							} ),
 						];
 					}
 					return [ key, value ];
@@ -193,19 +198,21 @@ export default function useMatch(
 			query,
 			path: addQueryArgs( path, query ),
 		};
-	}, [ matcher, rawQuery, pathArg ] );
+	}, [ matcher, rawQuery, pathArg, matchResolverArgs ] );
 }
 
 export function RouterProvider( {
 	routes,
 	pathArg,
 	beforeNavigate,
 	children,
+	matchResolverArgs,
 }: {
 	routes: Route[];
 	pathArg: string;
 	beforeNavigate?: BeforeNavigate;
 	children: React.ReactNode;
+	matchResolverArgs: Record< string, any >;
 } ) {
 	const location = useSyncExternalStore(
 		history.listen,
@@ -221,7 +228,7 @@ export function RouterProvider( {
 		} );
 		return ret;
 	}, [ routes ] );
-	const match = useMatch( location, matcher, pathArg );
+	const match = useMatch( location, matcher, pathArg, matchResolverArgs );
 	const config = useMemo(
 		() => ( { beforeNavigate, pathArg } ),
 		[ beforeNavigate, pathArg ]