Move useFocusedBlock to dev tools bar

plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector.tsx

@@ -1,12 +1,12 @@
-/**
- * Internal dependencies
- */
-import { useFocusedBlock } from './hooks/use-focused-block';
-
-export function BlockInspector() {
-	const { blockName, templateBlockId, templateBlockOrder } =
-		useFocusedBlock();
-
+export function BlockInspector( {
+	blockInfo: { blockName, templateBlockId, templateBlockOrder },
+}: {
+	blockInfo: {
+		blockName?: string | null;
+		templateBlockId?: string | null;
+		templateBlockOrder?: number | null;
+	};
+} ) {
 	return (
 		<div className="woocommerce-product-editor-dev-tools-block-inspector">
 			<dl className="woocommerce-product-editor-dev-tools-block-inspector__properties">

plugins/woocommerce-beta-tester/src/product-editor-dev-tools/hooks/use-focused-block.ts

@@ -36,9 +36,13 @@ export function useFocusedBlock() {
 		templateBlockId: focusedElement?.getAttribute(
 			'data-template-block-id'
 		),
-		templateBlockOrder: focusedElement?.getAttribute(
-			'data-template-block-order'
-		),
+		templateBlockOrder:
+			parseInt(
+				focusedElement?.getAttribute(
+					'data-template-block-order'
+				) as string,
+				10
+			) || null,
 	};
 
 	return blockInfo;

plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx

@@ -11,6 +11,8 @@ import { close } from '@wordpress/icons';
  * Internal dependencies
  */
 import { BlockInspector } from './block-inspector';
+import { useFocusedBlock } from './hooks/use-focused-block';
+
 export function ProductEditorDevToolsBar( {
 	onClose,
 }: {
@@ -18,6 +20,8 @@ export function ProductEditorDevToolsBar( {
 } ) {
 	const [ selectedTab, setSelectedTab ] = useState< string >( 'inspector' );
 
+	const blockInfo = useFocusedBlock();
+
 	function handleNavigate( _childIndex: number, child: HTMLButtonElement ) {
 		child.click();
 	}
@@ -55,7 +59,9 @@ export function ProductEditorDevToolsBar( {
 					</div>
 				</div>
 				<div className="woocommerce-product-editor-dev-tools-bar__panel">
-					{ selectedTab === 'inspector' && <BlockInspector /> }
+					{ selectedTab === 'inspector' && (
+						<BlockInspector blockInfo={ blockInfo } />
+					) }
 					{ selectedTab === 'about' && (
 						<div>About developer tools</div>
 					) }