如何将自定义古腾堡块控件从设置移动到样式选项卡？

Question

我正在为我未来的项目编写自定义古腾堡块。我有几个块，每个块都有自己的控件，允许更改边框属性、颜色等。

所有这些控件都在“设置”选项卡下可见，如下面的屏幕截图所示：

如何将这些控件移至第二个“样式”选项卡？这是我使用的代码：

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 }) => {
        //(... a lot of code here)

        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}) => {
        //(... a lot of code here)
    }
});

我应该对组件做点什么吗？

Answer 1

您可以使用 InspectorControls 组件上的 group 属性将控件添加到样式选项卡的底部，如下所示：

<InspectorControls group="styles">
   // controls
</InspectorControls>

您还可以将控件嵌套在现有样式选项卡组中，例如尺寸或版式。这是一篇关于 使用块检查器侧边栏组的 WordPress 开发人员帖子，以获取更多信息。