新手求助：如何在WordPress Gutenberg编辑器设置区添加新标签页？

阿华AIGC实验室

2026-5-9

Hey there! Let's figure out how to get those tabs showing up in the Gutenberg editor's settings area—your existing TabPanel code is a solid starting point, but we need to hook it into the right Gutenberg components to make it visible where you want it.

First, let's clarify: where exactly do you want the tabs?

There are two common scenarios for adding tabs to Gutenberg's settings area, and I'll cover both:

This adds a new section under the existing "Document" tab, with your custom tabs inside it.

Here's the full working code:

import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { TabPanel } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyCustomSettingsTabs = () => {
    // Track which tab is active
    const [activeTab, setActiveTab] = useState('tab1');

    const handleTabSelect = (tabName) => {
        setActiveTab(tabName);
        console.log('Selected tab:', tabName);
    };

    return (
        <PluginDocumentSettingPanel
            name="custom-settings-tabs"
            title={__('My Custom Settings', 'your-text-domain')}
            className="custom-settings-panel"
        >
            <TabPanel
                activeClass="active-tab"
                onSelect={handleTabSelect}
                tabs={[
                    {
                        name: 'tab1',
                        title: __('Tab 1', 'your-text-domain'),
                        className: 'tab-one',
                    },
                    {
                        name: 'tab2',
                        title: __('Tab 2', 'your-text-domain'),
                        className: 'tab-two',
                    },
                ]}
                activeTab={activeTab}
            >
                {(tab) => (
                    <div className="tab-content">
                        {tab.name === 'tab1' && (
                            <p>{__('Content for Tab 1 goes here! You can add fields, toggles, or any Gutenberg components.', 'your-text-domain')}</p>
                        )}
                        {tab.name === 'tab2' && (
                            <p>{__('Content for Tab 2 goes here—feel free to expand this with custom settings!', 'your-text-domain')}</p>
                        )}
                    </div>
                )}
            </TabPanel>
        </PluginDocumentSettingPanel>
    );
};

// Register the plugin so Gutenberg loads it
registerPlugin('custom-settings-tabs-plugin', {
    render: MyCustomSettingsTabs,
});

Key changes from your original code:

We wrapped the TabPanel in PluginDocumentSettingPanel, which tells Gutenberg to place this section inside the right sidebar's "Document" tab.
Added useState to track the active tab, so content switches correctly when you click between tabs.
Used registerPlugin to register our component with Gutenberg—this is how your custom code gets loaded into the editor.

If you want a brand new tab alongside the default ones, use PluginSidebar instead:

import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/edit-post';
import { TabPanel } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { cog } from '@wordpress/icons'; // Use a built-in icon for your sidebar

const MyCustomSidebarTabs = () => {
    const [activeTab, setActiveTab] = useState('tab1');

    const handleTabSelect = (tabName) => {
        setActiveTab(tabName);
        console.log('Selected tab:', tabName);
    };

    return (
        <PluginSidebar
            name="custom-sidebar-tabs"
            title={__('My Custom Sidebar', 'your-text-domain')}
            icon={cog}
        >
            <div className="sidebar-content p-4">
                <TabPanel
                    activeClass="active-tab"
                    onSelect={handleTabSelect}
                    tabs={[
                        {
                            name: 'tab1',
                            title: __('Tab 1', 'your-text-domain'),
                            className: 'tab-one',
                        },
                        {
                            name: 'tab2',
                            title: __('Tab 2', 'your-text-domain'),
                            className: 'tab-two',
                        },
                    ]}
                    activeTab={activeTab}
                >
                    {(tab) => (
                        <div className="tab-content">
                            {tab.name === 'tab1' && (
                                <p>{__('Content for Tab 1 in your custom sidebar!', 'your-text-domain')}</p>
                            )}
                            {tab.name === 'tab2' && (
                                <p>{__('Content for Tab 2 in your custom sidebar!', 'your-text-domain')}</p>
                            )}
                        </div>
                    )}
                </TabPanel>
            </div>
        </PluginSidebar>
    );
};

registerPlugin('custom-sidebar-tabs-plugin', {
    render: MyCustomSidebarTabs,
});

Final setup steps:

Save this code in a JavaScript file (e.g., custom-gutenberg-tabs.js) in your theme or custom plugin.
Enqueue the script in your theme's functions.php or plugin file, so Gutenberg loads it:

function enqueue_custom_gutenberg_tabs() {
    wp_enqueue_script(
        'custom-gutenberg-tabs',
        get_template_directory_uri() . '/path/to/custom-gutenberg-tabs.js', // Update this path
        array('wp-edit-post', 'wp-components', 'wp-element', 'wp-i18n', 'wp-plugins'),
        filemtime(get_template_directory() . '/path/to/custom-gutenberg-tabs.js'),
        true
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_gutenberg_tabs');