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

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:

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.