What is Gutenberg Block Styles
First, let’s define what “Block Styles” means on the new WordPress block editor. Block Styles or Block Style Variations is the alternative customization or styling available for each block. Some blocks may have multiple block styles while others don’t. These styles are driven by “Custom Class(es)” under the Advanced Panel on the block inspector, so you wouldn’t have to worry if classnames were added automatically.
Adding Custom Block Styles
In this guide, I will show you how to add few Block Styles on the Image Block. The function we are going to use is
registerBlockStyle and it accepts the following parameters:
string: Unique block style name.
string: Block Style label.
boolean: add true as value if you want the block style variation to be the default block style.
Now that you know how the function works, we can start creating our custom block style variation.
After adding the necessary JS codes, you will then need to add the CSS codes for specific variation styling. registerBlockStyle will automatically add
is-style- prefix to the name parameter as unique classnames. Based on our codes above, the following classnames will be used on the CSS codes:
Then, add the following code to your style.css or child theme stylesheet.
That’s it! It’s pretty easy to create block style variations on the new WordPress block editor. With the example above, you can follow the steps to create your own on other blocks aside from Image Block. If you are already using my EditorsKit plugin, you will notice that there are a lot of Block Styles available on Image and Cover Block. They will help you a lot on your page building and you do not have to worry about coding it yourself.
This has been another post-Gutenberg tutorial, and I hope it helps you out. Make sure to subscribe and follow me on Twitter to check out my latest articles. Below is the list of my other tutorials and please do not hesitate to use the comment section to request or suggest a topic for the next one.