How to set defaults for Border controls in custom block

by

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.

0

Leave a Comment