How register block styles

sage
, ,
1

In previous projects I register block styles with PHP this way

register_block_style(
    'core/group',
    [
        'name' => 'dark',
        'label' => __('Dark', 'sage'),
    ]
);

But it doesn’t work anymore in a new Sage project. How do you do it?

2

You have to do this in an appropriate action hook (init) (and add to setup.php):

add_action('init', function () {
    if (!function_exists('register_block_style')) {
        return;
    }


    register_block_style(
        'core/group',
        [
            'name' => 'dark',
            'label' => __('Dark', 'sage'),
        ]
    );
});

The example also checks for the existence of the register_block_style method, for very old WordPress installations where Gutenberg was not available in core yet, but this is not really necessary anymore.

I am still not aware of a declarative approach for registering block styles (as in theme.json or by adding a file to specific directory), so this is currently the best practice approach.

:thinking: Maybe I should add an example for this to the Sage 10 FSE theme (GitHub - strarsis/sage10-fse: Sage 10 theme adjusted for Gutenberg Full Site Editing (FSE)).

1 Like
3

@strarsis Bud supports the file-based approach: Styles | bud.js

2 Likes
4

Well, I had not known that, great feature!

2 Likes
5

Thank you! I was unaware of that whole part of Bud’s integration with the editor.

1 Like