onSelect in the click event.

WordPress · Feb 2, 2023 · f5213e0 · f5213e0
1 parent 9e62436
commit f5213e0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 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
@@ -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
@@ -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
@@ -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 } />;
 }