Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Create Style Variations for WordPress Gutenberg Blocks: Part 2

by
Difficulty:IntermediateLength:LongLanguages:

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.

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.

We'll use the same approach 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. And there's a dedicated function we'll use for doing just this.

All the code for this tutorial is available for download from 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 to. 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 front end. We don't need the editor-only styles for this tutorial, so in .\bsv-plugin\src\init.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 our custom CSS, which we'll do shortly. First, though, we need to register our block style variations.

Open up .\bsv-plugin\src\block\block.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 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-plugin\src\block\style.scss, add the following after the existing styles:

We're only adding custom styles for the Style 2 and Style 3 block style variations 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 third-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-content\plugins folder and add three files:

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

In bsv.php, add the following code:

In bsv.js, add the front-end code:

And in bsv.css, add the styles themselves:

Activate the plugin and insert a new instance of the button block in the editor. You should now see the two new block style variations available!

Two new block style variations added

Understanding the BSV Plugin Code

Let's review what we've just done. In bsv.php, the JavaScript file was enqueued via the enqueue_block_editor_assets hook so it loads only on the admin editor. However, we want the CSS to load on the editor and front-end, so we use the enqueue_block_assets hook for this.

The styles are pretty self-explanatory, but notice how we've targeted block instances with specific block style variation classes. This gives us a clean way to separate out our CSS for different block style variations.

The important thing to take notice of here are the two registerBlockStyle() calls. This function lives in the global wp.blocks object, so we need to explicitly include the prefix wherever that function is used.

registerBlockStyle() takes two arguments. The first is the name of the block you want to add the style variation to, and the second is a configuration object. This is exactly the same object we came across earlier when we added block style variations directly to a block definition via the styles property.

One thing to note here, though, is that if you add isDefault: true for a block style variation via registerBlockStyle(), it will be ignored if a default style variation has already been set. Just something to watch out for if (like me) you were expecting it to override the default style variation.

According to the documentation, you can also unregister a block style variation with unregisterBlockStyle(). Usage is very similar to registerBlockStyle(), but you only need to specify the block name and style variation name.

So, for example, to unregister the Outline style variation from the button block, you can use:

However, there seems to be a bit of an issue with this right now. It works if you enter the above line of code in the console window, but it doesn't always appear to work when used from a plugin. Hopefully these issues will be addressed soon.

Registering a BSV via a Theme

For our final example, let's add another style variation to the core button block to add an option to render buttons with a gradient background color rather than just a flat color.

We'll implement this new style variation via a child theme this time as I think it will be a common use case to provide alternative styles for blocks that match your own theme. (The theme is also included in the downloadable file for this tutorial if you don't want to create it manually.)

I'm using Twenty Nineteen as the parent theme as it's included with WordPress 5.0, but you can base it on any parent theme you want.

Create a new twentynineteen-child folder inside your local WordPress .\wp-content\themes folder and add four files:

  • style.css
  • functions.php
  • tnc_bsv.js
  • tnc_bsv.css

We won't be adding any specific child theme styles to style.css, but we need to include it so the theme is recognized by WordPress.

In style.css, add:

The JavaScript and CSS files are enqueued via functions.php, so add the following code to this file:

In tnc_bsv.js, add the code to register our block style variation:

Finally, the CSS for our block style variation is added to tnc_bsv.css:

The code is pretty much the same as the plugin we created in the last example to add two new block style variations. All we're doing here is adding another one, but via a child theme this time.

Activate the theme and then add a button block to the editor to see our new creation.

New block style variation added via a child theme

You may have noticed that I've wrapped the JavaScript code inside a jQuery statement:

This isn't actually strictly necessary. During testing, the code seemed to work fine without the jQuery wrapper. However, there aren't any official guidelines as yet on how to add JavaScript code that interacts with the new editor API. In the meantime, it might be advisable to keep using the jQuery wrapper method above, but the choice is up to you.

Download the Code

As already mentioned, the code is available to download via the GitHub link to the right of the page.

This repo contains the theme and two plugins we developed in this tutorial. When you've downloaded the contents, you'll see three folders. Add the twentynineteen-child folder to your .\wp-content\themes theme folder and the other two plugin folders to your .\wp-content\plugins plugin folder.

Activate both plugins and the theme to make the block style variations available in the new WordPress editor.

Conclusion

Thanks for joining me in this tutorial! I hope you've now got more of an idea what block style variations are all about. Let me know in the comments what ideas you might have for using them in your own projects.

I'm sure this is going to be a heavily used feature of the new editor by plugin developers and theme developers alike. In particular for theme developers it gives you a lot of scope for customizing block styles to match your theme styles.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.