From e913938ac338cd2a3ee8875703c1a4e792d9f002 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <github@andreidraganescu.info>
Date: Thu, 5 Jan 2023 13:39:32 +0000
Subject: [PATCH] determine inspector tabs via state

---
 .../data/data-core-block-editor.md            |  8 ++++++++
 .../src/components/block-card/index.js        |  8 ++++++--
 .../inspector-controls-tabs/index.js          | 19 +++++++++----------
 .../use-inspector-controls-tabs.js            |  4 +---
 .../off-canvas-editor/block-edit-button.js    |  4 +++-
 packages/block-editor/src/store/actions.js    |  6 ++++++
 packages/block-editor/src/store/reducer.js    | 10 ++++++++++
 packages/block-editor/src/store/selectors.js  |  4 ++++
 8 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
index 1b9da160f0f6fb..bf601ea6a2139a 100644
--- a/docs/reference-guides/data/data-core-block-editor.md
+++ b/docs/reference-guides/data/data-core-block-editor.md
@@ -477,6 +477,10 @@ _Returns_
 
 -   `Array`: ids of top-level and descendant blocks.
 
+### getDefaultInspectorControlsTab
+
+Undocumented declaration.
+
 ### getDraggedBlockClientIds
 
 Returns the client ids of any blocks being directly dragged.
@@ -1485,6 +1489,10 @@ _Parameters_
 
 -   _updates_ `Record<string,boolean>`: For each block's clientId, its new visibility setting.
 
+### setDefaultInspectorControlsTab
+
+Undocumented declaration.
+
 ### setHasControlledInnerBlocks
 
 Action that sets whether a block has controlled inner blocks.
diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
index dab832861ae661..cadfe4ef613793 100644
--- a/packages/block-editor/src/components/block-card/index.js
+++ b/packages/block-editor/src/components/block-card/index.js
@@ -45,13 +45,17 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 		};
 	}, [] );
 
-	const { selectBlock } = useDispatch( blockEditorStore );
+	const { selectBlock, setDefaultInspectorControlsTab } =
+		useDispatch( blockEditorStore );
 
 	return (
 		<div className={ classnames( 'block-editor-block-card', className ) }>
 			{ isOffCanvasNavigationEditorEnabled && parentNavBlockClientId && (
 				<Button
-					onClick={ () => selectBlock( parentNavBlockClientId ) }
+					onClick={ () => {
+						setDefaultInspectorControlsTab( 'list' );
+						selectBlock( parentNavBlockClientId );
+					} }
 					label={ __( 'Go to parent Navigation block' ) }
 					style={
 						// TODO: This style override is also used in ToolsPanelHeader.
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 efdaed591b4fec..7d157082187e44 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/index.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useSelect } from '@wordpress/data';
 import { TabPanel } from '@wordpress/components';
 
 /**
@@ -10,7 +11,7 @@ import { TAB_SETTINGS, TAB_STYLES, TAB_LIST_VIEW } from './utils';
 import SettingsTab from './settings-tab';
 import StylesTab from './styles-tab';
 import InspectorControls from '../inspector-controls';
-import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
+import { store as blockEditorStore } from '../../store';
 
 export default function InspectorControlsTabs( {
 	blockName,
@@ -18,14 +19,10 @@ 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 styles 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;
+	const initialTabName = useSelect( ( select ) => {
+		const { getDefaultInspectorControlsTab } = select( blockEditorStore );
+		return getDefaultInspectorControlsTab() ?? TAB_STYLES.name;
+	}, [] );
 
 	return (
 		<TabPanel
@@ -53,7 +50,9 @@ export default function InspectorControlsTabs( {
 
 				if ( tab.name === TAB_LIST_VIEW.name ) {
 					return (
-						<InspectorControls.Slot __experimentalGroup="list" />
+						<div>
+							<InspectorControls.Slot __experimentalGroup="list" />
+						</div>
 					);
 				}
 			} }
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
index fbe072fab11c58..25cf6bc2baba41 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
@@ -42,15 +42,13 @@ export default function useInspectorControlsTabs( blockName ) {
 		color: colorGroup,
 		default: defaultGroup,
 		dimensions: dimensionsGroup,
-		list: listGroup,
 		typography: typographyGroup,
 	} = InspectorControlsGroups;
 
 	// List View Tab: If there are any fills for the list group add that tab.
 	const listViewDisabled = useIsListViewTabDisabled( blockName );
-	const listFills = useSlotFills( listGroup.Slot.__unstableName );
 
-	if ( ! listViewDisabled && !! listFills && listFills.length ) {
+	if ( ! listViewDisabled ) {
 		tabs.push( TAB_LIST_VIEW );
 	}
 
diff --git a/packages/block-editor/src/components/off-canvas-editor/block-edit-button.js b/packages/block-editor/src/components/off-canvas-editor/block-edit-button.js
index 6281134e8c95e3..5aa4adaef41dd1 100644
--- a/packages/block-editor/src/components/off-canvas-editor/block-edit-button.js
+++ b/packages/block-editor/src/components/off-canvas-editor/block-edit-button.js
@@ -15,10 +15,12 @@ export default forwardRef( function BlockEditButton(
 	{ clientId, ...props },
 	ref
 ) {
-	const { selectBlock } = useDispatch( blockEditorStore );
+	const { selectBlock, setDefaultInspectorControlsTab } =
+		useDispatch( blockEditorStore );
 
 	const onClick = () => {
 		selectBlock( clientId );
+		setDefaultInspectorControlsTab( 'settings' );
 	};
 
 	return (
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index e1c88c2bd99b49..cfa17ec6216bc6 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -1501,6 +1501,12 @@ export const __unstableMarkAutomaticChange =
 		} );
 	};
 
+export const setDefaultInspectorControlsTab =
+	( tab ) =>
+	( { dispatch } ) => {
+		dispatch( { type: 'SET_DEFAULT_INSPECTOR_CONTROLS_TAB', tab } );
+	};
+
 /**
  * Action that enables or disables the navigation mode.
  *
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index 919ca1dceb4e32..c602b18e63ebc6 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1673,6 +1673,15 @@ export const blockListSettings = ( state = {}, action ) => {
 	return state;
 };
 
+export function defaultInspectorControlsTab( state = null, action ) {
+	switch ( action.type ) {
+		case 'SET_DEFAULT_INSPECTOR_CONTROLS_TAB':
+			return action.tab;
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning which mode is enabled.
  *
@@ -1879,6 +1888,7 @@ export default combineReducers( {
 	settings,
 	preferences,
 	lastBlockAttributesChange,
+	defaultInspectorControlsTab,
 	editorMode,
 	hasBlockMovingClientId,
 	automaticChangeStatus,
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index a29220305e6c65..3b58dbad7b49fa 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -2534,6 +2534,10 @@ export function isNavigationMode( state ) {
 	return state.editorMode === 'navigation';
 }
 
+export function getDefaultInspectorControlsTab( state ) {
+	return state.defaultInspectorControlsTab;
+}
+
 /**
  * Returns the current editor mode.
  *