How to apply custom CSS to any Gutenberg Block

What if you need to apply some custom styling using CSS to your content in Gutenberg editor. There are a few ways you can apply custom CSS to any Gutenberg block. Let’s find out how to do it.

1. Via WordPress Customizer

You can simply put your custom CSS into the Additional CSS section via WordPress Customizer targeting specific CSS class applied to the Gutenberg block.

But, there is a downside to this approach. Your custom CSS does not get reflected in the Gutenberg Editor while you are editing the page or post. It only applies to the page on the front-end. So visually your editor view will not reflect the actual styling of the blocks if you apply custom CSS using this method.

2. Via Child Theme Stylesheet

Another way is to create a child theme for your Website, and put your custom CSS in the child theme’s stylesheet file. It will also not reflect the CSS in Gutenberg editor by default, but there is a workaround.

You need to enqueue the child theme CSS file in Gutenberg editor. Gutenberg allows you to hook a stylesheet to Gutenberg editor view. Read more here. Edit your child theme’s ‘functions.php’ file and put the following code.

/**
 * Registers support for editor styles & Enqueue it.
 */
function ghub_child_setup() {
	// Add support for editor styles.
	add_theme_support( 'editor-styles' );
  
	// Enqueue editor styles.
	add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'ghub_child_setup' );

Just be cautious to add the code, only do it if you know what you are doing and can handle if anything got messed. And best to utilize a child theme as suggested, do not edit a parent theme directly as you will lose changes when a theme update comes in.

The code provide will add theme support for editor styles as suggested by Gutenberg handbook and then we enqueue it inside the editor simply.

Now you will notice the custom CSS be reflected in Gutenberg editor, which is good. However, this method also has a downside, unfortunately. It can mess some of Gutenberg editor’s UI stylings. Depending on the theme you are using the mess can be worst to none. Here is a screenshot of what it messed on my test site using Astra with a custom child theme.

As you can see in the above screenshot, the custom CSS gets applied in the editor (red and blue color on the paragraph). However, the block toolbar styling gets messed, there are also some other styling conflicts as well.

Note: There may be a solution to this I am unaware of right now, if you do know please explain in comments.

3. Using a CSS extension plugin

There is, fortunately, a free plugin available in the WordPress repository called Block CSS. This plugin adds a custom CSS option to all Gutenberg blocks. A really small and handy extension for Gutenberg which lets you easily apply custom CSS code to any Gutenberg block right there while you are editing the block. And the best part is the Custom CSS applies everywhere, in Gutenberg editor as well as on the front-end. And you do not need to worry about hacking or tweaking your child theme as explained in the earlier method.

Here you can find more about this Gutenberg extension.

The Easiest way to apply custom CSS to Gutenberg blocks.

Once the Block CSS plugin has been installed. Simply edit any Gutenberg block and now you will notice a new option “Custom CSS” in the sidebar. That’s the place to write your custom CSS and it applies to the block you are editing instantly. Pretty neat huh?

If you are aware of another way to apply custom CSS to Gutenberg blocks, kindly do let me know via comments.

Gutenberg Block Library

Leave a Reply