如何将自定义Gutenberg区块控件从设置标签页移至样式标签页？

问题描述 #

我正在为项目编写自定义Gutenberg区块，目前用于修改边框属性、宽度等的控件都显示在设置标签页中，现在希望把样式相关的控件（比如边框）迁移到「样式」标签页。现有代码如下：

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import {
    __experimentalBorderControl as BorderControl,
    __experimentalUnitControl as UnitControl 
} from '@wordpress/components';
import {
    useBlockProps,
    InnerBlocks,
    InspectorControls
} from '@wordpress/block-editor';
import metadata from '../config/paper-block.json';

registerBlockType(metadata, {
    edit: ({attributes, setAttributes }) => {
        //(... 此处省略其他代码)

        return <div {...blockProps}>
            <InspectorControls key="settings">
                <div className="block-editor-block-card">
                    <fieldset>
                        <UnitControl
                            label={__("Szerokość kartki", "ebl")}
                            value={ attributes.width }
                            onChange={ changeWidth }
                            units={ units }
                        />
                    </fieldset>
                </div>
                <div className="block-editor-block-card">
                    <fieldset>
                        <BorderControl
                            label={__("Obwód, krawędź (border)", "ebl")}
                            value={ attributes.border }
                            onChange={ changeBorder }
                            enableAlpha={true}
                        />
                    </fieldset>
                </div>
            </InspectorControls>
            <InnerBlocks />
        </div>
    },

    save: ({attributes}) => {
        //(... 此处省略其他代码)
    }
});

修改方案 #

需要调整组件结构，通过给InspectorControls设置group="styles"属性，将样式相关控件移至「样式」标签页。同时推荐使用Gutenberg官方的PanelBody组件替代自定义的div和fieldset，让界面更贴合编辑器原生风格。

修改后的代码如下：

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import {
    __experimentalBorderControl as BorderControl,
    __experimentalUnitControl as UnitControl,
    PanelBody // 新增导入PanelBody组件
} from '@wordpress/components';
import {
    useBlockProps,
    InnerBlocks,
    InspectorControls
} from '@wordpress/block-editor';
import metadata from '../config/paper-block.json';

registerBlockType(metadata, {
    edit: ({attributes, setAttributes }) => {
        //(... 此处省略其他代码)

        return <div {...blockProps}>
            {/* 保留设置标签页的宽度控件（如果宽度属于功能设置而非样式） */}
            <InspectorControls key="settings">
                <PanelBody title={__("卡片设置", "ebl")}>
                    <UnitControl
                        label={__("卡片宽度", "ebl")}
                        value={ attributes.width }
                        onChange={ changeWidth }
                        units={ units }
                    />
                </PanelBody>
            </InspectorControls>

            {/* 样式标签页的边框控件 */}
            <InspectorControls key="styles" group="styles">
                <PanelBody title={__("边框样式", "ebl")}>
                    <BorderControl
                        label={__("边框", "ebl")}
                        value={ attributes.border }
                        onChange={ changeBorder }
                        enableAlpha={true}
                    />
                </PanelBody>
            </InspectorControls>

            <InnerBlocks />
        </div>
    },

    save: ({attributes}) => {
        //(... 此处省略其他代码)
    }
});

关键说明 #

• 给InspectorControls添加group="styles"属性，即可让该组件内的控件显示在「样式」标签页中
• 使用PanelBody组件可以让控件区域拥有原生的折叠/展开功能，更符合Gutenberg编辑器的交互规范
• 建议将功能设置（如宽度）和样式设置（如边框）拆分到不同标签，提升用户操作体验

内容的提问来源于stack exchange，提问作者Mateusz