• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

Writing Custom CSS Code For WordPress Blocks

Bhagwad Park

Published on: December 28, 2022

Categories: WordPress 0

It seems that with every WordPress version, we get more formatting options for Gutenberg blocks. Recently we got some new typography options with custom dimension settings (that seem buggy at the moment), and I can foresee it getting much more detailed in the future. However, it’ll never match the flexibility of full CSS editing, and there are times when you need that flexibility to get the layout you want.

In this tutorial, I’ll show you how to use Custom CSS for Gutenberg blocks for individual blocks and an entire class. There are two methods – the first is easier and uses a plugin, while the second requires you to write your CSS.

1. Using the “Custom CSS for Blocks” Plugin

I recently discovered this while browsing the new WordPress plugins, and it’s a convenient way to write CSS for individual blocks. The Custom CSS for Blocks plugin adds a new section to the “Block” area on the right-hand side of the WordPress dashboard. After downloading and installing it, you can see a new section called “Custom CSS” like this:

WordPress Block with Custom CSS
WordPress Block with Custom CSS

In the above screenshot, I’ve given the block a left padding of 5em, and as you can see, it applies to the entire block over multiple lines. You can use this space to change the borders, alignment, and anything else you can do with CSS. Infinite flexibility!

Extending the CSS to Cover Classes Instead of Individual Blocks

We often want the ability to apply the same CSS style to a similar set of objects. For example, if we apply a specific background color to a table’s “head” element, we want to apply the same style to all the tables in the post. Instead of writing the CSS for each table individually, we can give each table a class and apply a style to the entire class at once.

To apply a class to a WordPress block, expand the “Advanced” segment on the right-hand side, and type in the name of the class you want. Then, with the Custom CSS for Blocks plugin installed, click either “Post” or “Page” depending on the type of article, and once again expand the “Custom CSS” segment as shown here:

Class Wide CSS
Class Wide CSS

In the space provided, enter the CSS you want to apply to the entire post. Now for all new blocks to which you want to apply the style, just add the class to the “Advanced” section, and it’ll automatically inherit the CSS.

2. Using the “Custom HTML” Block Instead

The Custom CSS for Blocks plugin gives you an intuitive way to add CSS to your posts. But if you don’t want to install another plugin, you can use the built-in “Custom HTML” WordPress block to write your code. Here’s an example of me using the custom HTML block to insert CSS code that applies to all blocks with the class “test”:

Using a Custom HTML Block Instead
Using a Custom HTML Block Instead

As you can see, just enter your CSS enclosed within <style></style> tags. The disadvantage of this approach is that you don’t see the changes to your block in real time within the editor itself. However, if you preview the post, you’ll see the new appearance. I think it’s a small price to pay for the luxury of not having another plugin on your site that you need to update and keep an eye on.

Mark Custom HTML Blocks as “Reusable”

By marking your custom HTML blocks that hold CSS code as reusable, you can include them on all relevant posts and make changes to every page that holds them from a centralized location. This is an excellent way to port styles between posts instead of just applying them to a single page. It’s one of the reasons why I consider the custom HTML block one of the most flexible blocks in WordPress!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Leave a Reply Cancel reply

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

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

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Development
  • Website Security
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA