Remove NavigatorProvider and NavigatorScreen

WordPress · Apr 15, 2024 · 020c5c4 · 020c5c4
1 parent 0ae8183
commit 020c5c4
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 55 deletions.
diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -203,7 +203,13 @@ function routerReducer(
 	return { screens, locationHistory, matchedPath };
 }
 
-function useMemoryRouter( initialPath: string ): NavigatorContextType {
+function UnconnectedNavigatorProvider(
+	props: WordPressComponentProps< NavigatorProviderProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
+	const { initialPath, children, className, ...otherProps } =
+		useContextSystem( props, 'NavigatorProvider' );
+
 	const [ routerState, dispatch ] = useReducer(
 		routerReducer,
 		initialPath,
@@ -232,7 +238,7 @@ function useMemoryRouter( initialPath: string ): NavigatorContextType {
 
 	const { locationHistory, matchedPath } = routerState;
 
-	return useMemo(
+	const navigatorContextValue: NavigatorContextType = useMemo(
 		() => ( {
 			location: {
 				...locationHistory[ locationHistory.length - 1 ],
@@ -244,17 +250,6 @@ function useMemoryRouter( initialPath: string ): NavigatorContextType {
 		} ),
 		[ locationHistory, matchedPath, methods ]
 	);
-}
-
-function UnconnectedNavigatorProvider(
-	props: WordPressComponentProps< NavigatorProviderProps, 'div' >,
-	forwardedRef: ForwardedRef< any >
-) {
-	const { initialPath, children, className, router, ...otherProps } =
-		useContextSystem( props, 'NavigatorProvider' );
-
-	const memoryRouter = useMemoryRouter( initialPath );
-	const navigatorContextValue = router ?? memoryRouter;
 
 	const cx = useCx();
 	const classes = useMemo(

diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -33,20 +33,18 @@ function UnconnectedNavigatorScreen(
 	props: WordPressComponentProps< NavigatorScreenProps, 'div', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
+	const screenId = useId();
 	const { children, className, path, ...otherProps } = useContextSystem(
 		props,
 		'NavigatorScreen'
 	);
 
 	const { location, match, addScreen, removeScreen } =
 		useContext( NavigatorContext );
+	const isMatch = match === screenId;
 	const wrapperRef = useRef< HTMLDivElement >( null );
 
-	const screenId = useId();
 	useEffect( () => {
-		if ( ! path ) {
-			return;
-		}
 		const screen = {
 			id: screenId,
 			path: escapeAttribute( path ),
@@ -55,7 +53,6 @@ function UnconnectedNavigatorScreen(
 		return () => removeScreen( screen );
 	}, [ screenId, path, addScreen, removeScreen ] );
 
-	const isMatch = ! path || match === screenId;
 	const isRTL = isRTLFn();
 	const { isInitial, isBack } = location;
 	const cx = useCx();
@@ -134,15 +131,11 @@ function UnconnectedNavigatorScreen(
 
 	const mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );
 
-	if ( ! isMatch ) {
-		return null;
-	}
-
-	return (
+	return isMatch ? (
 		<View ref={ mergedWrapperRef } className={ classes } { ...otherProps }>
 			{ children }
 		</View>
-	);
+	) : null;
 }
 
 /**

diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
@@ -45,10 +45,6 @@ export type NavigatorProviderProps = {
 	 * The initial active path.
 	 */
 	initialPath: string;
-	/**
-	 * External router
-	 */
-	router?: NavigatorContext;
 	/**
 	 * The children elements.
 	 */

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -11,8 +11,6 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 	__unstableUseNavigateRegions as useNavigateRegions,
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
 } from '@wordpress/components';
 import {
 	useReducedMotion,
@@ -52,7 +50,6 @@ import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands
 import { useIsSiteEditorLoading } from './hooks';
 import useLayoutAreas from './router';
 import useMovingAnimation from './animation';
-import { useRouter } from '../sync-state-with-url/use-sync-path-with-url';
 import SaveHub from '../save-hub';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
@@ -121,7 +118,6 @@ export default function Layout() {
 	const animationRef = useMovingAnimation( {
 		triggerAnimationOnChange: canvasMode + '__' + routeKey,
 	} );
-	const router = useRouter();
 
 	// This determines which animation variant should apply to the header.
 	// There is also a `isDistractionFreeHovering` state that gets priority
@@ -250,14 +246,9 @@ export default function Layout() {
 										} }
 										className="edit-site-layout__sidebar"
 									>
-										<NavigatorProvider
-											className="edit-site-sidebar__content"
-											router={ router }
-										>
-											<NavigatorScreen className="edit-site-sidebar__screen-wrapper">
-												{ areas.sidebar }
-											</NavigatorScreen>
-										</NavigatorProvider>
+										<div className="edit-site-sidebar__content">
+											{ areas.sidebar }
+										</div>
 										<SaveHub />
 									</motion.div>
 								) }

diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
@@ -1,9 +1,7 @@
 .edit-site-sidebar__content {
 	flex-grow: 1;
 	overflow-y: auto;
-}
 
-.edit-site-sidebar__screen-wrapper {
 	@include custom-scrollbars-on-hover(transparent, $gray-700);
 	scrollbar-gutter: stable;
 	display: flex;

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