Skip to content

Commit

Permalink
Navigation: Try unifying submenu arrow positioning. (#37003)
Browse files Browse the repository at this point in the history 
* Navigation: Try unifying submenu arrow positioning.

* Fix click on chevron.

* Match editor page list markup to front end.

* Remove redundant rule.

Co-authored-by: tellthemachines <isabel@tellthemachines.com>
  • Loading branch information
@jasmussen @tellthemachines
jasmussen and tellthemachines committed Feb 11, 2022
1 parent 5b901cb commit 8a0f46b
Show file tree
Hide file tree
Showing 6 changed files with 53 additions and 32 deletions.
5 changes: 2 additions & 3 deletions packages/block-library/src/navigation-link/index.php
View file
Expand Up @@ -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 ) {
Expand Down
10 changes: 5 additions & 5 deletions packages/block-library/src/navigation-submenu/edit.js
View file
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/navigation-submenu/index.php
View file
Expand Up @@ -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 ) {
Expand Down
25 changes: 22 additions & 3 deletions packages/block-library/src/navigation/style.scss
View file
Expand Up @@ -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.
Expand All @@ -95,15 +94,18 @@ $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;
stroke: currentColor;
width: inherit;
height: inherit;

// Position the arrow to balance with the the text.
margin-top: 0.075em;
}
}

Expand Down Expand Up @@ -216,6 +218,11 @@ $navigation-icon-size: 24px;
}
}

// Push inwards from right edge of submenu.
.wp-block-navigation__submenu-icon {
margin-right: 0.25em;
}

// Reset the submenu indicator for horizontal flyouts.
.wp-block-navigation__submenu-icon svg {
transform: rotate(-90deg);
Expand Down Expand Up @@ -245,7 +252,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;
Expand Down Expand Up @@ -300,6 +307,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
Expand Down
35 changes: 19 additions & 16 deletions packages/block-library/src/page-list/edit.js
View file
Expand Up @@ -196,7 +196,17 @@ const PageItems = memo( function PageItems( {
} ) }
>
{ hasChildren && context.openSubmenusOnClick ? (
<ItemSubmenuToggle title={ page.title?.rendered } />
<>
<button
className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
aria-expanded="false"
>
{ page.title?.rendered }
</button>
<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
<ItemSubmenuIcon />
</span>
</>
) : (
<a
className={ classnames(
Expand All @@ -213,7 +223,14 @@ const PageItems = memo( function PageItems( {
{ hasChildren && (
<>
{ ! context.openSubmenusOnClick &&
context.showSubmenuIcon && <ItemSubmenuToggle /> }
context.showSubmenuIcon && (
<button
className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"
aria-expanded="false"
>
<ItemSubmenuIcon />
</button>
) }
<ul
className={ classnames( 'submenu-container', {
'wp-block-navigation__submenu-container': isNavigationChild,
Expand All @@ -232,17 +249,3 @@ 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 }
<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
<ItemSubmenuIcon />
</span>
</button>
);
}
6 changes: 3 additions & 3 deletions packages/block-library/src/page-list/index.php
View file
Expand Up @@ -188,16 +188,16 @@ 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>';
}

if ( isset( $page['children'] ) ) {
if ( $is_navigation_child && $show_submenu_icons && ! $open_submenus_on_click ) {
$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
$markup .= '<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>';
$markup .= '<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>';
$markup .= '</button>';
}
$markup .= '<ul class="submenu-container';
Expand Down

0 comments on commit 8a0f46b

Please sign in to comment.