WordPress provides Border control for a block, if the block has support for it. By default, these Border controls are not set:
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.