register_block_style( string|string[] $block_name, array $style_properties ): bool

User Contributed Notes

1. Skip to note 2 content

   Marcio Duarte 4 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 5You must log in to vote on the helpfulness of this note

   The only mandatory properties of the $style_properties array are name and label:

   • name: the identifier of the style used to compute a CSS class.
   • label: a human-readable label for the style.

   The array can optionally include inline_style or style_handle, in order to choose how to load the required CSS:

   • inline_style: contains inline CSS code that registers the CSS class required for the style. All inline block styles will appear in the head tag.
   • style_handle: contains the handle to an already registered style that should be enqueued in places where block styles are needed. Using this option gives you more control over where to enqueue the CSS.

   Also optional: set the is_default property to true to mark one of the block styles as the default one.

   Tip: to find the correct block name, open the block editor, launch the browser console and type wp.blocks.getBlockTypes(). You will see the complete list of block names (from core or third-party).

   Complete example:

   if ( function_exists( 'register_block_style' ) ) {
       register_block_style(
           'core/quote',
           array(
               'name'         => 'blue-quote',
               'label'        => __( 'Blue Quote', 'textdomain' ),
               'is_default'   => true,
               'inline_style' => '.wp-block-quote.is-style-blue-quote { color: blue; }',
           )
       );
   }

   For more information, see the Developer Handbook.

   • the inline_style should not prepend the class with “is-style-“

     Feast Design Co. 1 year ago