Default class on Gutenberg lists

  • Hi!

    I am a web designer, and I love to customize lists style to match de brand.

    But the thing is, If I try to add some css code to customize the .type-post li style, it affects to any “li”. And some other blocks or embebeded code use “li” too, even when they aren’t lists. Like the default social links block.

    So it is needed to check everytime that there aren’t any other blocks that use lists and make some exceptions or to add a class each time for the list style… And when the customer herself manages the blog it makes things difficult.

    It would be easier if the list added with a list block had a default class that we can target, as other blocks have.

    Does this makes sense?

    Thanks and best regards,

    Taisa – Raquel García Arévalo

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi Raquel!

    You can try to make your css rule more specific including wrapper classes like entry-content or post-inner, for example if you just want to modify the list items in the content of posts, add this css code to your styles:

    
.entry-content ul > li {
    color: aqua;
}

    This shouldn’t affect other elements like navigation items. Let me know if this helps you.

    But I mean other elements like other blocks into the post/entry content (like social icons) or embeded code into a blog post, like the calculator I mentioned before.

    Researching more about your specific question, turns out there is an exact example in the documentation of how to add your own custom default CSS class name to any core block type, see Extending the Block Editor. You’ll need to add some JavaScript code (you can start here) to modify the Gutenberd editor behavior, just change the 'core/quote' by 'core/list' to target lists blocks.

    I don’t know which calculator you mean, sorry. Please let me know if this works for you, if not maybe we can define a more specific rule for your website if you want to share it.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Default class on Gutenberg lists’ is closed to new replies.