How to move custom gutenberg block controls from settings to styles tab?

Question

I'm writing custom Gutenberg blocks for my future projects. I have a few blocks and everyone of these has its own controls that allow change of border attributes, colors etc.

All of these controls are visible under Settings tab as you can see on the screenshot below:

How can I move these controls to the second, "Styles" tab? Here is the code I use:

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)
    }
});

Should I do something with component?

Answer 1

You can use the group prop on the InspectorControls component to add your controls to the bottom of the styles tab like this:

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

You can also nest the controls within an existing styles tab group like dimensions or typography. Here's a WordPress developer post on using block inspector sidebar groups for more info.