Global header: Implement design updates #657
Conversation
This also simplifies the logic now that open and close buttons can be selected individually
|
|
||
| const openButtons = document.querySelectorAll( '[data-micromodal-trigger]' ); | ||
| const openButtons = document.querySelectorAll( | ||
| '.global-header__navigation [data-wp-on-async--click="actions.openMenuOnClick"],' + |
There was a problem hiding this comment.
Do we need to rely on the Interactivity API attributes? Is it fair to assume a button in the menu is a dropdown?
There was a problem hiding this comment.
This is a way to differentiate open and close buttons, if we went for just "button" it would catch both.
|
Looks great! If @fcoveram has a chance to look, it would be nice, but no blocker. |
|
Sorry for arriving late here. I was thinking of bringing the border line back. Here is a mockup of the border idea with visual tweaks.
If you all think the above looks good, I can create the issue and point out the new documentation in the Design Library. |
Works for me. When you create the issue, can you write out exactly what "with visual tweaks" means— just adding the border, or did other spacing/sizes change, that kind of thing. Thanks! |
|
I created the ticket #666 (👹) asking for implementing the idea dropped in my previous comment |
This applies the style changes suggested in #572 for the global header. The header height is decreased (and any alignment issues fixed), the active style is more subtle, and the mobile menu is more consistent.
The menu items with child menus (Extend, Learn, etc) are now a lighter grey, but they are still focusable & clickable — this is core behavior for "click to open" submenus in the overlay menu. Nothing happens if you click them. This could be an issue for Gutenberg, but there's nothing we can do here (I tried a few things).
I simplified & fixed the modal view javascript now that the navigation block uses the Interactivity API instead of the micromodal library, so opening the search overlay will close an open menu overlay and vice versa.
The new design removed the side border on active items on mobile (see the 4th row of screenshots), which means the only indicator of current page is color. We need to add some other non-color effect here. @WordPress/meta-design
Fixes #572
Screenshots
The desktop screens are all neutral, no interactions. The mobile views were opened by keyboard, so the first element is focused. For News, it's also the current page.
Video for focus & dropdown styles
desktop-tabs.mp4
showcase-mobile-tab.mp4
To test