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 ( - + { ( tab ) => { if ( tab.name === TAB_SETTINGS.name ) { return (