In this guide I have written about how to add block styles using client side rendering. You may be interested in the new quick guide for server side rendering, which is available in WordPress version 5.3 and newer, and contains a lot less code and fewer steps.
In the first example, we only included one custom block style. Adding more styles is straightforward, so lets look at some examples and minor optimization tips.
Adding more than one style to the JavaScript file
We can combine several style options into one JavaScript file as illustrated in the example below:
wp.blocks.registerBlockStyle('core/image', {
name: 'slug-filter-grayscale', label: wp.i18n.__('Filter: Grayscale', 'text-domain')
});
wp.blocks.registerBlockStyle('core/image', {
name: 'slug-filter-sepia', label: wp.i18n.__('Filter: Sepia', 'text-domain')
});We are using wp.blocks.registerBlockStyle separately for each option.
Then we are telling the script which block we want to use: ‘core/image’. Finally we are giving the option a name and a translatable label.
Adding more than one style to the CSS file
Adding additional CSS is even simpler:
.is-style-slug-filter-sepia img {
filter: sepia(100%);
}
.is-style-slug-filter-grayscale img {
filter: grayscale(100%);
}Remember to use the correct selector. In this example we have the is-style-, then the name of the option and img, since we are adding a filter to the image block.
Optimizing the PHP functions
First, we want to check if the theme already uses the hooks ‘enqueue_block_editor_assets’ and / or ‘enqueue_block_assets’. If they are already used, we want to extend the functions and add our code to them, instead of using the hooks twice.
To illustrate this with an example, the theme Twenty Nineteen uses the following code to add extra styles:
/**
* Enqueue supplemental block editor styles.
*/
function twentynineteen_editor_customizer_styles() {
wp_enqueue_style( 'twentynineteen-editor-customizer-styles', get_theme_file_uri( '/style-editor-customizer.css' ), false, '1.1', 'all' );
if ( 'custom' === get_theme_mod( 'primary_color' ) ) {
// Include color patterns.
require_once get_parent_theme_file_path( '/inc/color-patterns.php' );
wp_add_inline_style( 'twentynineteen-editor-customizer-styles', twentynineteen_custom_colors_css() );
}
}
add_action( 'enqueue_block_editor_assets', 'twentynineteen_editor_customizer_styles' );What we want to do is enqueue our JavaScript file (block-style.js) inside the function twentynineteen_editor_customizer_styles(). This will save us the effort of creating our own function. 🙂
/**
* Enqueue supplemental block editor styles.
*/
function twentynineteen_editor_customizer_styles() {
wp_enqueue_style( 'twentynineteen-editor-customizer-styles', get_theme_file_uri( '/style-editor-customizer.css' ), false, '1.1', 'all' );
if ( 'custom' === get_theme_mod( 'primary_color' ) ) {
// Include color patterns.
require_once get_parent_theme_file_path( '/inc/color-patterns.php' );
wp_add_inline_style( 'twentynineteen-editor-customizer-styles', twentynineteen_custom_colors_css() );
}
wp_enqueue_script( 'slug-block-styles-script', get_theme_file_uri( '/js/block-styles.js' ), array( 'wp-blocks', 'wp-i18n' ) );
wp_set_script_translations( 'slug-block-styles-script', 'text-domain' );
}
add_action( 'enqueue_block_editor_assets', 'twentynineteen_editor_customizer_styles' );To recap, we are:
- Adding the block-styles.js which adds the style options to the WordPress editor.
- Adding an array of existing block editor scripts that we need to include for our code to work:
wp-blocks, for the block itself, and wp-il8n, for the translation function. - Enabling the translations with wp_set_script_translations, the script name, and the text domain.
There is more than one way to add the styles
We still need to add our custom CSS, and there is more than one way to do this.
- You can enqueue your CSS file (which only contains the custom block styles) with the ‘enqueue_block_assets’ hook, as we did in the previous example.
- If your theme is already using ‘enqueue_block_editor_assets’ to include styles for the editor, you have the option to add your CSS to your themes existing .css files. This means that you have to add the styles twice: Once in the file that is used for the editor, and once for the front end.
Which option to choose depends on the size of the CSS. In this example we are only adding two styles, so the second option might be better since we are avoiding the additional http request. But if the file is larger, -or if you really don’t want to have to repeat yourself, the first option might be better.
