Skip to content

Navigation: Limit list style normalization to navigation block lists to avoid affecting custom overlay lists#77101

Open
karthikeya-io wants to merge 1 commit into
WordPress:trunkfrom
karthikeya-io:fix/navigation-overlay-list-zero-margin
Open

Navigation: Limit list style normalization to navigation block lists to avoid affecting custom overlay lists#77101
karthikeya-io wants to merge 1 commit into
WordPress:trunkfrom
karthikeya-io:fix/navigation-overlay-list-zero-margin

Conversation

@karthikeya-io

@karthikeya-io karthikeya-io commented Apr 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

What?

Closes #76936

This updates the Navigation block list-style normalization so it applies only to navigation block lists, instead of all descendant ul elements inside .wp-block-navigation.

Why?

The previous broad selector affects list-based blocks rendered inside Custom Navigation overlay content, such as Social Icons.

How?

This change narrows the selector so the list spacing normalization applies to:

  • ul.wp-block-navigation__container
  • nested ul elements inside ul.wp-block-navigation__container

Testing Instructions

Testing Instructions for Keyboard

  1. Add a Navigation block.
  2. Use the overlay menu setup that reproduces the issue.
  3. Add a list-based block such as Social Icons inside the overlay content.
  4. Confirm the nested block keeps its expected spacing on the front end.
  5. Confirm standard Navigation block list styling still works as expected.

Screenshots or screencast

Before After

Use of AI Tools

  • Used ChatGPT think through selector options and specificity.

Note: We could also try :where(...) to reduce specificity, open to other inputs.

@github-actions

github-actions Bot commented Apr 7, 2026 •
edited
Loading

Copy link
Copy Markdown

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: karthikeya-io <karthikeya01@git.wordpress.org>
Co-authored-by: adithya-naik <adithyanaik@git.wordpress.org>
Co-authored-by: bgardner <bgardner@git.wordpress.org>
Co-authored-by: dpmehta <mehtadev@git.wordpress.org>

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

@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Apr 7, 2026
@github-actions

github-actions Bot commented Apr 7, 2026

Copy link
Copy Markdown

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.

  • Required label: Any label starting with [Type].
  • Labels found: [Package] Block library.

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.

@adithya-naik

adithya-naik commented Apr 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

@karthikeya-io I have linked my GitHub account, but even it's showing the same

Screenshot_20260407-200725_Chrome.png

@bgardner

bgardner commented Apr 8, 2026

Copy link
Copy Markdown

Just tested this PR via Gutenberg and Playground, and it looks good to me!

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

[Package] Block library /packages/block-library

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Navigation overlays: Social Icons block gap is being zeroed out (margin-top: 0;)

3 participants

@karthikeya-io @adithya-naik @bgardner