List Block styles are impacting several other blocks in editor and live site

[cuemarie]

Description

There have been several reports floating around trying to describe this, but more keep arising, so I'm hoping this report can help centralize the issue a bit. In short:

The List Block's default styles and added Global Styles are also applying to other blocks in both the editor and the live site. On the live site, the symptoms present when a post contains a List block, but the editor shows symptoms even without the list block present.

Step-by-step reproduction instructions

1. Activate TT3 and set the default home template
2. Open Site Editor, and create a navigation menu with a submenu included
3. Open Global Styles > Blocks > List block, and apply a custom color to the TEXT and BACKGROUND fields
4. Save changes and view the site
5. Return to the editor and add a List block to the template somewhere.
6. Save changes and view the site again.

Screenshots, screen recording, code snippet

Global Styles > Blocks > List Block > Text Color impacts blocks in editor

listblockstyles-part1-compressed.mp4

Text Color - Impacted blocks in editor:

• Post Featured Image (overlay)
• Post Excerpt

Text Color - Impacted blocks in live site:

• None

---

Adding List Block to template brings those symptoms and more to the live site

listblockstyles-part2-compressed.mp4

Text Color - Impacted blocks in editor:

• Post Featured Image (overlay)
• Post Excerpt

Text Color - Impacted blocks in live site:

• Navigation Block
• Post Excerpt

---

List block impacting the padding of the submenu (#49445)

listblockstyles-part3.mov

Padding - Impacted blocks in editor:

• None

Padding - Impacted blocks in live site:

• Navigation block (submenu)

---

Adding a Background color to Global Styles > Blocks > List Block

listblockstyles-part4.mov

BG Color - Impacted blocks in editor:

• None

BG Color - Impacted blocks in live site:

• Navigation Block

---

Removing the List block from the template removes all symptoms from live site

listblockstyles-part5.mov

Environment info

• WordPress 6.2
• Gutenberg 15.7.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[juanfra]

Thanks for sharing!

I think one is pretty much related to what's also happening with the paragraph block styles.

The list block is not using a wp-block-* class, affecting any other list present on the site. To solve this, we'll need to use a class for the list block and keep the modified styles just for that class (something similar to what I proposed in my PR for the paragraph block, or this other approach).

[jamiepalatnik]

I ran into this issue as well and ended up using custom CSS as a workaround to remove extra padding added to the Navigation block.

[donalirl]

I used the following CSS to address this, until the bug can be fixed:

/* unset padding on the navigation block */ 
.wp-block-navigation ul {
    padding: unset;
}

[simonwammerfors]

I've also run into a similar issue. In my case I've set the font-size for the navigation in theme.json. On pages with the list block present however, inline CSS belonging to that block overrides the font-size for the navigation.

[iamtakashi]

I've also run into this issue. In my case, list elements with a background colour had an unexpected style when I set paddings to the list block because of this CSS added to it. The target seems to be too broad.

ol.has-background,ul.has-background {
         padding: 1.25em 2.375em
}

Steps to reproduce this.

• Add a list block to a page/post.
• Add background colour to the list block.
• Add a navigation block and add background colour to the submenu background
• Set paddings for the List block in Global Styles
• See the page/post on the front of the site.

[iamtakashi]

Just saw another unwanted effect in the editor caused by these "too-broad" selectors from Global Styles. .editor-styles-wrapper ol, .editor-styles-wrapper ul

Once you change the horizontal padding for the list block, the post template that uses list item breaks. Notice the misalignment of the posts. They should remain unchanged by changing the padding change in the list block.

[jordesign]

Just noting that we're seeing mentions of this in the Support Forums as well.

• https://wordpress.org/support/topic/list-block-affecting-navigation-block-size/?view=all
• https://wordpress.org/support/topic/word-wrap-on-drop-down-menus/
• https://wordpress.org/support/topic/navigation-block-not-responding-consistently-in-different-posts/

[aleone89]

Another report of this here: https://wordpress.com/forums/topic/navigation-menu-appearance-varies/?view=all#post-3989938

[annezazu]

@ellatrix flagging this for you.

[ramonjd]

Is @juanfra's answer the correct one? I can't think of another way to isolate the list block from other list elements used about the place.

Unless Gutenberg stops using list elements in the post template block and others 😄

Edit I'm testing something similar to #50486 over at #54896

[adamwoodnz]

This caused issues on the Showcase site, and we worked around it by removing the background from the navigation block.

[talldan]

This issue seems to be a duplicate of the much older issue #12420. That one has a PR associated with it (#56469).

[jordesign]

Another report in the forums:
https://wordpress.org/support/topic/possible-conflict-between-list-block-and-submenu-formatting/?view=all

[annezazu]

After a review by core editor triage leads and core editor tech leads, this has been removed from the board for 6.5 consideration.

[colorful-tones]

After a review by core editor triage leads and core editor tech leads, this has been removed from the board for 6.5 consideration.

@annezazu did we forget to remove this from the board, or was there a reason we did not, and do you mind providing it please?

[annezazu]

Hah! This should have been removed. I bet I was moving too fast. Done.

[ellatrix]

Not sure what I can do here. This was introduced in #21387 by @ZebulanStanphill. @ZebulanStanphill, could we change this to use a class? I think it's not right that we're using a tag selector only.

[xtremeranger]

Now that the list has a class name (#56469) can the style.scss be edited to fix the issue mentioned in @iamtakashi comment?

EDIT: I spoke too soon, sorry. The change to lower the specificity has already been put in place.

[ellatrix]

@carolinan Was this fixed in #56469?

[carolinan]

yes, thank you for the reminder. I can confirm that this is solved. (I am using WP 6.6-RC3-58711)