1

The "Advanced" option to add Additional CSS Classes to a Gutenberg block looks useful. But is there any way to define a CSS class for use on that post option other than to go and add a theme-wide class?

I was expecting some way to modify the CSS on a specific block without having to convert it to an HTML block.

Example: On one post for one List block I want to set ul {padding-left:2em}. It's a one-time thing. I don't want it to apply to other List blocks anywhere else on that post or any other posts, so I don't want to go through the hassle of creating a child theme and adding that to its style.css.

4
  • Not 100% clear what you are asking here - what type of block do you want to add a specific class on? Even a simple paragraph block has the ability to set a custom CSS class. Do you want to add a class to all blocks of a specific type? Jan 10 '20 at 19:19
  • @AlexanderHolsgrove I just updated the question with an example.
    – feetwet
    Jan 10 '20 at 20:13
  • You can add CSS in the Additional CSS section of the Customiser. So add a class to the block, then the styles for that class in the Customiser. Jan 11 '20 at 3:13
  • just edit the html of the Section you want to apply - css add style="ul {padding-left:2em}" Nov 13 '20 at 5:21
3

Depending on your goal, you can add custom CSS for blocks in several ways.

Theme

Adding it "themewide" by either using a theme's Custom CSS area or creating a child theme could be used either to affect all copies of a particular type of block, or to target one type of block on just a single post. For example, each URL of a WP site should have a <body> class that specifies what type of content it is, and this gets fairly granular. Example: if there's one Page you want to target, body.page-id-# targets that page, so you can isolate your CSS to only affect that Page. This is the most common way to apply block style changes, because as you mentioned everywhere you use that class, you can update it once in the theme and it affects all those places simultaneously.

Plugin

You could also write a plugin to enqueue CSS only in the places you need it. That could vary: you could enqueue it on all Pages, or on Categories, or on a single Post, whatever you need.

Or, if your theme doesn't have a Custom CSS area, there are out-of-the-box plugins that will allow you to add your own CSS. You'd have to look into their capabilities to see whether it's possible to restrict the CSS to certain areas, or if it's like a theme change, sitewide.

Inline

Finally, you have identified the only option that would allow you to add inline CSS - using the HTML block. WP shies away from inline styles in most cases because of its modularity - typically if you change something in one place, it's convenient to have it automatically update everywhere else, which classes do. Inline styles have to be updated individually.

2
  • This is what I feared was the case. (Or rather, that block-specific "Additional CSS" gave me false hope that this was not the case ;)
    – feetwet
    Jan 10 '20 at 20:15
  • I agree with @WebElaine - if this is just for a single post and only one-time use, using an inline style, while not as elegant, makes the most sense. If you ever needed to edit the style, since it only effects that one single post, you only need to edit that one single post.
    – Trisha
    Jan 15 '20 at 17:00
0

add code in your functions.php


add_action('wp_head', 'hook_in_frontend_head');

function hook_in_frontend_head() {
$screen = get_current_screen();

if($screen->id == 'your-blog-page-id') {
?> <style> your additionl styles here</style>
<?php
}

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.