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) 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.

Applies only to sites hosted on WordPress.com

These steps need Custom CSS Options enabled which is a feature of WordPress.Com Premium and Business Plans. If you haven’t already brought the WordPress.Com Premium and Business Plan, you should consider one to gain more flexibility with your WordPress.com Site/Blog.

Now go to the CSS section under Appearance > Customize Section and add the your CSS code. See a sample code below that justifies the any paragraph under the justify class.

p.justify {     
text-align: justify; 
}

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.

Advertisements

About Syed Hussaini

I am a business consultant with 15+ Years of extensive expertise in IT Services Management (ITSM), Team Management, Mentorship, Knowledge Management, and Business Operations. My involvement in a corporate environment and freelance projects, my career has thought me how to be more productive, proactive, and independent.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.