register_block_style( string $block_name, array $style_properties )

Registers a new block style.


Parameters Parameters

$block_name

(string) (Required) Block type name including namespace.

$style_properties

(array) (Required) Array containing the properties of the style name, label, style (name of the stylesheet to be enqueued), inline_style (string containing the CSS to be added).


Top ↑

Return Return

(bool) True if the block style was registered with success and false otherwise.


Top ↑

Source Source

File: wp-includes/blocks.php

function register_block_style( $block_name, $style_properties ) {
	return WP_Block_Styles_Registry::get_instance()->register( $block_name, $style_properties );
}


Top ↑

Changelog Changelog

Changelog
Version Description
5.3.0 Introduced.

Top ↑

User Contributed Notes User Contributed Notes

  1. Skip to note 1 content

    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.

Top ↑

You must log in before being able to contribute a note or feedback.