How can i extend the existing Block Inspector Tabs in Wordpress Gutenberg Editor?

admin管理员组

文章数量:1122832

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

How can i create my own sidebar tabs?

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

How can i create my own sidebar tabs?

• block-editor
• editor
• react

Share Improve this question edited May 10, 2024 at 7:07 Sam Weiss-Gamtschi asked May 10, 2024 at 7:06 Sam Weiss-GamtschiSam Weiss-Gamtschi 133 bronze badges 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, 2024 at 23:30

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： How can i extend the existing Block Inspector Tabs in Wordpress Gutenberg Editor