Skip to content

Navigation Block: fix inconsistent padding in nested submenus when "Open on click" is enabled #70471

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 16, 2025

Conversation

shrivastavanolo
Copy link
Contributor

@shrivastavanolo shrivastavanolo commented Jun 18, 2025

What?

Closes #70463

The left padding for nested submenu items in the navigation block is inconsistent when "Open on click" option is enabled for the navigation block. This PR fixes padding-left for the same.

Why?

As reported in #70463, nested submenu toggle buttons inherit conflicting padding styles when “Open on click” is used. The base class .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle applies a left padding of 0, which removes the indentation for nested levels. This results in visual inconsistency compared to when “Open on click” is disabled.
This commit restores appropriate left padding to maintain appropriate indentation for submenu items.

How?

Restored padding by targeting submenu items within the .wp-block-navigation__submenu-container ensuring minimal specificity interference.

Testing Instructions

  1. Add navigation block to a post
  2. Add a submenu block to the menu
  3. Within that submenu, add a nested submenu
  4. Enable Open on click via the sidebar settings
  5. Save the post and check on front end
  6. Verify the padding issue in the nested submenu

Screenshots or screencast

Before

Screenshot 2025-06-16 at 4 14 57 PM

After

Screenshot 2025-06-18 at 4 46 31 PM

@shrivastavanolo shrivastavanolo marked this pull request as ready for review June 18, 2025 11:41
Copy link

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
  • Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

Copy link

github-actions bot commented Jun 18, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: shrivastavanolo <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: R1shabh-Gupta <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Block] Navigation Affects the Navigation Block labels Jun 19, 2025
@shrivastavanolo shrivastavanolo force-pushed the fix/nested-submenu-padding branch 2 times, most recently from cce9bfe to eeeb828 Compare July 3, 2025 08:49
@shrivastavanolo
Copy link
Contributor Author

Requesting review on this if possible. Thanks!

cc: @t-hamano @Mamaduka

@shrivastavanolo shrivastavanolo force-pushed the fix/nested-submenu-padding branch from eeeb828 to 9e74a3a Compare July 16, 2025 07:34
@Mamaduka
Copy link
Member

As far as I can tell, this doesn't introduce regression for #50943, which introduced the padding reset.

cc @jasmussen

@jasmussen
Copy link
Contributor

It's a bit far back in my memory, so I can't comment on the details off the top of my head, but at a glance it looks valid enough. I wonder if @carolinan has thoughts?

@Mamaduka Mamaduka merged commit d4c6679 into WordPress:trunk Jul 16, 2025
63 of 64 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.3 milestone Jul 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navigation Block: padding issue in nested submenu when "Open on click" is enabled
4 participants