apply code feedback

WordPress · Sep 30, 2024 · 45d4e97 · 45d4e97
1 parent 08de320
commit 45d4e97
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 47 deletions.
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
@@ -276,25 +276,16 @@ function GlobalStylesEditorCanvasContainerLink() {
 	}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );
 }
 
-function NavigationSync( { path: parentPath, onPathChange, children } ) {
+function useNavigatorSync( parentPath, onPathChange ) {
 	const navigator = useNavigator();
 	const { path: childPath } = navigator.location;
 	const previousParentPath = usePrevious( parentPath );
 	const previousChildPath = usePrevious( childPath );
 	useEffect( () => {
-		console.log({
-			parentPath,
-			previousChildPath,
-			previousParentPath,
-			childPath,
-		});
 		if ( parentPath !== childPath ) {
 			if ( parentPath !== previousParentPath ) {
 				navigator.goTo( parentPath );
-			} else if (
-				childPath !== previousChildPath &&
-				parentPath !== childPath
-			) {
+			} else if ( childPath !== previousChildPath ) {
 				onPathChange( childPath );
 			}
 		}
@@ -306,6 +297,12 @@ function NavigationSync( { path: parentPath, onPathChange, children } ) {
 		childPath,
 		navigator,
 	] );
+}
+
+// This component is used to wrap the hook in order to conditionally execute it
+// when the parent component is used on controlled mode.
+function NavigationSync( { path: parentPath, onPathChange, children } ) {
+	useNavigatorSync( parentPath, onPathChange );
 	return children;
 }
 

diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
@@ -3,7 +3,7 @@
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __ } from '@wordpress/i18n';
-import { useEffect, useMemo } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -20,15 +20,15 @@ import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
 import DataViewsSidebarContent from '../sidebar-dataviews';
+import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
+
 import {
 	NAVIGATION_POST_TYPE,
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
 	TEMPLATE_POST_TYPE,
 } from '../../utils/constants';
 import { PostEdit } from '../post-edit';
-import GlobalStylesUI from '../global-styles/ui';
-import Page from '../page';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -75,31 +75,6 @@ function useRedirectOldPaths() {
 	}, [ history, params ] );
 }
 
-const GLOBAL_STYLES_PATH_PREFIX = '/wp_global_styles';
-
-function GlobalStylesUIWrapper() {
-	const { params } = useLocation();
-	const history = useHistory();
-	const pathWithPrefix = params.path;
-	const [ path, onPathChange ] = useMemo( () => {
-		const processedPath = pathWithPrefix.substring(
-			GLOBAL_STYLES_PATH_PREFIX.length
-		);
-		return [
-			processedPath ? processedPath : '/',
-			( newPath ) => {
-				history.push( {
-					path:
-						! newPath || newPath === '/'
-							? GLOBAL_STYLES_PATH_PREFIX
-							: `${ GLOBAL_STYLES_PATH_PREFIX }${ newPath }`,
-				} );
-			},
-		];
-	}, [ pathWithPrefix, history ] );
-	return <GlobalStylesUI path={ path } onPathChange={ onPathChange } />;
-}
-
 export default function useLayoutAreas() {
 	const { params } = useLocation();
 	const { postType, postId, path, layout, isCustom, canvas, quickEdit } =
@@ -182,18 +157,12 @@ export default function useLayoutAreas() {
 				sidebar: (
 					<SidebarNavigationScreenGlobalStyles backPath={ {} } />
 				),
-				content: (
-					<Page className="edit-site-styes" title={ __( 'Styles' ) }>
-						<GlobalStylesUIWrapper />
-					</Page>
-				),
+				content: <GlobalStylesUIWrapper />,
 				preview: <Editor isPreviewOnly />,
 				mobile: hasEditCanvasMode ? (
 					<Editor isPreviewOnly />
 				) : (
-					<Page className="edit-site-styes" title={ __( 'Styles' ) }>
-						<GlobalStylesUIWrapper />
-					</Page>
+					<GlobalStylesUIWrapper />
 				),
 			},
 			widths: {

diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import GlobalStylesUI from '../global-styles/ui';
+import Page from '../page';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
+const GLOBAL_STYLES_PATH_PREFIX = '/wp_global_styles';
+
+export default function GlobalStylesUIWrapper() {
+	const { params } = useLocation();
+	const history = useHistory();
+	const pathWithPrefix = params.path;
+	const [ path, onPathChange ] = useMemo( () => {
+		const processedPath = pathWithPrefix.substring(
+			GLOBAL_STYLES_PATH_PREFIX.length
+		);
+		return [
+			processedPath ? processedPath : '/',
+			( newPath ) => {
+				history.push( {
+					path:
+						! newPath || newPath === '/'
+							? GLOBAL_STYLES_PATH_PREFIX
+							: `${ GLOBAL_STYLES_PATH_PREFIX }${ newPath }`,
+				} );
+			},
+		];
+	}, [ pathWithPrefix, history ] );
+	return (
+		<Page className="edit-site-styes" title={ __( 'Styles' ) }>
+			<GlobalStylesUI path={ path } onPathChange={ onPathChange } />
+		</Page>
+	);
+}