HTML structure of navigation blocks differs between editor and front

[inc2734]

Description

HTML structure of navigation blocks differs between editor and front.

This makes it difficult to adjust the CSS so that it looks the same in both HTML versions when it is attempted to be overridden.

Since the HTML structure in the editor feels more straightforward, it seems to me that it would be better to adapt the front end to it as well.

Step-by-step reproduction instructions

1. Go to site editor.
2. Add to sub navigation block and button block to navigation block.

Screenshots, screen recording, code snippet

Editor

<nav class="items-justified-right is-responsive is-layout-flex is-horizontal is-content-justification-right wp-block-navigation">
	<button type="button" class="wp-block-navigation__responsive-container-open">
		...
	</button>
	<div class="wp-block-navigation__responsive-container">
		<div class="wp-block-navigation__responsive-close">
			<div class="wp-block-navigation__responsive-dialog">
				<button type="button" class="wp-block-navigation__responsive-container-close">
					...
				</button>
				<div class="wp-block-navigation__responsive-container-content">
					<div class="wp-block-navigation__container">
						<ul class="has-block-overlay wp-block-page-list wp-block-page-list">
							<li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content">Sample Page</a></li>
							<li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content">Blog</a></li>
							
							
							<li class="wp-block-pages-list__item has-child wp-block-navigation-item open-on-hover-click">
								<a class="wp-block-pages-list__item__link wp-block-navigation-item__content">Home</a>
								<button class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon" type="button">xxx</button>
								<ul class="wp-block-navigation__submenu-container wp-block-page-list-item">
									<li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content">Child</a></li>
								</ul>
							</li>
						</ul>
						<div class="wp-block-buttons is-layout-flex">
							<div class="wp-block-button">
								<div class="wp-block-button__link wp-element-button">Button</div>
							</div>
							<div class="wp-block-button">
								<div class="wp-block-button__link wp-element-button">Button</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</nav>

Front

<nav class="items-justified-right is-responsive is-layout-flex is-horizontal is-content-justification-right wp-block-navigation">
	<button class="wp-block-navigation__responsive-container-open">
		...
	</button>
	<div class="wp-block-navigation__responsive-container">
		<div class="wp-block-navigation__responsive-close">
			<div class="wp-block-navigation__responsive-dialog">
				<button class="wp-block-navigation__responsive-container-close">
					...
				</button>
				<div class="wp-block-navigation__responsive-container-content">
					<ul class="wp-block-navigation__container is-responsive items-justified-right wp-block-navigation"> // todo
						<ul class="wp-block-page-list"> // todo
							<li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content">Sample Page</a></li>
							<li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content">Blog</a></li>
							<li class="wp-block-pages-list__item has-child wp-block-navigation-item open-on-hover-click">
								<a class="wp-block-pages-list__item__link wp-block-navigation-item__content">ホーム</a>
								<button class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle">...</button>
								<ul class="wp-block-navigation__submenu-container">
									<li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content">Child</a></li>
								</ul>
							</li>
						</ul>
					</ul>
					<div class="wp-block-buttons is-layout-flex">
						<div class="wp-block-button">
							<a class="wp-block-button__link wp-element-button">Button</a>
						</div>
						<div class="wp-block-button">
							<a class="wp-block-button__link wp-element-button">Button</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</nav>

• In the front, .is-responsive .items-justified-right .wp-block-navigation and other outermost classes are added to .wp-block-navigation__container, but but not in the editor
• In the editor, .wp-block-navigation__container is a div, but in the front it is a ul.
• In the editor, all inner blocks go in .wp-block-navigation__container, but not in the front if there are buttons (they go in .wp-block-navigation__responsive-container-content ).
• There is no .has-block-overlay on the front page.
• No .wp-block-page-list__submenu-icon on front
• Submenu toggle buttons have .wp-block-navigation-item__content in the editor, but not in the front

Environment info

• WordPress 6.5.2
• Twenty Twenty-Four 1.1

It was the same whether Gutenberg 18.2.0 was installed or not.

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

[getdave]

@mikachan @MaggieCabrera As folks who have worked extensively on Themes, can you speak to the impact of this?

To be clear, it is entirely valid that the editor and the front of the site do not have to have the exact same markup. That is an established convention. However, it is helpful if the same structure and classnames exist between the two in order to make it easier to consistently style the block.

[MaggieCabrera]

I understand the concern about the disparity, and I would encourage aligning them when possible and sensible, but we'd have to:

• figure out why they are different (there might be historical or technical reasons that are still relevant)
• if we were to change the markup/classnames, changing them on the frontend can mean we break existing sites that are styling those classes. I'd rather avoid that as much as possible :)

[mikachan]

+1 to @MaggieCabrera's comment above. I think ideally it would be great to align at least the class names in both the Editor and the front end, but we need to be really careful about breaking existing sites. I wonder if there's a way we could incrementally align the class names to help bring parity to the styling of this block.

[getdave]

#67169 also modifies the way classes are applied. We could make the changes early in this release cycle and start alerting folks to the impact early.

That said, I don't feel this is top-most priority out of all the issues we could be focusing on.