The Core script has no API surface to modify those tabs.
The tabs are rendered by InspectorControlsTabs
:
export default function InspectorControlsTabs( {
blockName,
clientId,
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 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 )
? TAB_LIST_VIEW.name
: undefined;
return (
<div className="block-editor-block-inspector__tabs">
<Tabs initialTabId={ initialTabName } key={ clientId }>
<Tabs.TabList>
{ tabs.map( ( tab ) => (
<Tabs.Tab
key={ tab.name }
tabId={ tab.name }
render={
<Button
icon={ tab.icon }
label={ tab.title }
className={ tab.className }
/>
}
/>
) ) }
</Tabs.TabList>
<Tabs.TabPanel tabId={ TAB_SETTINGS.name } focusable={ false }>
<SettingsTab showAdvancedControls={ !! blockName } />
…
The tabs
prop comes from the BlockInspector
component:
const availableTabs = useInspectorControlsTabs( blockType?.name );
…
if ( count > 1 ) {
return (
<div className="block-editor-block-inspector">
<MultiSelectionInspector />
{ showTabs ? (
<InspectorControlsTabs tabs={ availableTabs } />
) : (
And in useInspectorControlsTabs()
, there is no extensibility API surface area.
Thus, the only ways I can see you’d be able to edit those tabs is:
- Replacing the
block-editor(.min).js
script that comes from Core with your own fork that has extensibility for more tabs, though you may need to keep your fork up to date with core. - Use a
MutationObserver
that observes the page, and reshuffles the DOM, though I’d presume it’d be a nightmare to track the Core state andSlotFill
s.