Add missing wp-block classes to all Gutenberg blocks

[dennisheiden]

What problem does this address?

Gutenberg blocks are parsed with classes likes this:
<div class="wp-block-columns">...</div>

Those classes are a good starting point to provide CSS style through themes etc.

Some blocks don't get those classes like the list block:
<ul><li>...</li></ul> (same for OLs etc.)

This makes it harder to style those blocks without accidently overwriting other stuff, like
accordion plugins which parse their stuff sometimes as an UL-list etc.

What is your proposed solution?

Add wp-block-classes to all Gutenberg blocks to have consistent block output markup:
<ul class="wp-block-list"><li class="wp-block-list-item"></li></ul>

[aristath]

If an accordion plugin styles all ul & li items indiscriminately, then that's a bad plugin.
Things like <p>, <ul> etc don't necessarily need classes. The theme is expected to provide styles for default HTML elements like these, and then if a plugin needs to style its own elements then it should be using classes to differentiate them from "generic" elements.

[dennisheiden]

Ok, bad example. Let's try this:

We have created a theme that allows to style Gutenberg blocks via simple backend settings.

Those settings are only valid for the content body / article and not for stuff like in the header, footer etc.

We have to generate CSS rules in this way:

.my-content-wrapper ul

instead of

.my-content-wrapper .wp-block-list

like it's done on group blocks for example.

If you have other blocks like an accordion which generates markup like this:

<ul class="accordion-wrapper">
<li class="accordion-item">..</li>
</ul>

... you are gonna have mixed up CSS styles applied to this list.
Just take padding. If we set padding for normal ULs like padding-left:20px; we possibly gonna apply padding styles to the accordion (if the accordion doesn't have a padding style) too.

You are right, if a plugin creates HTML markup with classes and provides CSS for that, everything is fine. But if not, we have to write extra code just to remove any theme style from the plugin elements by hand. This problem scales if you have multiple plugins which all provide some kind of UL-list output. (This is just an theoretical example.)

Adding wp-block-* classes to all BLOCK-based elements would provide a simple solution to this. In the end, it's still a Gutenberg block and gets Gutenberg classes like "has-background" applied to it, so why not just add wp-block-list to it?

I understand your argument for the default HTML elements without a wrapper container and I don't think we need wp-block-* classes necessarily for headings or paragraphs. But I think at least lists could benefit from this, because they are used for more than just simple text list output by many plugins and even WordPress itself. (menus)

[aristath]

Closing as duplicate of #6639. There is a discussion there including the reason why these have not been added 👍