From 2718f97431e7236b34a17dd6dffb84a8c9ea9224 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 1 Feb 2023 14:54:11 +1000 Subject: [PATCH] Block Inspector: Make Settings tab the default (#47592) * Block Inspector: Make Settings tab the default * Fix e2es after default tab change --- .../inspector-controls-tabs/index.js | 2 +- .../use-inspector-controls-tabs.js | 24 +++++++++++-------- .../specs/editor/blocks/cover.test.js | 2 ++ test/e2e/specs/editor/blocks/buttons.spec.js | 16 +++++++++++++ 4 files changed, 33 insertions(+), 11 deletions(-) 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 74f89754428cb..a02aa7cc208a6 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/index.js +++ b/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 ) 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 3d78d4fa70ebe..90c9bb6d3cf5f 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 @@ -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; }, [] ); diff --git a/packages/e2e-tests/specs/editor/blocks/cover.test.js b/packages/e2e-tests/specs/editor/blocks/cover.test.js index efc700a190bb4..092a0276ba0f2 100644 --- a/packages/e2e-tests/specs/editor/blocks/cover.test.js +++ b/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"]' ); diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js index 98e263e9dde5d..cf4f56174f47f 100644 --- a/test/e2e/specs/editor/blocks/buttons.spec.js +++ b/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]' );