Refactor to have an onSelect event.

WordPress · Jan 25, 2023 · 4b0fc28 · 4b0fc28
1 parent d32556f
commit 4b0fc28
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git a/...dit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js b/...dit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js
@@ -17,38 +17,24 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import NavigationMenu from './navigation-menu';
-import { useHistory } from '../../routes';
 
 const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ];
 
-function NavigationEffect() {
-	const history = useHistory();
-	const { postType, postId } = useSelect( ( select ) => {
+function SelectionEffect( { onSelect } ) {
+	const selectedBlock = useSelect( ( select ) => {
 		const { getSelectedBlock } = select( blockEditorStore );
-		const selectedBlock = getSelectedBlock();
-		if ( ! selectedBlock ) {
-			return {};
-		}
-		const { attributes } = selectedBlock;
-		if (
-			attributes.kind === 'post-type' &&
-			attributes.id &&
-			attributes.type
-		) {
-			return { postType: attributes.type, postId: attributes.id };
-		}
-		return {};
+		return getSelectedBlock();
 	} );
-	// When a navigation item liking to a post is selected, navigate on the site editor.
+	// When a navigation item is selected call the onSelect callback.
 	useEffect( () => {
-		if ( history && postType && postId ) {
-			history.push( { postType, postId } );
+		if ( selectedBlock ) {
+			onSelect( selectedBlock );
 		}
-	}, [ postType, postId, history ] );
+	}, [ selectedBlock ] );
 	return null;
 }
 
-export default function NavigationInspector( { enableNavigation = false } ) {
+export default function NavigationInspector( { onSelect } ) {
 	const {
 		selectedNavigationBlockId,
 		clientIdToRef,
@@ -234,7 +220,7 @@ export default function NavigationInspector( { enableNavigation = false } ) {
 					onChange={ onChange }
 					onInput={ onInput }
 				>
-					{ enableNavigation && <NavigationEffect /> }
+					{ onSelect && <SelectionEffect onSelect={ onSelect } /> }
 					<NavigationMenu
 						id={ navMenuListId }
 						innerBlocks={ publishedInnerBlocks }

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -2,22 +2,42 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import NavigationInspector from '../sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector';
+import { useHistory } from '../routes';
 
 export default function SidebarNavigationScreenNavigationMenus() {
+	const history = useHistory();
+	const onSelect = useCallback(
+		( selectedBlock ) => {
+			const { attributes } = selectedBlock;
+			if (
+				attributes.kind === 'post-type' &&
+				attributes.id &&
+				attributes.type &&
+				history
+			) {
+				history.push( {
+					postType: attributes.type,
+					postId: attributes.id,
+				} );
+			}
+		},
+		[ history ]
+	);
 	return (
 		<SidebarNavigationScreen
 			path="/navigation"
 			parentTitle={ __( 'Design' ) }
 			title={ __( 'Navigation' ) }
 			content={
 				<div className="edit-site-sidebar-navigation-screen-navigation-menus">
-					<NavigationInspector enableNavigation={ true } />
+					<NavigationInspector onSelect={ onSelect } />
 				</div>
 			}
 		/>