-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Implement responsive navigation menu Gives the user the option to have the Navigation Block show up behind a button on smaller screens. This menu can be controlled with the keyboard. * only hide closing button if menu is closed Make sure that the button does not disappear when resizing the viewport while the menu is open. * make sure frontend.js is only being loaded once * Fix issues with open modal. * make sure scripts are only loaded once * Add a focus z index so focus isn't cropped. * Fix ariaHidden * Fix color issue. * Fix safari issue. * only enqueue frontend script if needed Needed when: - Responsive navigation is on. - Script hasn't been loaded already. Also, only attempt to load the file if it exists. This only really guards against potential build problems, as in theory it should never be absent. * use isResponsive instead of responsiveNavigation * Fix modal id * Update package-lock, move deps to correct place * Fix aria-hidden label in the editor * Set responsiveness off by default * Add missing aria attributes * update e2e fixture * remove unnecessary context declaration * remove file existence check * Tests responsiveness on preview page Also add function to turn responsiveness on. * Refactor server side render of nav menu Early return if responsiveness is off. * Make sure toggle button labels are translatable * Only render open button if menu is closed * Remove duplicate CSS from rebase. * Fix focus cropping issue. * Simplify overlay style. * Fix for page list. * Remove a few todos. * Fix overlay on desktop breakpoints style, and focus styles. * Small transparency fix. * keep parameter order consistency * Address feedback * Update packages/block-library/src/navigation/frontend.js Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com> * remove no-longer needed css rules * edit redundant callback definition Co-authored-by: jasmussen <joen@automattic.com> Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com>
- Loading branch information
3 people
authored
May 12, 2021
1 parent
854a31f
commit b9ab1a8
Showing
14 changed files
with
598 additions
and
21 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import MicroModal from 'micromodal'; | ||
|
|
||
| function navigationToggleModal( modal ) { | ||
| const triggerButton = document.querySelector( | ||
| `button[data-micromodal-trigger="${ modal.id }"]` | ||
| ); | ||
| const closeButton = modal.querySelector( 'button[data-micromodal-close]' ); | ||
| // Use aria-hidden to determine the status of the modal, as this attribute is | ||
| // managed by micromodal. | ||
| const isHidden = 'true' === modal.getAttribute( 'aria-hidden' ); | ||
| triggerButton.setAttribute( 'aria-expanded', ! isHidden ); | ||
| closeButton.setAttribute( 'aria-expanded', ! isHidden ); | ||
| modal.classList.toggle( 'has-modal-open', ! isHidden ); | ||
| } | ||
|
|
||
| MicroModal.init( { | ||
| onShow: navigationToggleModal, | ||
| onClose: navigationToggleModal, | ||
| openClass: 'is-menu-open', | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
91 changes: 91 additions & 0 deletions
91
packages/block-library/src/navigation/responsive-wrapper.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classnames from 'classnames'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { close, Icon } from '@wordpress/icons'; | ||
| import { Button } from '@wordpress/components'; | ||
| import { SVG, Rect } from '@wordpress/primitives'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| export default function ResponsiveWrapper( { | ||
| children, | ||
| id, | ||
| isOpen, | ||
| isResponsive, | ||
| onToggle, | ||
| } ) { | ||
| if ( ! isResponsive ) { | ||
| return children; | ||
| } | ||
| const responsiveContainerClasses = classnames( | ||
| 'wp-block-navigation__responsive-container', | ||
| { | ||
| 'is-menu-open': isOpen, | ||
| } | ||
| ); | ||
|
|
||
| const modalId = `${ id }-modal`; | ||
|
|
||
| return ( | ||
| <> | ||
| { ! isOpen && ( | ||
| <Button | ||
| aria-haspopup="true" | ||
| aria-expanded={ isOpen } | ||
| aria-label={ __( 'Open menu' ) } | ||
| className="wp-block-navigation__responsive-container-open" | ||
| onClick={ () => onToggle( true ) } | ||
| > | ||
| <SVG | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 24 24" | ||
| width="24" | ||
| height="24" | ||
| role="img" | ||
| aria-hidden="true" | ||
| focusable="false" | ||
| > | ||
| <Rect x="4" y="7.5" width="16" height="1.5" /> | ||
| <Rect x="4" y="15" width="16" height="1.5" /> | ||
| </SVG> | ||
| </Button> | ||
| ) } | ||
|
|
||
| <div | ||
| className={ responsiveContainerClasses } | ||
| id={ modalId } | ||
| aria-hidden={ ! isOpen } | ||
| > | ||
| <div | ||
| className="wp-block-navigation__responsive-close" | ||
| tabIndex="-1" | ||
| > | ||
| <div | ||
| className="wp-block-navigation__responsive-dialog" | ||
| role="dialog" | ||
| aria-modal="true" | ||
| aria-labelledby={ `${ modalId }-title` } | ||
| > | ||
| <Button | ||
| className="wp-block-navigation__responsive-container-close" | ||
| aria-label={ __( 'Close menu' ) } | ||
| onClick={ () => onToggle( false ) } | ||
| > | ||
| <Icon icon={ close } /> | ||
| </Button> | ||
| <div | ||
| className="wp-block-navigation__responsive-container-content" | ||
| id={ `${ modalId }-content` } | ||
| > | ||
| { children } | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.