How do I make sure the gutenberg block CSS is not disrupted by generic styles?

admin管理员组

文章数量:1421762

I am working with a pre-existing theme. On the site in question, the style sets rules for P tags. These rules are applied in preference to the class styles for P tags used in certain blocks. (With the result that covers, for example, look quite silly). How can I fix this?

I am working with a pre-existing theme. On the site in question, the style sets rules for P tags. These rules are applied in preference to the class styles for P tags used in certain blocks. (With the result that covers, for example, look quite silly). How can I fix this?

• block-editor
• css

Share Improve this question asked Jul 6, 2019 at 19:13 Matthew Brown aka Lord MattMatthew Brown aka Lord Matt 1,06833 gold badges1313 silver badges3434 bronze badges 4

• What do you mean covers? can you share your URL so we can see what is "silly" and what should you do. – Castiblanco Commented Jul 7, 2019 at 2:00
• Covers are a built-in block type. By silly, I mean that style.css defines p as something like 12pt which makes .has_huge_font_size overridden. – Matthew Brown aka Lord Matt Commented Jul 7, 2019 at 6:59
• 1 There's nothing special about Gutenberg here, your CSS just needs to use Specificity appropriately. – Jacob Peattie Commented Jul 11, 2019 at 12:29
• Is there some way I can restate the block CSS, queue it last, or make it all !important? The theme is nice but it does not play well with the new block approached. – Matthew Brown aka Lord Matt Commented Aug 4, 2019 at 1:17

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Many of the default blocks add a class wp-block-[name] to the block's root element on save. You could use these to increase your class specificity.

For your example of covers, .wp-block-cover .has-huge-font-size or .wp-block-cover p.has-huge-font-size depending on how much specificity you need.

本文标签： How do I make sure the gutenberg block CSS is not disrupted by generic styles