Using WordPress ‘register_block_style()’ PHP function

by

The register_block_style() WordPress PHP function registers a new block style for a specified block type.

Usage

register_block_style($block_name, $style_properties);

Parameters

  • $block_name (string): The block type name, including namespace.
  • $style_properties (array): An array containing the properties of the style, such as name, label, style (name of the stylesheet to be enqueued), and inline_style (string containing the CSS to be added).

More information

See WordPress Developer Resources: register_block_style()

Examples

Register a blue quote style for the quote block

In this example, we will register a new block style called “Blue Quote” for the core quote block. The block style will have a blue text color.

function my_theme_register_blue_quote_style() {
    register_block_style(
        'core/quote',
        array(
            'name' => 'blue-quote',
            'label' => __('Blue Quote', 'textdomain'),
            'inline_style' => '.wp-block-quote.is-style-blue-quote { color: blue; }',
        )
    );
}
add_action('init', 'my_theme_register_blue_quote_style');

Register a custom button style

In this example, we will register a custom button style for the core button block. The custom button style will have a red background and white text.

function my_theme_register_red_button_style() {
    register_block_style(
        'core/button',
        array(
            'name' => 'red-button',
            'label' => __('Red Button', 'textdomain'),
            'inline_style' => '.wp-block-button.is-style-red-button { background-color: red; color: white; }',
        )
    );
}
add_action('init', 'my_theme_register_red_button_style');

Register a custom paragraph style with an enqueued stylesheet

In this example, we will register a custom paragraph style for the core paragraph block. The custom style will be loaded from an enqueued stylesheet.

function my_theme_enqueue_block_editor_assets() {
    wp_enqueue_style('my-theme-paragraph-styles', get_template_directory_uri() . '/paragraph-styles.css', array(), '1.0.0');
}
add_action('enqueue_block_editor_assets', 'my_theme_enqueue_block_editor_assets');

function my_theme_register_green_paragraph_style() {
    register_block_style(
        'core/paragraph',
        array(
            'name' => 'green-paragraph',
            'label' => __('Green Paragraph', 'textdomain'),
            'style_handle' => 'my-theme-paragraph-styles',
        )
    );
}
add_action('init', 'my_theme_register_green_paragraph_style');

Register a custom heading style with a default option

In this example, we will register a custom heading style for the core heading block. The custom style will be set as the default style for the block.

function my_theme_register_default_heading_style() {
    register_block_style(
        'core/heading',
        array(
            'name' => 'default-heading',
            'label' => __('Default Heading', 'textdomain'),
            'is_default' => true,
            'inline_style' => '.wp-block-heading.is-style-default-heading { font-weight: normal; }',
        )
    );
}
add_action('init', 'my_theme_register_default_heading_style');

Register a custom image style with a border

In this example, we will register a custom image style for the core image block. The custom style will add a solid black border around the image.

function