Block Inspector: Make Settings tab the default (#47592)

* Block Inspector: Make Settings tab the default

* Fix e2es after default tab change

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

@@ -20,7 +20,7 @@ export default function InspectorControlsTabs( {
 } ) {
 	// 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
+	// available tabs so the panel defaults selection to the settings 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 )

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

@@ -45,10 +45,7 @@ export default function useInspectorControlsTabs( blockName ) {
 	// 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 ) {
-		tabs.push( TAB_LIST_VIEW );
-	}
+	const hasListFills = ! listViewDisabled && !! listFills && listFills.length;
 
 	// Styles Tab: Add this tab if there are any fills for block supports
 	// e.g. border, color, spacing, typography, etc.
@@ -59,12 +56,9 @@ export default function useInspectorControlsTabs( blockName ) {
 		...( useSlotFills( stylesGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( typographyGroup.Slot.__unstableName ) || [] ),
 	];
+	const hasStyleFills = styleFills.length;
 
-	if ( styleFills.length ) {
-		tabs.push( TAB_STYLES );
-	}
-
-	// Settings Tab: If we don't already have multiple tabs to display
+	// Settings Tab: If we don't have multiple tabs to display
 	// (i.e. both list view and styles), check only the default and position
 	// InspectorControls slots. If we have multiple tabs, we'll need to check
 	// the advanced controls slot as well to ensure they are rendered.
@@ -74,13 +68,23 @@ export default function useInspectorControlsTabs( blockName ) {
 	const settingsFills = [
 		...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( positionGroup.Slot.__unstableName ) || [] ),
-		...( tabs.length > 1 ? advancedFills : [] ),
+		...( hasListFills && hasStyleFills > 1 ? advancedFills : [] ),
 	];
 
+	// Add the tabs in the order that they will default to if available.
+	// List View > Settings > Styles.
+	if ( hasListFills ) {
+		tabs.push( TAB_LIST_VIEW );
+	}
+
 	if ( settingsFills.length ) {
 		tabs.push( TAB_SETTINGS );
 	}
 
+	if ( hasStyleFills ) {
+		tabs.push( TAB_STYLES );
+	}
+
 	const tabSettings = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().blockInspectorTabs;
 	}, [] );

packages/e2e-tests/specs/editor/blocks/cover.test.js

@@ -13,6 +13,7 @@ import {
 	insertBlock,
 	createNewPost,
 	openDocumentSettingsSidebar,
+	switchBlockInspectorTab,
 	transformBlockTo,
 } from '@wordpress/e2e-test-utils';
 
@@ -134,6 +135,7 @@ describe( 'Cover', () => {
 			'.block-editor-list-view-block__contents-container a'
 		);
 
+		switchBlockInspectorTab( 'Styles' );
 		const heightInputHandle = await page.waitForSelector(
 			'input[id*="block-cover-height-input"]'
 		);

test/e2e/specs/editor/blocks/buttons.spec.js

@@ -154,6 +154,10 @@ test.describe( 'Buttons', () => {
 		await page.keyboard.type( 'Content' );
 		await editor.openDocumentSettingsSidebar();
 
+		// Switch to the Styles tab.
+		await page.click(
+			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
+		);
 		await page.click(
 			'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
 		);
@@ -179,6 +183,10 @@ test.describe( 'Buttons', () => {
 		await page.keyboard.type( 'Content' );
 		await editor.openDocumentSettingsSidebar();
 
+		// Switch to the Styles tab.
+		await page.click(
+			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
+		);
 		await page.click(
 			'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
 		);
@@ -210,6 +218,10 @@ test.describe( 'Buttons', () => {
 		await page.keyboard.type( 'Content' );
 		await editor.openDocumentSettingsSidebar();
 
+		// Switch to the Styles tab.
+		await page.click(
+			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
+		);
 		await page.click(
 			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
 		);
@@ -235,6 +247,10 @@ test.describe( 'Buttons', () => {
 		await page.keyboard.type( 'Content' );
 		await editor.openDocumentSettingsSidebar();
 
+		// Switch to the Styles tab.
+		await page.click(
+			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
+		);
 		await page.click(
 			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
 		);