elliott richmond

Register Custom Block Styles simplifies the process of adding block style variations by automating stylesheet registration and block style registration. Stylesheets are loaded from the active theme directory, making this ideal for theme-specific block styling.

Features

• Register multiple block styles with a single class instantiation
• Automatic CSS file loading based on style name
• Works with the Site Editor (Full Site Editing)
• Graceful degradation when theme is switched
• Debug logging for missing CSS files

Usage

Add the following to your theme’s functions.php file:

function theme_register_block_styles() {
// Check if the class exists (plugin may not be active).
if ( ! class_exists( 'Register_Custom_Block_Styles' ) ) {
return;
} $block_styles = array(
array(
'block' => 'core/button',
'name' => 'custom-button',
'label' => ( 'Custom Button', 'theme-text-domain' ), ), array( 'block' => 'core/group', 'name' => 'card-style', 'label' => ( 'Card Style', 'theme-text-domain' ),
),
); new Register_Custom_Block_Styles( $block_styles );
}
add_action( 'after_setup_theme', 'theme_register_block_styles' );

CSS File Structure

CSS files should be placed in your theme directory. By default, the plugin looks for files in /assets/css/styles/.

For the example above, create:

your-theme/assets/css/styles/custom-button.css
your-theme/assets/css/styles/card-style.css

Custom CSS Path

You can specify a custom path relative to your theme directory:

new Register_Custom_Block_Styles( $block_styles, '/css/block-styles/' );

Installation

1. Upload the register-custom-block-styles folder to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Instantiate the class in your theme’s functions.php file using the example above