diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector-tab-panel.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector-tab-panel.tsx
new file mode 100644
index 00000000000..58bea2f284b
--- /dev/null
+++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector-tab-panel.tsx
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { TabPanel } from './tab-panel';
+
+export function BlockInspectorTabPanel( {
+	isSelected,
+	blockInfo: { blockName, templateBlockId, templateBlockOrder },
+}: {
+	isSelected: boolean;
+	blockInfo: {
+		blockName?: string | null;
+		templateBlockId?: string | null;
+		templateBlockOrder?: number | null;
+	};
+} ) {
+	return (
+		<TabPanel isSelected={ isSelected }>
+			<div className="woocommerce-product-editor-dev-tools-block-inspector">
+				{ ! blockName && (
+					<p>
+						{ __(
+							'Focus on a block to see its details.',
+							'woocommerce'
+						) }
+					</p>
+				) }
+
+				{ blockName && (
+					<dl className="woocommerce-product-editor-dev-tools-block-inspector__properties">
+						<dt>Block name</dt>
+						<dd>{ blockName }</dd>
+
+						<dt>Template block id</dt>
+						<dd>{ templateBlockId }</dd>
+
+						<dt>Template block order</dt>
+						<dd>{ templateBlockOrder }</dd>
+					</dl>
+				) }
+			</div>
+		</TabPanel>
+	);
+}
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
deleted file mode 100644
index 20182c0b937..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-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">
-			{ ! blockName && (
-				<p>
-					{ __(
-						'Focus on a block to see its details.',
-						'woocommerce'
-					) }
-				</p>
-			) }
-
-			{ blockName && (
-				<dl className="woocommerce-product-editor-dev-tools-block-inspector__properties">
-					<dt>Block name</dt>
-					<dd>{ blockName }</dd>
-
-					<dt>Template block id</dt>
-					<dd>{ templateBlockId }</dd>
-
-					<dt>Template block order</dt>
-					<dd>{ templateBlockOrder }</dd>
-				</dl>
-			) }
-		</div>
-	);
-}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expressions.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expressions-panel.tsx
similarity index 98%
rename from plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expressions.tsx
rename to plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expressions-panel.tsx
index 0c6fe56f558..89423dbe861 100644
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expressions.tsx
+++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expressions-panel.tsx
@@ -6,7 +6,7 @@ import { evaluate } from '@woocommerce/expression-evaluation';
 import { Button } from '@wordpress/components';
 import { useState } from 'react';
 
-export function Expressions( {
+export function ExpressionsPanel( {
 	evaluationContext,
 }: {
 	evaluationContext: {
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help-tab-panel.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help-tab-panel.tsx
new file mode 100644
index 00000000000..acd07d78ebf
--- /dev/null
+++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help-tab-panel.tsx
@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { TabPanel } from './tab-panel';
+
+export function HelpTabPanel( { isSelected }: { isSelected: boolean } ) {
+	return (
+		<TabPanel isSelected={ isSelected }>
+			<div className="woocommerce-product-editor-dev-tools-help">
+				<p>
+					{ __(
+						'For help with WooCommerce product editor development, the following resources are available.',
+						'woocommerce'
+					) }
+				</p>
+				<ul>
+					<li>
+						<a
+							href="https://github.com/woocommerce/woocommerce/tree/trunk/docs/product-editor-development"
+							target="_blank"
+							rel="noreferrer"
+						>
+							{ __(
+								'Product Editor Development Handbook',
+								'woocommerce'
+							) }
+						</a>
+					</li>
+					<li>
+						<a
+							href="https://github.com/woocommerce/woocommerce/discussions/categories/woocommerce-product-block-editor"
+							target="_blank"
+							rel="noreferrer"
+						>
+							{ __(
+								'Product Editor Discussion on GitHub',
+								'woocommerce'
+							) }
+						</a>
+					</li>
+					<li>
+						<a
+							href="https://woocommerce.com/community-slack/"
+							target="_blank"
+							rel="noreferrer"
+						>
+							{ __(
+								'WooCommerce Community Slack, in the #developers channel',
+								'woocommerce'
+							) }
+						</a>
+					</li>
+				</ul>
+			</div>
+		</TabPanel>
+	);
+}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help.tsx
deleted file mode 100644
index 2af2570514b..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export function Help() {
-	return (
-		<div className="woocommerce-product-editor-dev-tools-help">
-			<p>
-				{ __(
-					'For help with WooCommerce product editor development, the following resources are available.',
-					'woocommerce'
-				) }
-			</p>
-			<ul>
-				<li>
-					<a
-						href="https://github.com/woocommerce/woocommerce/tree/trunk/docs/product-editor-development"
-						target="_blank"
-						rel="noreferrer"
-					>
-						{ __(
-							'Product Editor Development Handbook',
-							'woocommerce'
-						) }
-					</a>
-				</li>
-				<li>
-					<a
-						href="https://github.com/woocommerce/woocommerce/discussions/categories/woocommerce-product-block-editor"
-						target="_blank"
-						rel="noreferrer"
-					>
-						{ __(
-							'Product Editor Discussion on GitHub',
-							'woocommerce'
-						) }
-					</a>
-				</li>
-				<li>
-					<a
-						href="https://woocommerce.com/community-slack/"
-						target="_blank"
-						rel="noreferrer"
-					>
-						{ __(
-							'WooCommerce Community Slack, in the #developers channel',
-							'woocommerce'
-						) }
-					</a>
-				</li>
-			</ul>
-		</div>
-	);
-}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx
index 4bf19104b0e..f2fb6a438b0 100644
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx
+++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx
@@ -21,9 +21,9 @@ import { useEntityProp } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { BlockInspector } from './block-inspector';
-import { Help } from './help';
-import { Product } from './product';
+import { BlockInspectorTabPanel } from './block-inspector-tab-panel';
+import { HelpTabPanel } from './help-tab-panel';
+import { ProductTabPanel } from './product-tab-panel';
 import { TabPanel } from './tab-panel';
 import { useFocusedBlock } from './hooks/use-focused-block';
 
@@ -121,15 +121,15 @@ export function ProductEditorDevToolsBar( {
 					</div>
 				</div>
 				<div className="woocommerce-product-editor-dev-tools-bar__panel">
-					<TabPanel isSelected={ selectedTab === 'inspector' }>
-						<BlockInspector blockInfo={ blockInfo } />
-					</TabPanel>
-					<TabPanel isSelected={ selectedTab === 'product' }>
-						<Product evaluationContext={ evaluationContext } />
-					</TabPanel>
-					<TabPanel isSelected={ selectedTab === 'help' }>
-						<Help />
-					</TabPanel>
+					<BlockInspectorTabPanel
+						blockInfo={ blockInfo }
+						isSelected={ selectedTab === 'inspector' }
+					/>
+					<ProductTabPanel
+						evaluationContext={ evaluationContext }
+						isSelected={ selectedTab === 'product' }
+					/>
+					<HelpTabPanel isSelected={ selectedTab === 'help' } />
 				</div>
 			</div>
 		</WooFooterItem>
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-tab-panel.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-tab-panel.tsx
new file mode 100644
index 00000000000..760b32f0a7a
--- /dev/null
+++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-tab-panel.tsx
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { Product } from '@woocommerce/data';
+
+/**
+ * Internal dependencies
+ */
+import { ExpressionsPanel } from './expressions-panel';
+import { TabPanel } from './tab-panel';
+
+export function ProductTabPanel( {
+	isSelected,
+	evaluationContext,
+}: {
+	isSelected: boolean;
+	evaluationContext: {
+		postType: string;
+		editedProduct: Product;
+	};
+} ) {
+	return (
+		<TabPanel isSelected={ isSelected }>
+			<div className="woocommerce-product-editor-dev-tools-product">
+				<div className="woocommerce-product-editor-dev-tools-product-entity">
+					{ JSON.stringify(
+						evaluationContext.editedProduct,
+						null,
+						4
+					) }
+				</div>
+				<ExpressionsPanel evaluationContext={ evaluationContext } />
+			</div>
+		</TabPanel>
+	);
+}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product.tsx
deleted file mode 100644
index bb8dfcca057..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { Expressions } from './expressions';
-
-export function Product( {
-	evaluationContext,
-}: {
-	evaluationContext: {
-		postType: string;
-		editedProduct: Product;
-	};
-} ) {
-	return (
-		<div className="woocommerce-product-editor-dev-tools-product">
-			<div className="woocommerce-product-editor-dev-tools-product-entity">
-				{ JSON.stringify( evaluationContext.editedProduct, null, 4 ) }
-			</div>
-			<Expressions evaluationContext={ evaluationContext } />
-		</div>
-	);
-}