5

WordPress provides Border control for a block, if the block has support for it. By default, these Border controls are not set:

Preview of Border controls in WordPress

I have enabled a support for these controls in my block by adding the following code to block.json:

...
"__experimentalBorder": {
    "color": true,
    "radius": true,
    "style": true,
    "width": true
}
...

To get saved values for these controls, I use the __experimentalUseBorderProps. Here is a code snippet of the edit function (edit.js):

import {
    useBlockProps,
    InnerBlocks,
    __experimentalUseBorderProps as useBorderProps
} from '@wordpress/block-editor';

export default function Edit() {
    const blockProps   = useBlockProps();
    const borderProps  = useBorderProps();

    return (
        <div { ...blockProps }
            style={ {
                ...borderProps.style,
            } }>
            <InnerBlocks />
        </div>
    );
}

However, I am wondering what is the correct way of setting default values for these controls. For example, 1px solid #000 as default border styles for the block.

1 Answer 1

2

I'm not sure if this is the right way for setting default values. But I'm able to set the default border values like this:

registerBlockType( 'block-name', {
...
    supports: {
        __experimentalBorder: {
            color: true,
            radius: true,
            style: true,
            width: true,
            __experimentalDefaultControls: {
                color: true,
                radius: true,
                style: true,
                width: true,
            },
        },
    },
    attributes: {
        style: {
            type: 'object',
            default: {
                border: {
                    color: '#000000',
                    radius: '10',
                    style: 'solid',
                    width: '1',
                },
            },
        },
    },
...
}

Please see for an example the 'color.background' 'style' section on this page:

The block can apply a default custom background color by specifying its own attribute with a default e.g.:

https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background

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.