Create Style Variations for WordPress Gutenberg Blocks: Part 2

In the previous post we learned all about block style variations and how they’re used in the brand new WordPress 5.0 editor to switch between predefined styles easily.

We’ll take things a little further in this post by providing more examples to give you a solid base for implementing block style variations in your own projects. Specifically, we’ll create our own block from scratch to demonstrate how to add multiple style variations directly in the block definition itself. I’ll also show you how to set which block style is used as the default is also covered.

Then we’ll look at extending our block by adding further block style variations (BSVs for short) via a separate plugin. You’d typically want to do this if you needed to extend block styles but didn’t have access to the block’s source code.

The same approach will be used again but this time via a child theme. You might want to do this to provide extra style variations for core blocks to match your own theme styles.

Just as important as registering new styles is how to unregister them too. And there’s a dedicated function we’ll use for doing just this.

All the code for this tutorial is available for download our GitHub repo to the right, so you don’t have to type in the code manually if you just want to follow along.

Registering a BSV Inside a Block

If you have access to a block’s source code then you can manage block style variations directly inside registerBlockType(). Let’s take a closer look.

Firstly, we’ll need to spin up a new block. It doesn’t really matter what the block does as we just need something to add our custom block style variations too. Probably the easiest way to do this is to use the create-guten-block utility which creates a new plugin and adds a sample block ready for customization. And it does this all from a single terminal command!

If you’ve not used this handy utility before then you can take a look at the project repository for more information. Also, here’s a dedicated tutorial to get you up to speed if required.

Inside your local WordPress plugin folder open a command line window and enter:

I’ve used bsv-plugin here for the name but you can use anything you like. After a couple of minutes when installation is complete enter:

We can now edit the source code for our newly created block and create-guten-block will automatically compile the source code for us after every change. Nice.

Go ahead and activate the plugin inside the WordPress admin and add an instance of your new block to the editor by creating a new page or editing an existing one.

Block created with create-guten-block

Remove Editor-Only Styles

Before we go any further though we just need to alter the way CSS is enqueued by default.

The custom block create-guten-block just created for us includes two style sheets. One is enqueued on the editor and the other is enqueued on the editor and frontend. We don’t need the editor-only styles for this tutorial so in .bsv-pluginsrcinit.php comment out or delete the call to wp_enqueue_style() in bsv_plugin_cgb_editor_assets().

Staying in init.php for a moment we also need to comment out the dependency array for wp_enqueue_style() in bsv_plugin_cgb_block_assets() as for some reason this currently prevents the styles from being enqueued properly. I’m using create-guten-block v1.11.0 in this tutorial so you may or may not have the same issue depending on the version you’re using.

The bsv_plugin_cgb_block_assets() function should now look like this:

Now when you load the page you’ll see the block styles that are applied in the editor and on the front end which is what we want.

Block styles enqueued on frontend and backend

Register Block Style Variations

We’re all set up now to add in our custom CSS which we’ll do shorty. First though we need to register our block style variations.

Open up .bsv-pluginsrcblockblock.js and add the following to the registerBlockType functions configuration object (e.g. directly beneath the keywords property will do here).

This registers three new style variations for our custom block. Notice how the block style variation named style1 has the isDefault property set to true. This simply selects the Style 1 block style variation when you open the block options in the editor. It doesn’t actually set any CSS classes for the block as you might think.

This was a bit of a sticking point for me when I first started working with block style variations and was a source of much confusion. Hopefully in the future the isDefault property will also trigger the CSS class to be added to the block’s wrapper which I think is more intuitive.

Refresh the editor page and open the style variation options by clicking the icon to the top left of the block to see the three block style variations we just defined.

Our three new block style variations

Notice how the Style 1 block style variation is selected by default which is the one we specified in the styles property above. Selecting any one of the three block style variations results in different CSS classes being added to the block’s wrapper. For example selecting the Style 2 adds the is-style-style2 class.

Block style variation CSS class added to markup

Nothing currently happens when each block style variation is selected so let’s add some basic styles to fix this. In .bsv-pluginsrcblockstyle.scss add the following after the existing styles:

Only custom styles for Style 2 and Style 3 block style variations are being added here so that the default block styles are still applied even when no block style variation is specifically clicked.

Our block styles added

As you can see our block style variations are now available with the styles applied. I really like the way that you can see a preview of each style variation as you hover it, and without having to select it first too!

Registering a BSV Via a Plugin

If you want to add style variations to a block that you don’t have source code access for, then you can use registerBlockStyle(). This function enables you to define additional style variations for core blocks and 3rd party blocks, outside of registerBlockType().

Let’s test this out by adding a couple of our own style variations to the core button block. This block comes with three style variations already defined: Rounded, Outline, and Squared.

Default block style variations for the button block

We’ll add two further style variations of our own: Pill Shaped, and Uppercase.

Before we do that though we need a plugin to store our custom code in. I won’t be covering this in depth as the focus of this tutorial is block style variations rather than plugin development. If you’re having any issues following along then you can just download the finished plugin via the GitHub link to the right.

Create a new bsv folder inside your local WordPress .wp-contentplugins folder and add three files:

  • bsv.php
  • bsv.js
  • bsv.css

In bsv.php add the following code:

Powered by WPeMatico

Leave a Comment

Scroll to Top