From 02b6a80b156681aedfdc7d995c69085a9a3f31b8 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 25 Nov 2022 14:03:15 +0800
Subject: [PATCH] Sidebar: Default selected tab to first available tab (#45998)

---
 .../components/inspector-controls-tabs/index.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js
index d9101719973d1..f943c24f47061 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/index.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -10,6 +10,7 @@ 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,
@@ -17,8 +18,22 @@ export default function InspectorControlsTabs( {
 	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 (