Last updated on

Each block that you use in the Gutenberg editor can have additional CSS classes defined via the block properties. The following tutorial will show you how to find the option to add additional CSS classes using the Gutenberg editor.

Note that the Gutenberg editor has been integrated directly into the WordPress Administrator dashboard as of WordPress version 5.0. It is now the default WordPress editor.

Looking for an alternative to the Gutenberg Editor? Try our WordPress Page Builder that uses a different approach to WordPress Blocks to help build your website with ease! Otherwise, here are the steps needed to continue this tutorial using WordPress with the current WordPress Editor:

 

  1. Login to your WordPress Administrator Dashboard.
  2. Open an existing page or post, or create a new page or post as needed.
  3. Click on the Block that you wish to modify.
  4. Add Additional CSS to a Block using Gutenberg block optionsIn the column at right click on the label Block. If you don’t see the column, click on the gear icon in order to make the column appear.
  5. Scroll down until you see Advanced and then click on the drop-down arrow. You will then see the field labeled Additional CSS Class.
  6. Enter your CSS class here.
  7. Click on Update or Publish in order to save your entries.

The use of Additional CSS classes can help to modify the look of the blocks used in Gutenberg, giving you endless options for additional creativity within your WordPress website. You should now have a grasp of how to add additional CSS to a Block using Gutenberg. For more information on using CSS in WordPress, please see the official WordPress Codex entries for CSS and recommended resources.

Congratulations! You now know how to add additional CSS classes to a WordPress Block.

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

2 thoughts on “How to Add Additional CSS Classes to a Block using the Gutenberg Editor

    • Hi Paul,
      Thanks for the feedback. This step should have read, “Enter your CSS Class here.” Adding a custom class to a block will let you use CSS in your Theme’s stylesheet.css or your theme’s Custom CSS control. Here’s a video showing how you might use Custom CSS in a BoldGrid Theme:

Leave a Reply

Your email address will not be published. Required fields are marked *