0

With <InspectorControls> i'm able to extend the WP Gutenberg Sidebar but i want to extend the default tabs like in this picture:

enter image description here

How can i create my own sidebar tabs?

1
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer.
    – Community Bot
    Commented May 14 at 23:30

1 Answer 1

0

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 and SlotFills.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.