From 7928dee911a43bbc8f2be77aa01edc139a61bd9e Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 27 May 2021 11:29:39 +0200 Subject: [PATCH 1/2] Lock the document from scrolling when the modal is open. --- packages/block-library/src/navigation/frontend.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/navigation/frontend.js b/packages/block-library/src/navigation/frontend.js index 592106763e4825..aee226f9aedc6e 100644 --- a/packages/block-library/src/navigation/frontend.js +++ b/packages/block-library/src/navigation/frontend.js @@ -14,6 +14,10 @@ function navigationToggleModal( modal ) { triggerButton.setAttribute( 'aria-expanded', ! isHidden ); closeButton.setAttribute( 'aria-expanded', ! isHidden ); modal.classList.toggle( 'has-modal-open', ! isHidden ); + + // Add a class to indicate the modal is open. + const toggleClass = ( el, className ) => el.classList.toggle( className ); + toggleClass( document.querySelector( 'html' ), 'has-modal-open' ); } MicroModal.init( { From 57b6ab895ba83e3b7b148602c01a4828673e915a Mon Sep 17 00:00:00 2001 From: Joen A <1204802+jasmussen@users.noreply.github.com> Date: Thu, 27 May 2021 16:36:05 +0200 Subject: [PATCH 2/2] Update packages/block-library/src/navigation/frontend.js Co-authored-by: Vicente Canales <1157901+vcanales@users.noreply.github.com> --- packages/block-library/src/navigation/frontend.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/frontend.js b/packages/block-library/src/navigation/frontend.js index aee226f9aedc6e..1bf1f9fa3a51fc 100644 --- a/packages/block-library/src/navigation/frontend.js +++ b/packages/block-library/src/navigation/frontend.js @@ -16,8 +16,8 @@ function navigationToggleModal( modal ) { modal.classList.toggle( 'has-modal-open', ! isHidden ); // Add a class to indicate the modal is open. - const toggleClass = ( el, className ) => el.classList.toggle( className ); - toggleClass( document.querySelector( 'html' ), 'has-modal-open' ); + const htmlElement = document.querySelector( 'html' ); + htmlElement.classList.toggle( 'has-modal-open' ); } MicroModal.init( {