Navigation: Try unifying submenu arrow positioning.

WordPress · Feb 9, 2022 · c1601b0 · c1601b0
1 parent 4f72f26
commit c1601b0
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 20 deletions.
diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
@@ -215,15 +215,14 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 	}
 
 	$html .= '</span>';
+	$html .= '</a>';
+	// End anchor tag content.
 
 	if ( isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'] && $has_submenu ) {
 		// The submenu icon can be hidden by a CSS rule on the Navigation Block.
 		$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
 	}
 
-	$html .= '</a>';
-	// End anchor tag content.
-
 	if ( $has_submenu ) {
 		$inner_blocks_html = '';
 		foreach ( $block->inner_blocks as $inner_block ) {

diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
@@ -657,12 +657,12 @@ export default function NavigationSubmenuEdit( {
 							/>
 						</Popover>
 					) }
-					{ ( showSubmenuIcon || openSubmenusOnClick ) && (
-						<span className="wp-block-navigation__submenu-icon">
-							<ItemSubmenuIcon />
-						</span>
-					) }
 				</ParentElement>
+				{ ( showSubmenuIcon || openSubmenusOnClick ) && (
+					<span className="wp-block-navigation__submenu-icon">
+						<ItemSubmenuIcon />
+					</span>
+				) }
 				<div { ...innerBlocksProps } />
 			</div>
 		</Fragment>

diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php
@@ -245,10 +245,10 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 
 		$html .= '</span>';
 
-		$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_submenu_render_submenu_icon() . '</span>';
-
 		$html .= '</button>';
 
+		$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_submenu_render_submenu_icon() . '</span>';
+
 	}
 
 	if ( $has_submenu ) {

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -85,7 +85,6 @@ $navigation-icon-size: 24px;
 		align-self: center; // This one affects nested submenu indicators.
 		line-height: 0;
 		display: inline-block;
-		vertical-align: middle;
 		font-size: inherit;
 
 		// Affect the button as well.
@@ -104,6 +103,9 @@ $navigation-icon-size: 24px;
 			stroke: currentColor;
 			width: inherit;
 			height: inherit;
+
+			// Position the arrow to balance with the the text.
+			margin-top: 0.075em;
 		}
 	}
 
@@ -216,6 +218,16 @@ $navigation-icon-size: 24px;
 				}
 			}
 
+			// Push inwards from right edge of submenu.
+			.wp-block-navigation__submenu-icon {
+				margin-right: 0.25em;
+			}
+
+			// For hover-based menus, this class is duplicated for a button.
+			.wp-block-navigation__submenu-icon .wp-block-navigation__submenu-icon {
+				margin: 0;
+			}
+
 			// Reset the submenu indicator for horizontal flyouts.
 			.wp-block-navigation__submenu-icon svg {
 				transform: rotate(-90deg);
@@ -245,7 +257,7 @@ $navigation-icon-size: 24px;
 	}
 
 	// Show submenus on click.
-	.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
+	.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
 		visibility: visible;
 		overflow: visible;
 		opacity: 1;

diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
@@ -235,14 +235,16 @@ const PageItems = memo( function PageItems( {
 
 function ItemSubmenuToggle( { title } ) {
 	return (
-		<button
-			className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
-			aria-expanded="false"
-		>
-			{ title }
+		<>
+			<button
+				className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
+				aria-expanded="false"
+			>
+				{ title }
+			</button>
 			<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
 				<ItemSubmenuIcon />
 			</span>
-		</button>
+		</>
 	);
 }
diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php
@@ -188,8 +188,8 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 		$markup .= '<li class="wp-block-pages-list__item' . esc_attr( $css_class ) . '"' . $style_attribute . '>';
 
 		if ( isset( $page['children'] ) && $is_navigation_child && $open_submenus_on_click ) {
-			$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="' . esc_attr( $navigation_child_content_class ) . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . $title . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>' .
-			'</button>';
+			$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="' . esc_attr( $navigation_child_content_class ) . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . esc_html( $title ) .
+			'</button>' . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
 		} else {
 			$markup .= '<a class="wp-block-pages-list__item__link' . esc_attr( $navigation_child_content_class ) . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . $title . '</a>';
 		}