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