Unlock Hidden Power: 6 Little-Known Ways to Master Custom Block Styles in WordPress
The theme.json reads:
"border": {
"color":"#cf2e2e",
"style": "solid",
"width": "4px",
"radius":"15px"
}
The array in PHP reads:
array(
'border' => array(
'color' => '#f5bc42',
'style' => 'solid',
'width' => '4px',
'radius' => '15px'
),
To further demonstrate this idea, this function adds an orange border with a box shadow using the “sharp” shadow style preset.
function my_orange_border() {
register_block_style(
array( 'core/image' ),
array(
'name' => 'orange-border',
'label' => __( 'Orange Border', 'pauli' ),
'style_data'=> array(
'border' => array(
'color' => '#f5bc42',
'style' => 'solid',
'width' => '4px',
'radius' => '15px'
),
'shadow' => array(
'var(--wp--preset--shadow--sharp)'
)
)
)
);
};
add_action( 'init', 'my_orange_border' );
Of the three parameters, only the style_data information will be added to the global style section in the site editor and can be edited by the site owner. The other two add the styles to the Styles panel, and there is no edit path within the UI.
