From 63c629b14d6d3d37389a0d6454a5f86dab74771a Mon Sep 17 00:00:00 2001
From: Matt Sherman <matt@jam123.com>
Date: Fri, 27 Oct 2023 10:19:47 -0400
Subject: [PATCH] Handle when no block was focused

---
 .../block-inspector.tsx                       | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector.tsx
index 1071cb3eb1c..20182c0b937 100644
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector.tsx
+++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 export function BlockInspector( {
 	blockInfo: { blockName, templateBlockId, templateBlockOrder },
 }: {
@@ -9,16 +14,27 @@ export function BlockInspector( {
 } ) {
 	return (
 		<div className="woocommerce-product-editor-dev-tools-block-inspector">
-			<dl className="woocommerce-product-editor-dev-tools-block-inspector__properties">
-				<dt>Block name</dt>
-				<dd>{ blockName }</dd>
+			{ ! blockName && (
+				<p>
+					{ __(
+						'Focus on a block to see its details.',
+						'woocommerce'
+					) }
+				</p>
+			) }
 
-				<dt>Template block id</dt>
-				<dd>{ templateBlockId }</dd>
+			{ blockName && (
+				<dl className="woocommerce-product-editor-dev-tools-block-inspector__properties">
+					<dt>Block name</dt>
+					<dd>{ blockName }</dd>
 
-				<dt>Template block order</dt>
-				<dd>{ templateBlockOrder }</dd>
-			</dl>
+					<dt>Template block id</dt>
+					<dd>{ templateBlockId }</dd>
+
+					<dt>Template block order</dt>
+					<dd>{ templateBlockOrder }</dd>
+				</dl>
+			) }
 		</div>
 	);
 }