0

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: controls are visible under Settings tab

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?

1
  • 1
    note that border width is something your block can opt into, enabling WP itself to provide border controls and a UI without you needing to add an attribute/control, and it would put it on the styles tab, it would even have better block.json and theme.json controls! Something similar might exist for width. If you can do that it will save a lot of effort
    – Tom J Nowell
    Dec 1, 2023 at 16:00

1 Answer 1

1

Set the group property of InspectorControls to styles:

<InspectorControls group="styles">
    // etc.
</InspectorControls>

The other possible groups are described in this article.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.