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.
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.
2 Answers
Reset to default 3Depending 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.
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
}
}
style="ul {padding-left:2em}"– Susobhan Das Commented Nov 13, 2020 at 5:21