How to set defaults for Border controls in custom block


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 added a support for these controls to 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 useBorderProps. Here is a code snippet of the edit function (edit.js):

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

    return (
        <div { ...blockProps }
            style={ {
            } }>
            <InnerBlocks />

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.

Taras Dashkevych 4 months 2022-04-10T14:31:55-05:00 0 Answers 0 views 0

Leave an answer