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.
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.
A custom block style is a style change that is applied to a WordPress block to make it look different from the default styles.
The difference between a custom block style and a custom block is that the custom style is added to existing blocks, while custom blocks are new blocks. It is usually simpler to create custom styles than entire blocks.
The custom block style can then be selected in the WordPress editor:
How a custom style is added
If you want to know more, you can continue with these two guides:
Here we are using a selector which is a CSS class that is common for editor blocks: is-style. We are combining it with the name we choose earlier, and targeting the element that we want to style.
In this example, we are hiding the fig caption with display: none. This is a simple example, and other styles may include many more lines and be more complex.
The reason why we can not simply include the styles in our main CSS file, is that we want to use the styles both in the editor and on the front. Our themes main stylesheet, style.css is only loaded on the front (and in the customizer).
Open your child themes functions.php file. We are now going to make sure that the files we just created are included correctly. Copy and paste the following code, and don’t forget to change your slug and your text domain: