Writing Custom CSS Code For WordPress Blocks

It seems that with every WordPress version, we get more formatting options for Gutenberg blocks. Recently we got some new typography options with custom dimension settings (that seem buggy at the moment), and I can foresee it getting much more detailed in the future. However, it’ll never match the flexibility of full CSS editing, and there are times when you need that flexibility to get the layout you want.

In this tutorial, I’ll show you how to use Custom CSS for Gutenberg blocks for individual blocks and an entire class. There are two methods – the first is easier and uses a plugin, while the second requires you to write your CSS.

1. Using the “Custom CSS for Blocks” Plugin

I recently discovered this while browsing the new WordPress plugins, and it’s a convenient way to write CSS for individual blocks. The Custom CSS for Blocks plugin adds a new section to the “Block” area on the right-hand side of the WordPress dashboard. After downloading and installing it, you can see a new section called “Custom CSS” like this:

In the above screenshot, I’ve given the block a left padding of 5em, and as you can see, it applies to the entire block over multiple lines. You can use this space to change the borders, alignment, and anything else you can do with CSS. Infinite flexibility!

Extending the CSS to Cover Classes Instead of Individual Blocks

We often want the ability to apply the same CSS style to a similar set of objects. For example, if we apply a specific background color to a table’s “head” element, we want to apply the same style to all the tables in the post. Instead of writing the CSS for each table individually, we can give each table a class and apply a style to the entire class at once.

To apply a class to a WordPress block, expand the “Advanced” segment on the right-hand side, and type in the name of the class you want. Then, with the Custom CSS for Blocks plugin installed, click either “Post” or “Page” depending on the type of article, and once again expand the “Custom CSS” segment as shown here:

In the space provided, enter the CSS you want to apply to the entire post. Now for all new blocks to which you want to apply the style, just add the class to the “Advanced” section, and it’ll automatically inherit the CSS.

2. Using the “Custom HTML” Block Instead

The Custom CSS for Blocks plugin gives you an intuitive way to add CSS to your posts. But if you don’t want to install another plugin, you can use the built-in “Custom HTML” WordPress block to write your code. Here’s an example of me using the custom HTML block to insert CSS code that applies to all blocks with the class “test”:

As you can see, just enter your CSS enclosed within <style></style> tags. The disadvantage of this approach is that you don’t see the changes to your block in real time within the editor itself. However, if you preview the post, you’ll see the new appearance. I think it’s a small price to pay for the luxury of not having another plugin on your site that you need to update and keep an eye on.

Mark Custom HTML Blocks as “Reusable”

By marking your custom HTML blocks that hold CSS code as reusable, you can include them on all relevant posts and make changes to every page that holds them from a centralized location. This is an excellent way to port styles between posts instead of just applying them to a single page. It’s one of the reasons why I consider the custom HTML block one of the most flexible blocks in WordPress!