Support » Plugin: Gutenberg » wp-block class

  • Thomas Villain

    (@anybodesign)


    Hello,

    I noticed that almost every block has a “wp-block-” class. This is very handy for styling blocks. But unfortunatly, this class is not present for all blocks.
    For example, no wp-block class for paragraphs, lists, short codes and titles…
    I would be great to have this class for all the blocks, so css code would be easier to maintain.
    Thanks.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator Marius L. J.

    (@clorith)

    Hi,

    I’m not entirely sure what we’ll end up with here, as paragraphs and lists aren’t technically “blocks” in the same way as others are, they have proper semantic HTML tags of their own. But there is a ticket for it at https://github.com/WordPress/gutenberg/issues/5292 which you can follow along and see where we end up in that discussion.

    Thomas Villain

    (@anybodesign)

    Hi,
    I agree that <p class="wp-block-paragraph"> seems weird, but as the entire Gutenberg UI is based on adding blocks, it would seem more logical to me to extend the class to all the blocks.
    Thanks for the link I will check it out 🙂

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    Realistically, you could target those blocks with something as simple as .entry-content p so I’m not sure they need a specialized class for them. But maybe I’m wrong. Why do you need to target those specifically instead of just, say, all P blocks in the post content?

    Thomas Villain

    (@anybodesign)

    Hi,
    I know I can, I even did a .entry-content > * but it’s better to target a specific class in CSS, and sometimes to avoid the cascade, or even worse, the * selector…
    In a builder, the basic rule is to add the same class to every block… In Gutenberg I don’t understand why some blocks have a class and some others don’t… It’s not logical.
    It could be useful to style P blocks in a different way than P in a footer widget for example.
    Anyway, just for centering blocks and letting fullwidth objects occupy the entire width, every block should have a class. Using .entry-content > * is not the right way to write CSS code.

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    You don’t need to use * if you want to target P blocks, and .entry-content p will only target the P blocks inside the post (inside .entry-content), not those in the footer.

    There’s nothing wrong with additional classes, but adding classes that are more or less completely described by existing structures doesn’t make much sense to me.

    Thomas Villain

    (@anybodesign)

    Sorry but my point was not to target only P tags but all Gutenberg blocks.
    Paragraphs, lists, shortcode, titles… they do not have the wp-block- class. Even if it does not make sense to add a class to a paragraph, I think in this builder/blocks context it would be useful and logical to add a class to every block.

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    I do understand, but at the same time, Gutenberg is basically just an HTML editor. It’s making HTML. So, I don’t see the need for Gut produced P blocks to be any different than P blocks made by any other editor. Am I missing a trick?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘wp-block class’ is closed to new replies.