Visually hide tabs when not selected, to keep state

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

@@ -50,6 +50,10 @@
 	overflow: hidden;
 }
 
+.woocommerce-product-editor-dev-tools-bar__tab-panel {
+	height: 100%;
+}
+
 .woocommerce-product-editor-dev-tools-block-inspector {
 	height: 100%;
 

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

@@ -24,6 +24,7 @@ import { useEntityProp } from '@wordpress/core-data';
 import { BlockInspector } from './block-inspector';
 import { Help } from './help';
 import { Product } from './product';
+import { TabPanel } from './tab-panel';
 import { useFocusedBlock } from './hooks/use-focused-block';
 
 function TabButton( {
@@ -120,13 +121,15 @@ export function ProductEditorDevToolsBar( {
 					</div>
 				</div>
 				<div className="woocommerce-product-editor-dev-tools-bar__panel">
-					{ selectedTab === 'inspector' && (
+					<TabPanel isSelected={ selectedTab === 'inspector' }>
 						<BlockInspector blockInfo={ blockInfo } />
-					) }
-					{ selectedTab === 'product' && (
+					</TabPanel>
+					<TabPanel isSelected={ selectedTab === 'product' }>
 						<Product evaluationContext={ evaluationContext } />
-					) }
-					{ selectedTab === 'help' && <Help /> }
+					</TabPanel>
+					<TabPanel isSelected={ selectedTab === 'help' }>
+						<Help />
+					</TabPanel>
 				</div>
 			</div>
 		</WooFooterItem>

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

@@ -0,0 +1,16 @@
+export function TabPanel( {
+	isSelected,
+	children,
+}: {
+	isSelected: boolean;
+	children: React.ReactNode;
+} ) {
+	return (
+		<div
+			className="woocommerce-product-editor-dev-tools-bar__tab-panel"
+			style={ isSelected ? {} : { display: 'none' } }
+		>
+			{ children }
+		</div>
+	);
+}