How to Add Custom Gutenberg Block Styles

In this tutorial, I’ll show you how to add custom blocks styles with the Gutenberg block editor. I’ve recently added Image and Cover Block Styles such as circular, diagonal, rounded corners, and drop shadow to the EditorsKit plugin; and I’m very happy to share how I did it. I’ve included two ways — both ES6 and ES5 Javascript, since I’ve got a lot of requests for them in my previous tutorials. If you haven’t read those tutorials yet, I’ve added the links at the bottom of this article.

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:

• name string : Unique block style name.
• label string : Block Style label.
• isDefault 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.

The code above is using ES6 Javascript but if you are using ES5, the code below is the one for you:

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:

• is-style-circular-image
• is-style-rounded-corners

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.

Wrapping Up

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.

• Extending Gutenberg Core Blocks with Custom Attributes and Controls
• How to Create Custom Text Formats for Gutenberg Block Editor