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.