Gutenberg: Add class to <ul> in List block.

[pagelab]

Is your feature request related to a problem? Please describe.

The subject of adding classes to default blocks was discussed at #6639, and I know you can filter the List block to add a new class, but the wp-block-list class should be present by default.

Without a specific class, any style applied to the generic <ul> will inadvertently affect elements from third-party plugins or custom HTML added elsewhere, and we can't know beforehand if they will be affected.

One practical example happens when you try, for instance, to style the List block in a theme to add new bullets and you are also using the Elementor plugin.

Without a class, the generic .ul style will affect <li> elements used by Elementor in their control handles – unless you explicitly filter the class or resort to a convoluted solution as ul:not(.elementor-editor-element-settings):not(.wp-block-gallery):not(.wp-block-categories):not(.wp-block-latest-posts)... and so on.

This will surely happen with lots of other plugins that use the <ul> tag for tasks like this.

Image 1: Custom style added to <ul> tag.

Image 2: Custom style affecting a third-party plugin.

Describe the solution you'd like
Just add the wp-block-list class to the <ul> tag by default, in the List block.

Describe alternatives you've considered

• Filter the List block to add a new class
• Add multiple :not() to the generic .ul style to target only the List block.

Tested with 5.0-RC1-43946

[swissspidy]

Note that using non-specific selectors like ul is a bad idea in general. I'm sure you could use something like .content-area ul in your theme.

[pagelab]

@swissspidy That was just an example.

The problem would persist if you utilize .content-area ul – or other more specific selector.

The only way to solve the issue is to add a class to the <ul> tag itself.

[designsimply]

I _think_ that the reason for avoiding adding classnames for everything by default is that not every theme would need them by default and so filtering in the cases where it makes sense is the preferred method when possible. Adding the Needs Design Feedback label to get a check on that assumption and to pull in feedback from the core design team.

[MichaelCampanella]

I'm in favor of unordered lists having a class attached, especially with other blocks like the gallery block using the ul tag.

[saltnpixels]

I am in favor of the ul block have some sort of class. Without it I cannot target those blocks easily.
I already made an issue once before and showed how the blocks could use a class or even a wrapper to stop from major issues in themes, especially ones where there is a sidebar or where pre and code are used without a wrapper...
:/ sadly it seems classes and div wrappers are not being added to the basic blocks.

[swissspidy]

sadly it seems classes and div wrappers are not being added to the basic blocks.

Adding div wrappers around every block by default would be quite a backward compatibility break.

[saltnpixels]

Adding div wrappers around every block by default would be quite a backward compatibility break.

How so? Backwards to what? Gutenberg hasn't been officially released yet has it?
And I doubt it would break anything except floats, which have their own issues.

I am currently dealing with the issue that p tags made by Gutenberg should have a margin bottom, while in other areas it should not. There is no way to target the Gutenberg ones.

[MichaelCampanella]

I kept having styles from my unordered lists fall onto the gallery block so I resorted to styling my unordered lists by appending :not([class]) to them. Which feels very hacky.

[cecoates]

A user emailed in:

1961093-zen

reporting that the gallery block on their site seems to be inheriting the margins for the theme itself.

That sounds very similar to what you're describing here. Would giving the block its own class allow things like "resetting" ul/li margins?

See also:

https://github.com/Automattic/themes/issues/735
https://github.com/Automattic/themes/issues/447
https://github.com/Automattic/themes/issues/596

[Fcog]

Please add a class to the ul and li tags. I need them to style the default gutenberg list style. I can't use the parent class because the custom blocks ul and li will be styled.

[onetrev]

I very much agree wp-block-list should be included by default for <ul> and <ol> items. But the good news is for any developer you can at least easily add the class using the code found here.

[aduth]

Without a specific class, any style applied to the generic <ul> will inadvertently affect elements from third-party plugins or custom HTML added elsewhere, and we can't know beforehand if they will be affected.

[...]

Without a class, the generic .ul style will affect <li> elements used by Elementor in their control handles – unless you explicitly filter the class or resort to a convoluted solution as ul:not(.elementor-editor-element-settings):not(.wp-block-gallery):not(.wp-block-categories):not(.wp-block-latest-posts)... and so on.

If I understand correctly: This is not inadvertent, the default list block intentionally absorbs generic ul styling (either explicit or browser-default). A list block should expect to be styled the same as any other standard list on the page, and vice-versa. The block implementation shouldn't be optimized on the assumption of a CSS reset (lists stripped of their default styling), but instead that the onus is on a custom variation of a list to unset its own default styling, or choose a more appropriate HTML tag which does not carry the same styling implications.

[pagelab]

But the good news is for any developer you can at least easily add the class using the code found here.

Unfortunately, this is not a solution because it brings a bigger problem. If you add a class to the List block like this on the frontend (via enqueue_block_assets), you will also add many JS files from the editor.

[pagelab]

(...) that the onus is on a custom variation of a list to unset its own default styling,

This would only work if we could control the whole codebase, which is obviously not the case.

A custom style created by any theme (or plugin), can't know beforehand if a certain property is applied to the default tag. So the onus can't be on it.

(...) or choose a more appropriate HTML tag which does not carry the same styling implications.

If you have a list of things you should use the semantic tag on it. We should not resort to this kind of change just to avoid problems with styles.

Both <ul> and <ol> are particular cases, because they are commonly used for lots of things besides displaying a simple list of text items, so this block should be treated differently.

[strarsis]

@MichaelCampanella: Also, using :not([class]) can cause new issues, as when a typographically used list gets additional classes assigned, e.g. for color or font-size, or a block style class that should just extend a small aspect of it on top of the base styles.

Maybe add typographic class to all blocks that are used in a typographical context, semantically, navigation and normal lists are the same, but not in their purpose.

[mtias]

Seems we should add standard block classes to a few of the elements we have left without.