Registering Block Styles in TT2 Child theme

[tinjure20]

Description I have been playing with TT2 child themes with an aim to customize one of the TT2 child themes example and use in my personal project site.

One of the thing I am trying to do is register block styles in TT2 child theme to style some blocks differently via TT2 child style.css. Following TT1 Blocks, I was able to register block styles in TT2 theme and style via its style.css (see screenshot below).

However, it failed to register the similar block style in TT2-swiss child using the same codes (see below).

if ( function_exists( 'register_block_style' ) ) {

    function twenty_twenty_two_register_block_styles() {
        // Separator: Thick.
        register_block_style(
            'core/separator',
            array(
                'name'  => 'tt2-wide-thick',
                'label' => esc_html__( 'Wide Thick', 'twentytwentytwo' ),
            )
        );
    }
    add_action( 'init', 'twenty_twenty_two_register_block_styles' );
}

In TT2-swiss I created /inc folder and copied the same block-styles.php from TT2 and appended require statement in TT2-swiss functions.php file. I was wondering whether this was related to my local environment and it can be reproduced by others.

A request to @kjellr: an example of registering block-syle.php and styling via child style.css would greatly benefit for beginners to try and personalize TT2 child themes.

[tinjure20]

After reviewing code examples from Automattic Blockbase and its child themes (Quadrant, Geologist, ..) I realized that I had to use get_stylesheet_directory() instead of get_template_directory() in my TT2-swiss functions.php require statement. That seem to correct the problem. I have not yet fully tested using child theme style.css for block styling but hopefully should work!

I thought to share my solution for the benefit of others.

[scruffian]

Adding block styles via the theme is not considered best practice - particularly because users will lose that style when they switch themes. It might be better to suggest these as block styles in Gutenberg.

[tinjure20]

Thanks. Just for clarification, in this particular example, I was adding codes directly in TT2 theme for TESTING PURPOSE ONLY because the theme does not include registered block-styles.

[scruffian]

Ah I see, makes sense :)