Unlock Hidden Power: 6 Little-Known Ways to Master Custom Block Styles in WordPress
name
: The identifier of the style used to compute a CSS class.label
: A human-readable label for the style.
Once set, you can add them to the init
hook in your theme.
function my_style_red(){
register_block_style(
'core/image',
array(
'name' => 'red-border',
'label' => __( 'Red Border', 'my-theme' )
)
);
}
add_action( 'init', 'my_style_red' );
Add styling to theme.json
We’ll add some styling for the red-border
variation to the theme.json
file. It’s placed within the styles.blocks.core/image
section, as we’re making changes to the Image block.