admin管理员组文章数量:1410712
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
}
}
本文标签： block editorGutenberg Additional CSS Class without modifying theme
版权声明：本文标题：block editor - Gutenberg Additional CSS Class without modifying theme? 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744843958a2628089.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
style="ul {padding-left:2em}"– Susobhan Das Commented Nov 13, 2020 at 5:21