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?

  • What do you mean covers? can you share your URL so we can see what is "silly" and what should you do. – Castiblanco Jul 7 '19 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 Jul 7 '19 at 6:59
  • 1
    There's nothing special about Gutenberg here, your CSS just needs to use Specificity appropriately. – Jacob Peattie Jul 11 '19 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 Aug 4 '19 at 1:17

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.

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.