Change Navigation block markup on front end only (#30551)

WordPress · Jul 15, 2021 · 21de06c · 21de06c
1 parent 803dffa
commit 21de06c
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 13 deletions.
diff --git a/packages/block-library/src/home-link/edit.js b/packages/block-library/src/home-link/edit.js
@@ -56,7 +56,7 @@ export default function HomeEdit( {
 
 	return (
 		<>
-			<li { ...blockProps }>
+			<div { ...blockProps }>
 				<a
 					className="wp-block-home-link__content"
 					href={ homeUrl }
@@ -80,7 +80,7 @@ export default function HomeEdit( {
 						] }
 					/>
 				</a>
-			</li>
+			</div>
 		</>
 	);
 }
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -48,7 +48,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { ItemSubmenuIcon } from './icons';
 import { name } from './block.json';
 
-const ALLOWED_BLOCKS = [ 'core/navigation-link', 'core/spacer' ];
+const ALLOWED_BLOCKS = [ 'core/navigation-link' ];
 
 const MAX_NESTING = 5;
 
@@ -419,7 +419,6 @@ export default function NavigationLinkEdit( {
 				hasDescendants
 					? InnerBlocks.DefaultAppender
 					: false,
-			__experimentalAppenderTagName: 'li',
 		}
 	);
 
@@ -508,7 +507,7 @@ export default function NavigationLinkEdit( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<li { ...blockProps }>
+			<div { ...blockProps }>
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
 				<a className={ classes }>
 					{ /* eslint-enable */ }
@@ -612,8 +611,8 @@ export default function NavigationLinkEdit( {
 						</span>
 					) }
 				</a>
-				<ul { ...innerBlocksProps } />
-			</li>
+				<div { ...innerBlocksProps } />
+			</div>
 		</Fragment>
 	);
 }
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
@@ -174,7 +174,7 @@ function Navigation( {
 					isOpen={ isResponsiveMenuOpen }
 					isResponsive={ attributes.isResponsive }
 				>
-					<ul { ...innerBlocksProps }></ul>
+					<div { ...innerBlocksProps }></div>
 				</ResponsiveWrapper>
 			</nav>
 		</>

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -176,7 +176,16 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	);
 
 	$inner_blocks_html = '';
+	$is_list_open      = false;
 	foreach ( $block->inner_blocks as $inner_block ) {
+		if ( ( 'core/navigation-link' === $inner_block->name || 'core/home-link' === $inner_block->name ) && false === $is_list_open ) {
+			$is_list_open       = true;
+			$inner_blocks_html .= '<ul class="wp-block-navigation__container">';
+		}
+		if ( 'core/navigation-link' !== $inner_block->name && 'core/home-link' !== $inner_block->name && true === $is_list_open ) {
+			$is_list_open       = false;
+			$inner_blocks_html .= '</ul>';
+		}
 		$inner_blocks_html .= $inner_block->render();
 	}
 
@@ -195,7 +204,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	// return early if they don't.
 	if ( ! isset( $attributes['isResponsive'] ) || false === $attributes['isResponsive'] ) {
 		return sprintf(
-			'<nav %1$s><ul class="wp-block-navigation__container">%2$s</ul></nav>',
+			'<nav %1$s>%2$s</nav>',
 			$wrapper_attributes,
 			$inner_blocks_html
 		);
@@ -208,7 +217,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 					<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-%1$s-title" >
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
 						<div class="wp-block-navigation__responsive-container-content" id="modal-%1$s-content">
-							<ul class="wp-block-navigation__container">%2$s</ul>
+							%2$s
 						</div>
 					</div>
 				</div>

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -6,6 +6,17 @@
 .wp-block-navigation {
 	position: relative;
 
+	// Horizontal layout
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+
+	// Vertical layout
+	&.is-vertical {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
 	// Normalize list styles.
 	ul,
 	ul li {

diff --git a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
@@ -348,7 +348,7 @@ describe( 'Navigation', () => {
 			// Scope element selector to the Editor's "Content" region as otherwise it picks up on
 			// block previews.
 			const navBlockItemsLength = await page.$$eval(
-				'[aria-label="Editor content"][role="region"] li[aria-label="Block: Custom Link"]',
+				'[aria-label="Editor content"][role="region"] div[aria-label="Block: Custom Link"]',
 				( els ) => els.length
 			);
 

diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
@@ -313,7 +313,7 @@ describe( 'Navigation editor', () => {
 
 		// Select a link block with nested links in a submenu.
 		const parentLinkXPath =
-			'//li[@aria-label="Block: Custom Link" and contains(.,"WordPress.org")]';
+			'//div[@aria-label="Block: Custom Link" and contains(.,"WordPress.org")]';
 		const linkBlock = await page.waitForXPath( parentLinkXPath );
 		await linkBlock.click();
 
@@ -322,7 +322,7 @@ describe( 'Navigation editor', () => {
 		// Submenus are hidden using `visibility: hidden` and shown using
 		// `visibility: visible` so the visible/hidden options must be used
 		// when selecting the elements.
-		const submenuLinkXPath = `${ parentLinkXPath }//li[@aria-label="Block: Custom Link"]`;
+		const submenuLinkXPath = `${ parentLinkXPath }//div[@aria-label="Block: Custom Link"]`;
 		const submenuLinkVisible = await page.waitForXPath( submenuLinkXPath, {
 			visible: true,
 		} );