While page builder plugins like Elementor and Divi Builder are around to make it easier for you to create pages on your WordPress website, you may want to use Gutenberg instead. That’s nice as many WordPress users also do the same.
The problem is that the built-in styling options offered by Gutenberg are extremely limited. But if you have CSS knowledge, the limitation is not a problem at all. You can use your knowledge to add custom CSS to Gutenberg blocks so that you can achieve any style you want. If you are new to Gutenberg — or WordPress — this post will show you how to add custom CSS in Gutenberg.
Adding Custom CSS in Gutenberg
As you know, Gutenberg comes with tens of built-in blocks. Each block has a class name. You can use the class name to target the associated block on your CSS code.
The problem is, if you use the built-in block class name on your CSS code, the code will affect all blocks that have the same class name. For instance, if you use the class name of wp-block-heading — which is the class name of the Heading block, all Heading blocks on your website will be affected by the CSS code you made.
To apply CSS code snippet to a specific block, you can define your own class name and then add it to a specific block you want the code snippet to be applied to. Take a look the following snippet:
.gradient-headline{
background-image: linear-gradient(to left, #feac5e, #c779d0,#4bc0c8);
-webkit-background-clip: text;
display: inline-block;
-webkit-text-fill-color: #00000000;
}
As you can see, the above CSS snippet has the class name of gradient-headline. The snippet itself will create a gradient effect to a text.
To add the class name, first add a block in Gutenberg (e.g., the Heading block). Once the block is added, go to the Block tab on the settings panel and open the Advanced setting section. Paste the class name to the ADDITIONAL CSS CLASS(ES) field. You can add multiple CSS classes by separating them with spaces.
Gutenberg can’t preview the changes you made via custom CSS on the editor. You need to preview your page to view the changes.
Where to Add Your CSS Code
The next question is, where you can add your CSS code snippet?
You can add your CSS code snippet to the Additional CSS field on Theme Customizer. On your WordPress dashboard, go to Appearance -> Customize. On the Theme Customizer screen, simply click Additional CSS.
The CSS editor will open after you click Additional CSS above. You can add your CSS code here. Don’t forget to click the Publish button every time you are done adding new code.
Enabling Theme Customizer on Block Theme
If you use a block theme on your WordPress website, you may need to enable Theme Customizer first before you can add your CSS code snippet.
To enable Theme Customizer on block theme, go to Tools -> Theme File Editor on your WordPress dashboard. Select the functions.php file to edit it.
Add the following line to the functions.php file content.
add_action( 'customize_register', '__return_true' );
If you haven’t edited the functions.php file before, you can simply add the above line right after the last line of the functions.php file. Make sure to click the Update File button to apply the change.
The Bottom Line
Gutenberg, the default WordPress editor, is not just a content creation tool to create blog posts. You can also use it to create the core pages of your WordPress website just like page builders. To overcome its limited built-in styling options, you can add custom CSS via Theme Customizer.
In Gutenberg, each block has a unique class name. Using the built-in block class name on your CSS code will make code affect all blocks with the same class name. If you want to apply the code to a specific block, you can define your own class name and add it — the class name — to the block you want to apply the custom CSS to.
