Navigation Block: core/navigation-link padding in theme.json is overridden by core list-item resets on frontend

[mrleemon]

Description

When defining padding for core/navigation-link within theme.json, the styles are correctly applied in the block editor but are overridden on the frontend by a more specific core CSS rule: .wp-block-navigation ul, .wp-block-navigation ul li.

Because theme.json styles are output using the :where() pseudo-selector to maintain low specificity, the core block library's hardcoded reset of padding: 0 on list items takes precedence, making it impossible to style navigation link spacing via theme.json.

Browser inspector output

.wp-block-navigation .wp-block-navigation-item {
  background-color: inherit;
}
.wp-block-navigation .wp-block-navigation-item {
  align-items: center;
  background-color: inherit;
  display: flex;
  position: relative;
}
.wp-block-navigation ul, .wp-block-navigation ul li {
  list-style: none;
  padding: 0;
}
:root :where(.wp-block-navigation-link) {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
}

Step-by-step reproduction instructions

1. Open the theme.json file.
2. Add padding to the core/navigation-link block under styles.blocks:

"core/navigation-link": {
    "spacing": {
        "padding": {
            "top": "10px",
            "right": "15px",
            "bottom": "10px",
            "left": "15px"
        }
    }
}

3. Insert a Navigation block into a page and add several links.
4. View the frontend of the site.
5. Inspect the navigation items. Note that the padding is defined but "crossed out" in the browser inspector.

Expected behavior

The padding defined in theme.json should be respected on the frontend.

Actual behavior

The padding is overridden by the following rule from the core navigation block styles:

.wp-block-navigation ul, .wp-block-navigation ul li {
    list-style: none;
    padding: 0; /* This overrides the :where(.wp-block-navigation-link) padding */
}

Screenshots, screen recording, code snippet

Backend (padding is applied):

Frontend (padding is not applied):

Environment info

WordPress version: 6.9.1
Gutenberg version: Plugin is not installed
Theme: A custom hybrid one

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[prasadkarmalkar]

I am able to replicate the issue locally. Maybe we can :where() pseudo-class for the list reset selectors to match theme.json's low-specificity approach:

File: packages/block-library/src/navigation/style.scss

- ul,
- ul li {
+ // Use :where() to keep specificity minimal, so theme.json padding can override.
+ // This allows users to set padding on navigation links via theme.json.
+ :where(ul),
+ :where(ul li) {
     list-style: none;
     
     // Overrides generic ".entry-content li" styles on the front end.
     padding: 0;
 }

After Screenshot: