Refactor menu item components

plugins/woocommerce-beta-tester/src/index.js

@@ -9,6 +9,7 @@ import { render } from '@wordpress/element';
 import { App } from './app';
 import './index.scss';
 import './example-fills/experimental-woocommerce-wcpay-feature';
+import { registerProductEditorDevTools } from './product-editor-dev-tools';
 
 const appRoot = document.getElementById(
 	'woocommerce-admin-test-helper-app-root'
@@ -17,3 +18,5 @@ const appRoot = document.getElementById(
 if ( appRoot ) {
 	render( <App />, appRoot );
 }
+
+registerProductEditorDevTools();

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

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuItem } from '@wordpress/components';
+import { search, Icon } from '@wordpress/icons';
+
+export function BlockInspectorMenuItem( { onClick }: { onClick: () => void } ) {
+	return (
+		<MenuItem
+			icon={ <Icon icon={ search } /> }
+			iconPosition="right"
+			onClick={ onClick }
+		>
+			{ __( 'Show block inspector', 'woocommerce' ) }
+		</MenuItem>
+	);
+}

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

@@ -2,22 +2,20 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { MenuItem, MenuGroup } from '@wordpress/components';
+import { MenuGroup } from '@wordpress/components';
-import { search, Icon } from '@wordpress/icons';
 import { __experimentalWooProductMoreMenuItem as WooProductMoreMenuItem } from '@woocommerce/product-editor';
 
-export function DevToolsMenuItem() {
+/**
+ * Internal dependencies
+ */
+import { BlockInspectorMenuItem } from './block-inspector-menu-item';
+
+export function DevToolsMenu() {
 	return (
 		<WooProductMoreMenuItem>
 			{ ( { onClose }: { onClose: () => void } ) => (
 				<MenuGroup label={ __( 'Development tools', 'woocommerce' ) }>
-					<MenuItem
+					<BlockInspectorMenuItem onClick={ onClose } />
-						icon={ <Icon icon={ search } /> }
-						iconPosition="right"
-						onClick={ onClose }
-					>
-						{ __( 'Show block inspector', 'woocommerce' ) }
-					</MenuItem>
 				</MenuGroup>
 			) }
 		</WooProductMoreMenuItem>

plugins/woocommerce-beta-tester/src/product-editor-dev-tools/index.ts

@@ -6,12 +6,12 @@ import { registerPlugin } from '@wordpress/plugins';
 /**
  * Internal dependencies
  */
-import { DevToolsMenuItem } from './dev-tools-menu-item';
+import { DevToolsMenu } from './dev-tools-menu';
 
 export function registerProductEditorDevTools() {
 	registerPlugin( 'woocommerce-product-editor-dev-tools', {
 		// @ts-expect-error: 'scope' does exist
 		scope: 'woocommerce-product-block-editor',
-		render: DevToolsMenuItem,
+		render: DevToolsMenu,
 	} );
 }