how to add a custom css class to gutenberg blocks
how to add a custom css class to gutenberg blocks

How to add a custom CSS Class to Gutenberg Blocks?

Overview

How to add a custom CSS Class to Gutenberg Blocks under WordPress. Under this article, we will discuss simple steps that will help you to add or apply a custom CSS class to a Gutenberg Blocks under WordPress. There are significant benefits of adding or applying a custom CSS class to Gutenberg Blocks under WordPress. You will have complete control over the styling of that particular block using the CSS. To take the benefit of this approach, we need to have basic knowledge of CSS.

Solution

To add a custom CSS Class to Gutenberg Blocks, you need to select the Gutenberg block. Now, on the right side panel under the Block TAB look for Advanced section and enter the class name [Additional CSS Class(es)] here. See the image below for reference.

How to add a custom CSS Class to Gutenberg Blocks
How to add a custom CSS Class to Gutenberg Blocks

Now you can use this Custom CSS Class to handle the styling of Gutenberg block level elements under the customization options of WordPress.

See a sample code below that justifies the any paragraph under the justify class.

p.justify {     
text-align: justify; 
}

Where do we add Custom CSS Code in WordPress?

Now that we have the custom CSS code in a hand we need to know where to put this code in WordPress so that we can see the styling in action. You should now Navigate to yourwebsite.com/wp-admin to access the administration area of your WordPress website.

Now you should select the options in the following order to be able to insert the custom CSS code for your WordPress website. Navigate to yourwebsite.com/wp-admin to access the administration area and follow the steps below:

  1. Go to Appearance [see image below]
  2. Click on Customize [see image below]
How to add a custom CSS Class to Gutenberg Blocks
How to add a custom CSS Class to Gutenberg Blocks

3. Now click on CSS [see image below]

How to add a custom CSS Class to Gutenberg Blocks
How to add a custom CSS Class to Gutenberg Blocks

4. Enter the custom code in the code area [see image below]

5. Click on Publish Button to save the changes [see image below]

How to add a custom CSS Class to Gutenberg Blocks
How to add a custom CSS Class to Gutenberg Blocks

Now you should go to the front of your website and see whether the changes you have applied for styling are visible to make sure work is properly saved.

We hope you find this article useful. In case if you are unable to apply custom CSS class Gutenberg blocks under WordPress, you may add a comment or submit your question to us. If you find it useful, do share it further.

Default image
Syed Hussaini

I am a Support Specialist with 15+ Years of experience and exposure in Training, website development on WordPress, Joomla, and Google Sites, Customer Support, IT Operations, Team Management, Knowledge Management. My engagement in a corporate environment and freelance projects has taught me to be highly productive and independent.

Related Posts

3 Comments


  1. I wish there was some place that listed all (or even some basic) css class(es) that can be used. If you don’t know any css, you can’t use these fields. wordpress needs a list that basically says, “If you want to do this… copy and paste this code.” Then at least we can start to learn what options are available to us.


    • That is doable for basic elements such as Headings, Paragraph elements, etc. Most of the elements are theme-specific and have to follow the classes used in the respective themes. So, getting ready to use code blocks would be a bit of a challenge. Maybe, WP team can consider this approach for most trending themes or the themes developed by them.

%d bloggers like this: