From 9245d64d9d997414f7e5062d3ff40eb9ad202751 Mon Sep 17 00:00:00 2001 From: Jasper Date: Mon, 21 Mar 2022 12:19:23 +0300 Subject: [PATCH 1/8] fix(block-library): close overlay menu in nav block when navigating to an anchor link Closes #gutenberg-39585 --- packages/block-library/src/navigation-link/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index 507a4e20689c87..2f83d51d965f98 100644 --- a/packages/block-library/src/navigation-link/index.php +++ b/packages/block-library/src/navigation-link/index.php @@ -160,7 +160,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) { ) ); $html = '
  • ' . - ' Date: Tue, 22 Mar 2022 08:51:54 +0300 Subject: [PATCH 2/8] fix(block-library): add eventlistener to close modal on clicking overlay menu nav links Closes #gutenberg-39585 --- packages/block-library/src/navigation-link/index.php | 2 +- packages/block-library/src/navigation/view.js | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index 2f83d51d965f98..507a4e20689c87 100644 --- a/packages/block-library/src/navigation-link/index.php +++ b/packages/block-library/src/navigation-link/index.php @@ -160,7 +160,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) { ) ); $html = '
  • ' . - ' { button.addEventListener( 'click', toggleSubmenuOnClick ); } ); + // Close on clicking internal and external links inside modal. + const navigationLinks = document.querySelectorAll( + '.wp-block-navigation-item__content' + ); + + navigationLinks.forEach( function ( link ) { + link.addEventListener( 'click', () => MicroModal.close() ); + } ); + // Close on click outside. document.addEventListener( 'click', function ( event ) { const navigationBlocks = document.querySelectorAll( From c26932ab7eac4483490d21c8727b96f278680a8c Mon Sep 17 00:00:00 2001 From: Jasper Date: Wed, 13 Apr 2022 12:49:45 +0300 Subject: [PATCH 3/8] fix(block-library): pass id of modal to micromodal.close and check if overlay menu is open before trying to close it Closes #gutenberg-39585 --- packages/block-library/src/navigation/view.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js index 7a63c35983b1b7..1cb4ef34938043 100644 --- a/packages/block-library/src/navigation/view.js +++ b/packages/block-library/src/navigation/view.js @@ -44,13 +44,28 @@ window.addEventListener( 'load', () => { button.addEventListener( 'click', toggleSubmenuOnClick ); } ); - // Close on clicking internal and external links inside modal. + // Close modal on clicking internal and external links inside modal. const navigationLinks = document.querySelectorAll( '.wp-block-navigation-item__content' ); navigationLinks.forEach( function ( link ) { - link.addEventListener( 'click', () => MicroModal.close() ); + // we need to find the specific parent modal for this link + // since .close() won't work without an ID in case we have + // mutiple navigation menus in a post/page. + const modal = link.closest( + '.wp-block-navigation__responsive-container' + ); + const modalId = modal?.getAttribute( 'id' ); + + link.addEventListener( 'click', () => { + // check if modal exists and is open before we try to close it + // otherwise Micromodal will toggle the `has-modal-open` class + // on the html tag which prevents scrolling + if ( modalId && modal.classList.contains( 'has-modal-open' ) ) { + MicroModal.close( modalId ); + } + } ); } ); // Close on click outside. From 82f0a1bdb25e0780eb2e83186359108a6034e069 Mon Sep 17 00:00:00 2001 From: Jasper Date: Thu, 28 Apr 2022 18:16:15 +0300 Subject: [PATCH 4/8] fix(block-library): ignore non-anchor links when closing navigation menu overlay for anchor links Closes #gutenberg-39585 --- packages/block-library/src/navigation/view.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js index 1cb4ef34938043..cdfdf9751f770c 100644 --- a/packages/block-library/src/navigation/view.js +++ b/packages/block-library/src/navigation/view.js @@ -44,12 +44,17 @@ window.addEventListener( 'load', () => { button.addEventListener( 'click', toggleSubmenuOnClick ); } ); - // Close modal on clicking internal and external links inside modal. + // Close modal automatically on clicking anchor links inside modal. const navigationLinks = document.querySelectorAll( '.wp-block-navigation-item__content' ); navigationLinks.forEach( function ( link ) { + // Ignore non-anchor links. + if ( ! link.getAttribute( 'href' )?.startsWith( '#' ) ) { + return; + } + // we need to find the specific parent modal for this link // since .close() won't work without an ID in case we have // mutiple navigation menus in a post/page. From a4d82e0e03fb31b753289f2dd64e9bf436932f72 Mon Sep 17 00:00:00 2001 From: Jasper Date: Thu, 28 Apr 2022 18:36:32 +0300 Subject: [PATCH 5/8] chore(block-library): move code for closing modal on clicking anchor links to seperate view-modal.js script Closes #gutenberg-39585 --- .../src/navigation/view-modal.js | 29 +++++++++++++++++++ packages/block-library/src/navigation/view.js | 29 ------------------- 2 files changed, 29 insertions(+), 29 deletions(-) diff --git a/packages/block-library/src/navigation/view-modal.js b/packages/block-library/src/navigation/view-modal.js index c9028af28ab2a5..aba4401322343e 100644 --- a/packages/block-library/src/navigation/view-modal.js +++ b/packages/block-library/src/navigation/view-modal.js @@ -33,4 +33,33 @@ window.addEventListener( 'load', () => { onClose: navigationToggleModal, openClass: 'is-menu-open', } ); + + // Close modal automatically on clicking anchor links inside modal. + const navigationLinks = document.querySelectorAll( + '.wp-block-navigation-item__content' + ); + + navigationLinks.forEach( function ( link ) { + // Ignore non-anchor links. + if ( ! link.getAttribute( 'href' )?.startsWith( '#' ) ) { + return; + } + + // we need to find the specific parent modal for this link + // since .close() won't work without an ID in case we have + // mutiple navigation menus in a post/page. + const modal = link.closest( + '.wp-block-navigation__responsive-container' + ); + const modalId = modal?.getAttribute( 'id' ); + + link.addEventListener( 'click', () => { + // check if modal exists and is open before we try to close it + // otherwise Micromodal will toggle the `has-modal-open` class + // on the html tag which prevents scrolling + if ( modalId && modal.classList.contains( 'has-modal-open' ) ) { + MicroModal.close( modalId ); + } + } ); + } ); } ); diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js index cdfdf9751f770c..5116f983b54000 100644 --- a/packages/block-library/src/navigation/view.js +++ b/packages/block-library/src/navigation/view.js @@ -44,35 +44,6 @@ window.addEventListener( 'load', () => { button.addEventListener( 'click', toggleSubmenuOnClick ); } ); - // Close modal automatically on clicking anchor links inside modal. - const navigationLinks = document.querySelectorAll( - '.wp-block-navigation-item__content' - ); - - navigationLinks.forEach( function ( link ) { - // Ignore non-anchor links. - if ( ! link.getAttribute( 'href' )?.startsWith( '#' ) ) { - return; - } - - // we need to find the specific parent modal for this link - // since .close() won't work without an ID in case we have - // mutiple navigation menus in a post/page. - const modal = link.closest( - '.wp-block-navigation__responsive-container' - ); - const modalId = modal?.getAttribute( 'id' ); - - link.addEventListener( 'click', () => { - // check if modal exists and is open before we try to close it - // otherwise Micromodal will toggle the `has-modal-open` class - // on the html tag which prevents scrolling - if ( modalId && modal.classList.contains( 'has-modal-open' ) ) { - MicroModal.close( modalId ); - } - } ); - } ); - // Close on click outside. document.addEventListener( 'click', function ( event ) { const navigationBlocks = document.querySelectorAll( From 9c4815b29917fe1a389ab9a8751bb7cf9cf7feb0 Mon Sep 17 00:00:00 2001 From: Jasper Date: Thu, 28 Apr 2022 18:55:03 +0300 Subject: [PATCH 6/8] fix(block-library): ignore anchor links which open on a new tab when closing modal on clicking link Closes #gutenberg-39585 --- packages/block-library/src/navigation/view-modal.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/view-modal.js b/packages/block-library/src/navigation/view-modal.js index aba4401322343e..012af3566d8795 100644 --- a/packages/block-library/src/navigation/view-modal.js +++ b/packages/block-library/src/navigation/view-modal.js @@ -40,8 +40,11 @@ window.addEventListener( 'load', () => { ); navigationLinks.forEach( function ( link ) { - // Ignore non-anchor links. - if ( ! link.getAttribute( 'href' )?.startsWith( '#' ) ) { + // Ignore non-anchor links and anchor links which open on a new tab. + if ( + ! link.getAttribute( 'href' )?.startsWith( '#' ) || + link.attributes?.target === '_blank' + ) { return; } From faa02c26ed2c17ed0d4408d7883087293c52f423 Mon Sep 17 00:00:00 2001 From: Jasper Kinoti Date: Tue, 3 May 2022 13:09:17 +0300 Subject: [PATCH 7/8] Update packages/block-library/src/navigation/view-modal.js update comment description Co-authored-by: Dave Smith --- packages/block-library/src/navigation/view-modal.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/navigation/view-modal.js b/packages/block-library/src/navigation/view-modal.js index 012af3566d8795..af937c0a1f018e 100644 --- a/packages/block-library/src/navigation/view-modal.js +++ b/packages/block-library/src/navigation/view-modal.js @@ -48,9 +48,9 @@ window.addEventListener( 'load', () => { return; } - // we need to find the specific parent modal for this link - // since .close() won't work without an ID in case we have - // mutiple navigation menus in a post/page. + // Find the specific parent modal for this link + // since .close() won't work without an ID if there are + // multiple navigation menus in a post/page. const modal = link.closest( '.wp-block-navigation__responsive-container' ); From d02473331fae11f8e2b26a17c63d74817d701f31 Mon Sep 17 00:00:00 2001 From: Jasper Kinoti Date: Tue, 3 May 2022 13:09:51 +0300 Subject: [PATCH 8/8] Update packages/block-library/src/navigation/view-modal.js fix comment typo Co-authored-by: Dave Smith --- packages/block-library/src/navigation/view-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/view-modal.js b/packages/block-library/src/navigation/view-modal.js index af937c0a1f018e..477f05b5d5e51e 100644 --- a/packages/block-library/src/navigation/view-modal.js +++ b/packages/block-library/src/navigation/view-modal.js @@ -57,7 +57,7 @@ window.addEventListener( 'load', () => { const modalId = modal?.getAttribute( 'id' ); link.addEventListener( 'click', () => { - // check if modal exists and is open before we try to close it + // check if modal exists and is open before trying to close it // otherwise Micromodal will toggle the `has-modal-open` class // on the html tag which prevents scrolling if ( modalId && modal.classList.contains( 'has-modal-open' ) ) {