Skip to content

Commit

Permalink
Global header: Update navigation menu items (#458)
Browse files Browse the repository at this point in the history 
* Header menu: Update items in menu

Fixes #316, fixes #360

* Header: Switch to "open on click" for nav menus

Fixes #440

* Fix the ellipsis menu to work with "on click" behavior
  • Loading branch information
@ryelle
ryelle committed Oct 19, 2023
1 parent 1c4013e commit c375eb6
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 60 deletions.
56 changes: 20 additions & 36 deletions mu-plugins/blocks/global-header-footer/blocks.php
View file
Expand Up @@ -15,7 +15,6 @@
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_compat_wp4_styles', 5 ); // Before any theme CSS.
add_action( 'wp_head', __NAMESPACE__ . '\preload_google_fonts' );
add_filter( 'style_loader_src', __NAMESPACE__ . '\update_google_fonts_url', 10, 2 );
add_filter( 'render_block_core/navigation-link', __NAMESPACE__ . '\swap_submenu_arrow_svg' );
add_filter( 'render_block_core/search', __NAMESPACE__ . '\swap_header_search_action', 10, 2 );
add_filter( 'render_block_wporg/global-header', __NAMESPACE__ . '\add_aria_hidden_to_arrows', 19 );
add_filter( 'render_block_wporg/global-footer', __NAMESPACE__ . '\add_aria_hidden_to_arrows', 19 );
Expand Down Expand Up @@ -451,38 +450,38 @@ function get_global_menu_items() {
'type' => 'custom',
),
array(
'title' => esc_html_x( 'Download & Extend', 'Menu item title', 'wporg' ),
'url' => 'https://wordpress.org/download/',
'title' => esc_html_x( 'Showcase', 'Menu item title', 'wporg' ),
'url' => 'https://wordpress.org/showcase/',
'type' => 'custom',
),
array(
'title' => esc_html_x( 'Hosting', 'Menu item title', 'wporg' ),
'url' => 'https://wordpress.org/hosting/',
'type' => 'custom',
),
array(
'title' => esc_html_x( 'Extend', 'Menu item title', 'wporg' ),
'url' => '#',
'type' => 'custom',
'submenu' => array(
array(
'title' => esc_html_x( 'Get WordPress', 'Menu item title', 'wporg' ),
'url' => 'https://wordpress.org/download/',
'type' => 'custom',
),
array(
'title' => esc_html_x( 'Themes', 'Menu item title', 'wporg' ),
'url' => 'https://wordpress.org/themes/',
'type' => 'custom',
),
array(
'title' => esc_html_x( 'Patterns', 'Menu item title', 'wporg' ),
'url' => 'https://wordpress.org/patterns/',
'type' => 'custom',
),
array(
'title' => esc_html_x( 'Plugins', 'Menu item title', 'wporg' ),
'url' => 'https://wordpress.org/plugins/',
'type' => 'custom',
),
array(
'title' => esc_html_x( 'Mobile', 'Menu item title', 'wporg' ),
'url' => 'https://wordpress.org/mobile/',
'title' => esc_html_x( 'Patterns', 'Menu item title', 'wporg' ),
'url' => 'https://wordpress.org/patterns/',
'type' => 'custom',
),
array(
'title' => esc_html_x( 'Hosting', 'Menu item title', 'wporg' ),
'url' => 'https://wordpress.org/hosting/',
'title' => esc_html_x( 'Blocks', 'Menu item title', 'wporg' ),
'url' => 'https://wordpress.org/blocks/',
'type' => 'custom',
),
array(
Expand All @@ -494,7 +493,7 @@ function get_global_menu_items() {
),
array(
'title' => esc_html_x( 'Learn', 'Menu item title', 'wporg' ),
'url' => 'https://learn.wordpress.org/',
'url' => '#',
'type' => 'custom',
'submenu' => array(
array(
Expand Down Expand Up @@ -526,7 +525,7 @@ function get_global_menu_items() {
),
array(
'title' => esc_html_x( 'Community', 'Menu item title', 'wporg' ),
'url' => 'https://make.wordpress.org/',
'url' => '#',
'type' => 'custom',
'submenu' => array(
array(
Expand Down Expand Up @@ -563,19 +562,14 @@ function get_global_menu_items() {
),
array(
'title' => esc_html_x( 'About', 'Menu item title', 'wporg' ),
'url' => 'https://wordpress.org/about/',
'url' => '#',
'type' => 'custom',
'submenu' => array(
array(
'title' => esc_html_x( 'About WordPress', 'Menu item title', 'wporg' ),
'url' => 'https://wordpress.org/about/',
'type' => 'custom',
),
array(
'title' => esc_html_x( 'Showcase', 'Menu item title', 'wporg' ),
'url' => 'https://wordpress.org/showcase/',
'type' => 'custom',
),
array(
'title' => esc_html_x( 'Enterprise', 'Menu item title', 'wporg' ),
'url' => 'https://wordpress.org/enterprise/',
Expand All @@ -587,7 +581,7 @@ function get_global_menu_items() {
'type' => 'custom',
),
array(
'title' => esc_html_x( 'WordPress Swag Store ↗︎', 'Menu item title', 'wporg' ),
'title' => esc_html_x( 'Swag Store ↗︎', 'Menu item title', 'wporg' ),
'url' => 'https://mercantile.wordpress.org/',
'type' => 'custom',
),
Expand Down Expand Up @@ -972,16 +966,6 @@ function set_current_item_class( $menu_items ) {
return $menu_items;
}

/**
* Replace the current submenu down-arrow with a custom icon.
*
* @param string $block_content The block content about to be appended.
* @return string The filtered block content.
*/
function swap_submenu_arrow_svg( $block_content ) {
return str_replace( block_core_navigation_link_render_submenu_icon(), "<svg width='10' height='7' viewBox='0 0 10 7' stroke-width='1.2' xmlns='http://www.w3.org/2000/svg'><path d='M0.416667 1.33325L5 5.49992L9.58331 1.33325'></path></svg>", $block_content );
}

/**
* Replace the search action url with the custom attribute.
*
Expand Down
2 changes: 1 addition & 1 deletion mu-plugins/blocks/global-header-footer/header.php
View file
Expand Up @@ -81,7 +81,7 @@ function recursive_menu( $menu_item, $top_level = true ) {
<!-- /wp:paragraph -->
<?php endif; ?>

<!-- wp:navigation {"className":"global-header__navigation","layout":{"type":"flex","orientation":"horizontal"}} -->
<!-- wp:navigation {"openSubmenusOnClick":true,"className":"global-header__navigation","layout":{"type":"flex","orientation":"horizontal"}} -->
<?php
/*
* Loop though menu items and create navigation item blocks. Recurses through any submenu items to output dropdowns.
Expand Down
16 changes: 10 additions & 6 deletions mu-plugins/blocks/global-header-footer/js/view.js
View file
Expand Up @@ -103,22 +103,26 @@
'wp-block-navigation-item',
'wp-block-navigation-submenu',
'has-child',
'open-on-hover-click',
'open-on-click',
'global-header__overflow-menu'
);

const newButton = document.createElement( 'button' );
newButton.classList.add(
'wp-block-navigation__submenu-icon',
'wp-block-navigation-submenu__toggle'
);
newButton.appendChild( document.createTextNode( '...' ) );
newButton.classList.add( 'wp-block-navigation-submenu__toggle' );
newButton.appendChild( document.createTextNode( '…' ) );
newButton.setAttribute( 'aria-label', labels.overflowMenuLabel );
newButton.setAttribute( 'aria-expanded', 'false' );
newButton.addEventListener( 'click', function ( event ) {
const isOpen = event.target.getAttribute( 'aria-expanded' ) === 'true';
event.target.setAttribute( 'aria-expanded', isOpen ? 'false' : 'true' );
} );
newItem.addEventListener( 'focusout', function ( event ) {
if ( ! newItem.contains( event.relatedTarget ) ) {
itemsContainer
.querySelector( '.global-header__overflow-menu button' )
.setAttribute( 'aria-expanded', 'false' );
}
} );
newItem.appendChild( newButton );

// Create the submenu where the hidden links will live.
Expand Down
39 changes: 22 additions & 17 deletions mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss
View file
Expand Up @@ -65,10 +65,6 @@
width: 100%;
}

& .wp-block-navigation__submenu-icon {
display: none;
}

& .wp-block-navigation__responsive-container-content {
padding-top: 2em;
padding-left: calc(var(--wp--style--block-gap) / 2);
Expand Down Expand Up @@ -167,14 +163,29 @@

@media (--tablet) {
margin: 0;
padding-left: calc(var(--wp--style--block-gap) / 6);
padding-right: calc(var(--wp--style--block-gap) / 2);
height: 24px;
width: 12px;
box-sizing: content-box;

&::after {
content: "";
display: inline-block;
margin-left: 9px;
height: 10px;
width: 12px;
/* stylelint-disable-next-line function-url-quotes */
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' aria-hidden='true' focusable='false'%3E%3Cpath d='M1.50002 4L6.00002 8L10.5 4' stroke='black' stroke-width='1.5'%3E%3C/path%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-position: center;
background-color: var(--wp-global-header--text-color);
}
}
}

& .wp-block-navigation__submenu-icon {
display: none;
}

& .wp-block-navigation-item.has-child a {

@media (--tablet) {
Expand Down Expand Up @@ -221,9 +232,14 @@
margin: 0;
padding-left: var(--wp--style--block-gap);
padding-right: var(--wp--style--block-gap);
color: inherit;
}
}

& .wp-block-navigation-submenu__toggle::after {
display: none;
}

& .global-header__overflow-item {
display: inherit;
}
Expand Down Expand Up @@ -261,7 +277,6 @@
}
}

&:hover .wp-block-navigation__submenu-container,
& [aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
& [aria-expanded="true"] ~ .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
visibility: visible;
Expand All @@ -275,16 +290,6 @@
& .wp-block-navigation-item {
padding-bottom: 0;
}

& .wp-block-navigation__submenu-icon {
margin-left: 0;
padding-right: 22px;

& svg {
fill: none;
stroke: currentcolor;
}
}
}

.global-header {
Expand Down

0 comments on commit c375eb6

Please sign in to comment.