contentOnly unsynced patterns experiment: Ensure a tab is selected when clicking Edit contents (#71987)

* Ensure a tab is selected when clicking Edit contents

* Obey the initialTabName

* Ensure initialTab is respected in effect

* Refine, avoid call to `setSelectedTabId` that is not needed


----

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>

Author: 3 people

packages/block-editor/src/components/inspector-controls-tabs/index.js

@@ -6,6 +6,7 @@ import {
 	Tooltip,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useSelect } from '@wordpress/data';
 
@@ -43,9 +44,40 @@ export default function InspectorControlsTabs( {
 		? TAB_LIST_VIEW.name
 		: undefined;
 
+	const [ selectedTabId, setSelectedTabId ] = useState(
+		initialTabName ?? tabs[ 0 ]?.name
+	);
+
+	// When the active tab is not amongst the available `tabs`, it indicates
+	// the list of tabs was changed dynamically with the active one being
+	// removed. Set the active tab back to the first tab.
+	useEffect( () => {
+		// Skip this behavior if `initialTabName` is supplied. In the navigation
+		// block, the list view tab isn't present in `tabs` initially. The early
+		// return here prevents the dynamic behavior that follows from overriding
+		// `initialTabName`.
+		if ( initialTabName ) {
+			return;
+		}
+
+		if ( tabs?.length && selectedTabId ) {
+			const activeTab = tabs.find(
+				( tab ) => tab.name === selectedTabId
+			);
+			if ( ! activeTab ) {
+				setSelectedTabId( tabs[ 0 ].name );
+			}
+		}
+	}, [ tabs, selectedTabId, initialTabName ] );
+
 	return (
 		<div className="block-editor-block-inspector__tabs">
-			<Tabs defaultTabId={ initialTabName } key={ clientId }>
+			<Tabs
+				defaultTabId={ initialTabName }
+				selectedTabId={ selectedTabId }
+				onSelect={ setSelectedTabId }
+				key={ clientId }
+			>
 				<Tabs.TabList>
 					{ tabs.map( ( tab ) =>
 						showIconLabels ? (