Unlock Hidden Power: 6 Little-Known Ways to Master Custom Block Styles in WordPress

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.

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

You May Have Missed