From f5213e080795958286f7459fc60c6f0c8e6108f3 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Thu, 2 Feb 2023 22:08:45 +0000
Subject: [PATCH] onSelect in the click event.

---
 .../src/components/off-canvas-editor/index.js | 10 ++++++++--
 .../components/navigation-inspector/index.js  | 20 ++++---------------
 .../navigation-inspector/navigation-menu.js   |  4 ++--
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js
index 593a2c2e97ca3..4066aba9f1f9c 100644
--- a/packages/block-editor/src/components/off-canvas-editor/index.js
+++ b/packages/block-editor/src/components/off-canvas-editor/index.js
@@ -60,7 +60,8 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {boolean} props.showBlockMovers Flag to enable block movers
  * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
  * @param {Object}  props.LeafMoreMenu    Optional more menu substitution.
- * @param {string}  props.description         Optional accessible description for the tree grid component.
+ * @param {string}  props.description     Optional accessible description for the tree grid component.
+ * @param {string}  props.onSelect        Optional callback to be invoked when a block is selected.
  * @param {Object}  ref                   Forwarded ref
  */
 function OffCanvasEditor(
@@ -71,9 +72,11 @@ function OffCanvasEditor(
 		isExpanded = false,
 		LeafMoreMenu,
 		description = __( 'Block navigation structure' ),
+		onSelect,
 	},
 	ref
 ) {
+	const { getBlock } = useSelect( blockEditorStore );
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( blocks );
 
@@ -113,8 +116,11 @@ function OffCanvasEditor(
 		( event, blockClientId ) => {
 			updateBlockSelection( event, blockClientId );
 			setSelectedTreeId( blockClientId );
+			if ( onSelect ) {
+				onSelect( getBlock( blockClientId ) );
+			}
 		},
-		[ setSelectedTreeId, updateBlockSelection ]
+		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
 	);
 	useEffect( () => {
 		isMounted.current = true;
diff --git a/packages/edit-site/src/components/navigation-inspector/index.js b/packages/edit-site/src/components/navigation-inspector/index.js
index a006d6b6c0962..e109878f65466 100644
--- a/packages/edit-site/src/components/navigation-inspector/index.js
+++ b/packages/edit-site/src/components/navigation-inspector/index.js
@@ -20,20 +20,6 @@ import NavigationMenu from './navigation-menu';
 
 const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ];
 
-function SelectionEffect( { onSelect } ) {
-	const selectedBlock = useSelect( ( select ) => {
-		const { getSelectedBlock } = select( blockEditorStore );
-		return getSelectedBlock();
-	} );
-	// When a navigation item is selected call the onSelect callback.
-	useEffect( () => {
-		if ( selectedBlock ) {
-			onSelect( selectedBlock );
-		}
-	}, [ selectedBlock ] );
-	return null;
-}
-
 export default function NavigationInspector( { onSelect } ) {
 	const {
 		selectedNavigationBlockId,
@@ -220,8 +206,10 @@ export default function NavigationInspector( { onSelect } ) {
 					onChange={ onChange }
 					onInput={ onInput }
 				>
-					<NavigationMenu innerBlocks={ publishedInnerBlocks } />
-					{ onSelect && <SelectionEffect onSelect={ onSelect } /> }
+					<NavigationMenu
+						innerBlocks={ publishedInnerBlocks }
+						onSelect={ onSelect }
+					/>
 				</BlockEditorProvider>
 			) }
 
diff --git a/packages/edit-site/src/components/navigation-inspector/navigation-menu.js b/packages/edit-site/src/components/navigation-inspector/navigation-menu.js
index e281166f99cfb..9e201a660f80a 100644
--- a/packages/edit-site/src/components/navigation-inspector/navigation-menu.js
+++ b/packages/edit-site/src/components/navigation-inspector/navigation-menu.js
@@ -36,7 +36,7 @@ const ALLOWED_BLOCKS = {
 	],
 };
 
-export default function NavigationMenu( { innerBlocks } ) {
+export default function NavigationMenu( { innerBlocks, onSelect } ) {
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 
 	const { OffCanvasEditor } = unlock( blockEditorExperiments );
@@ -56,5 +56,5 @@ export default function NavigationMenu( { innerBlocks } ) {
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
 
-	return <OffCanvasEditor blocks={ innerBlocks } selectBlockInCanvas={ true } />;
+	return <OffCanvasEditor blocks={ innerBlocks } onSelect={ onSelect } />;
 }