Sidebar: Default selected tab to first available tab (#45998)

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

@@ -10,15 +10,30 @@ import { TAB_SETTINGS, TAB_APPEARANCE, TAB_LIST_VIEW } from './utils';
 import AppearanceTab from './appearance-tab';
 import SettingsTab from './settings-tab';
 import InspectorControls from '../inspector-controls';
+import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
 
 export default function InspectorControlsTabs( {
 	blockName,
 	clientId,
 	hasBlockStyles,
 	tabs,
 } ) {
+	// The tabs panel will mount before fills are rendered to the list view
+	// slot. This means the list view tab isn't initially included in the
+	// available tabs so the panel defaults selection to the appearance tab
+	// which at the time is the first tab. This check allows blocks known to
+	// include the list view tab to set it as the tab selected by default.
+	const initialTabName = ! useIsListViewTabDisabled( blockName )
+		? TAB_LIST_VIEW.name
+		: undefined;
+
 	return (
-		<TabPanel className="block-editor-block-inspector__tabs" tabs={ tabs }>
+		<TabPanel
+			className="block-editor-block-inspector__tabs"
+			tabs={ tabs }
+			initialTabName={ initialTabName }
+			key={ clientId }
+		>
 			{ ( tab ) => {
 				if ( tab.name === TAB_SETTINGS.name ) {
 					return (