From c1601b080fbceef896992117dc1b3582218ec092 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 30 Nov 2021 14:22:21 +0100 Subject: [PATCH 1/4] Navigation: Try unifying submenu arrow positioning. --- .../block-library/src/navigation-link/index.php | 5 ++--- .../block-library/src/navigation-submenu/edit.js | 10 +++++----- .../src/navigation-submenu/index.php | 4 ++-- packages/block-library/src/navigation/style.scss | 16 ++++++++++++++-- packages/block-library/src/page-list/edit.js | 14 ++++++++------ packages/block-library/src/page-list/index.php | 4 ++-- 6 files changed, 33 insertions(+), 20 deletions(-) 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 .= '' . block_core_navigation_link_render_submenu_icon() . ''; } - $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 .= '' . block_core_navigation_submenu_render_submenu_icon() . ''; - $html .= ''; + $html .= '' . block_core_navigation_submenu_render_submenu_icon() . ''; + } 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 . ''; } From 449a60f0105a5f734e6db70c0767cf1e3c335c28 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 9 Feb 2022 09:46:52 +0100 Subject: [PATCH 2/4] Fix click on chevron. --- packages/block-library/src/navigation/style.scss | 14 +++++++++++++- packages/block-library/src/page-list/index.php | 2 +- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index e607679901e06..6d53cee0c657b 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -94,9 +94,9 @@ $navigation-icon-size: 24px; border: none; // Scale to font size. - margin-left: 0.25em; width: 0.6em; height: 0.6em; + margin-left: 0.25em; svg { display: inline-block; @@ -312,6 +312,18 @@ button.wp-block-navigation-item__content { cursor: pointer; } +// When set to open on click, a button element is used. +// We pad it to include the arrow icon in the clickable area. +// The padding can be blanket for click, since you can't set click and hide the icon. +.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle { + padding-right: 0.6em + 0.25em; // Same size as icon plus margin. + + + .wp-block-navigation__submenu-icon { + margin-left: -0.6em; + pointer-events: none; // Make the icon inert to allow click on the button. + } +} + /** * Margins diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php index 2ae2b991b639b..c79ad79099a3b 100644 --- a/packages/block-library/src/page-list/index.php +++ b/packages/block-library/src/page-list/index.php @@ -197,7 +197,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click, if ( isset( $page['children'] ) ) { if ( $is_navigation_child && $show_submenu_icons && ! $open_submenus_on_click ) { $markup .= ''; } $markup .= '