Additional Block Styles for Child Themes

In the latest WordPress projects I worked on, I used the fantastic Ollie block theme. Both the free and the paid version, depending on the project needs.

Ollie ships with a bunch of block styles for several core blocks. These styles are packed in the assets/styles and only get loaded when the block is actually used on the page. This is done through wp_enqueue_block_style.

The way it's set up, allows you to overwrite the block style in your child theme, similar to overwriting a template file.

Overwrite a block style in a child theme

Let's say your child theme needs a different set of block styles for the button block. Simply copy the core-button.css file from the assets/styles folder in the Ollie theme to the same folder in your child theme.

Make your adjustments based on your design. Here is a quick example on how this will change the loaded inline stylesheet:

Ollie core button styles

Loaded from ollie/assets/styles/core-button.css. If you inspect your page source code, it will look like this:

<style id='ollie-block-core-button-inline-css'>
/* Button - Outline Style
--------------------------------------------- */

.wp-block-button.is-style-outline .wp-block-button__link {
	border: none;
	background-color: transparent;
	outline: 2px solid currentColor;
	outline-offset: -3.5px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: var(--wp--preset--color--main) !important;
	outline-color: var(--wp--preset--color--main);
}

</style>

Overwritten core button styles

Now with your core-button.css placed in your child theme, it will look something like this instead:

<style id='ollie-block-core-button-inline-css'>
/* Button - My Custom Styles
--------------------------------------------- */

.wp-block-button.is-style-outline .wp-block-button__link {
	border: none;
	background-color: var(--wp--preset--color--accent);
	outline: 2px solid currentColor;
	outline-offset: -3.5px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: var(--wp--preset--color--accent) !important;
	outline-color: var(--wp--preset--color--accent);
}

</style>

As you can see, Ollie is now loading your version from ollie-child/assets/styles instead. This is great when you need to customize the look.

But, what about appending your custom styles and not completely overwriting the parent theme block styling?

Add additional block styles from a child theme

To append custom block styles from the child theme and not overwrite the parent styles, add this function to your child theme functions.php file and place your styles in the assets/blocks folder (or any folder you like).

<?php

namespace OllieChild;

function enqueue_custom_child_block_styles() {

    // Scan our styles folder to locate block styles.
    $files = glob( get_stylesheet_directory() . '/assets/blocks/*.css' );

    foreach ( $files as $file ) {

        // Get the filename and core block name.
        $filename   = basename( $file, '.css' );
        $block_name = str_replace( 'core-', 'core/', $filename );

        wp_enqueue_block_style(
            $block_name,
            array(
                'handle' => "ollie-child-block-{$filename}",
                'src'    => get_theme_file_uri( "assets/blocks/{$filename}.css" ),
                'path'   => get_theme_file_path( "assets/blocks/{$filename}.css" ),
            )
        );
    }
}
add_action( 'init', __NAMESPACE__ . '\enqueue_custom_child_block_styles', 20 );

Here is what the markup can look like after you added additional core-button.css styles in your child theme:

<style id='ollie-block-core-button-inline-css'>
/* Button - Outline Style
--------------------------------------------- */

.wp-block-button.is-style-outline .wp-block-button__link {
	border: none;
	background-color: transparent;
	outline: 2px solid currentColor;
	outline-offset: -3.5px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: var(--wp--preset--color--main) !important;
	outline-color: var(--wp--preset--color--main);
}

</style>
<style id='ollie-child-block-core-button-inline-css'>
/* Button - My Custom Styles
--------------------------------------------- */
.wp-block-button.is-style-button-brand .wp-block-button__link:hover {
	background: var(--wp--preset--color--main-accent) !important;
	color: var(--wp--preset--color--main) !important;
}
</style>

Depending on your theme, you can use a similar approach and simply adapt the way block styles are loaded. Have you found a better way to append additional block styles? Please let me know in the comments below.