Navigation block: custom HTML Anchor duplicates onto inner <ul>, producing invalid duplicate id

[Vaibhaviie]

Description

On WordPress 7.1 Beta 1, adding a Navigation block and setting a custom HTML Anchor causes the anchor value to be rendered on both the outer <nav> element and the inner <ul class="wp-block-navigation__container">, resulting in duplicate id attributes in the generated HTML.

IDs are expected to be unique within a document. Because the same anchor value is assigned to both elements, the generated markup is invalid HTML. This may affect CSS selectors, JavaScript lookups, HTML validation, and accessibility validation tools.

I expected the custom HTML Anchor to be applied only to the outer <nav> element. Instead, it is also applied to the inner navigation <ul>.

This issue is consistently reproducible with different anchor values and multiple Navigation block instances.

Step-by-step reproduction instructions

1. Set up a fresh WordPress 7.1 Beta 1 site using a block theme.
2. Add a Navigation block (core/navigation).
3. Open Block Settings → Advanced → HTML Anchor and enter a custom ID (e.g. header-navigation).
4. Save and view the page on the frontend.
5. Inspect the rendered HTML or View Source.
6. Observe that the same ID is applied to both the outer <nav> element and the inner <ul class="wp-block-navigation__container">.
7. Repeat with a different anchor value and/or another Navigation block instance; the same duplication occurs.

Screenshots, screen recording, code snippet

Rendered HTML:

<nav class="is-responsive wp-block-navigation is-layout-flex wp-block-navigation-is-layout-flex"
     id="header-navigation"
     aria-label="Navigation">

    ...

    <ul class="wp-block-navigation__container is-responsive wp-block-navigation"
        id="header-navigation">
        ...
    </ul>
</nav>

The custom HTML Anchor (header-navigation) is rendered on both the outer <nav> element and the inner navigation <ul>, resulting in duplicate IDs.

Browser console:

document.querySelectorAll('#header-navigation').length
// 2

Environment info

• WordPress version: 7.1 Beta 1
• Gutenberg version: Bundled with WordPress core (no standalone Gutenberg plugin installed)
• Active theme: Twenty Twenty-Four
• Browser: Chrome
• Operating System: Windows

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

[talldan]

Thanks for reporting. I think this is the same root cause as #62690, not specifically a WordPress 7.1 issue.

I don't think anyone has noticed before that this happens with ids too. While class names are somewhat harmless, and in some cases help with style cascade, the ids are definitely a problem!

[Vaibhaviie]

Hi! @talldan I wanted to follow up on this issue. Since it was linked to #62690, I was wondering whether it will continue to be tracked separately or be addressed as part of that work. I'm happy to test any proposed fix if that would be helpful. Thanks!