Unlock Hidden Power: 6 Little-Known Ways to Master Custom Block Styles in WordPress
Say we wanted to add a blue border style called image-blue-border.json.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"title": "Blue Border",
"slug": "blue-border",
"blockTypes": [ "core/image" ],
"styles": {
"border": {
"color": "#00f9ff",
"style": "solid",
"width": "4px",
"radius": "15px"
},
"shadow": "var(--wp--preset--shadow--natural)"
}
}
With theme.json v3, the metadata information for a block’s style is automatically registered within the WP_Block_Styles_Registry:
