WordPress / twentytwentyfour | Using the list block seems to affect the submenu layout negatively

[wilhelm1973]

THIS ISSUE IS RELATED TO THE 2024 THEME THAT IS NOW ARCHIVED ON GITHUB

I also submitted this issue on GitHub, but on GitHub the repository for the 2024 theme is Archived and the remaining issues are closed without any follow up or fix. I followed the link to submit a new issue. That link brought me here. So that is why I submit this issue.

---

Description of the issue

Only when I insert a list block on a page, the submenu layout is changed when that page is displayed (the menu items are suddenly centered and spread out over two lines).

I do not use ANY code or CSS to modify anything in WordPress. I am not a coder or website builder, I am just a simple WordPress user. I use the full site Editing features of the latest version of WordPress (6.4.2) with the 2024 theme (latest versions).

I changed the navigation menu -> submenu items to have a background color and left alignment (so that it would look good on a mobile phone with the mobile menu). This works great.

---

Step-by-step reproduction instructions

Change the navigation menu -> submenu items to have a background color and left alignment. Make sure your site has a menu with submenu items. View it on a desktop (so not the mobile menu)
Create a new page. Add a paragraph.
Save the page, then view it. Nothing wrong with the menu / submenu items.
Open the page, add a list block to it with one or two items.
Save the page again, then view it. Now the submenu layout is changed.

---

Expected behavior

Using the list block the submenu layout should not be affected.

---

Environment info

Device: Desktop
OS: Windows 10
Browser: Chrome
Version: Latest

---

Additional context

You can see the issue on www.gaypiemonte.com (the pages that use the list block are under the Rooms menu item. For example Rooms -> Suite Il Torchio).

Kudos for a truly amazing theme, thanks in advance for any help and sorry for any mistakes in my English, it is not my native language.

Kind regards,

Martijn

[wilhelm1973]

This is the menu layout as it should be

[wilhelm1973]

This is the menu layout when affected by using a list block on the page

[poena]

Thank you for the updated testing instructions.

This is the original issue: ​https://github.com/WordPress/twentytwentyfour/issues/746

[sabernhardt]

padding in Twenty Twenty-Two when submenu has a background color and page has a List block

[sabernhardt]

The padding issue was reported in #58071. I thought it was the same as GB36586, or close enough, but maybe this needs its own Gutenberg issue.

Anyway, this is not a bug in individual themes; it also happens with Twenty Twenty-Two. When block styles are printed separately, the ​List block styles can be placed after the Navigation styles. The ul.has-background padding has the same specificity as the .wp-block-navigation ul padding reset, so it needs to be printed earlier.

When block styles are together, the order is correct:

add_filter( 'should_load_separate_core_block_assets', '__return_false', 11 );

In your own site, however, you may prefer setting the padding to zero in Additional CSS or the Global styles:

ul.wp-block-navigation__submenu-container {
  padding: 0;
}

[wilhelm1973]

Replying to sabernhardt:

The padding issue was reported in #58071. I thought it was the same as GB36586, or close enough, but maybe this needs its own Gutenberg issue.
In your own site, however, you may prefer setting the padding to zero in Additional CSS or the Global styles:

ul.wp-block-navigation__submenu-container {
  padding: 0;
}

Your CSS fix has resolved the issue. From a simple user: THANK YOU!!!