diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index bae89606496ae..f01c4de6ebc26 100644
--- 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 .= '';
+ $html .= '';
+ // 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 .= '';
}
- $html .= '';
- // 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
index e6ac37c579dc6..226b3fe430cf7 100644
--- 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( {
/>
) }
- { ( showSubmenuIcon || openSubmenusOnClick ) && (
-
-
-
- ) }
+ { ( showSubmenuIcon || openSubmenusOnClick ) && (
+
+
+
+ ) }
diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php
index 59d4f300c226b..a81d1704a2a19 100644
--- 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 .= '';
- $html .= '';
-
$html .= '';
+ $html .= '';
+
}
if ( $has_submenu ) {
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 45ef1969ade89..e607679901e06 100644
--- 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
index d52ebc3a8764e..d1a37e4eb8091 100644
--- 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 (
-
+ >
);
}
diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php
index c13e0ce7fdad1..2ae2b991b639b 100644
--- 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 .= '';
if ( isset( $page['children'] ) && $is_navigation_child && $open_submenus_on_click ) {
- $markup .= '';
+ $markup .= '' . '';
} else {
$markup .= '' . $title . '';
}