From bde79dfd1314d134cc29a40ef1d27234ede35ce8 Mon Sep 17 00:00:00 2001 From: Renatho De Carli Rosa Date: Fri, 11 Oct 2024 16:11:30 -0300 Subject: [PATCH] Add the has-modal-open to the editor reproducing the same behavior of the frontend --- .../src/navigation/edit/index.js | 30 +++++++++++++++++-- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index ae7dd60bd0c5ba..3703f82af57fac 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -73,6 +73,30 @@ import AccessibleDescription from './accessible-description'; import AccessibleMenuDescription from './accessible-menu-description'; import { unlock } from '../../lock-unlock'; +// Custom hook for managing responsive menu state. +function useResponsiveMenu( navRef ) { + const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] = + useState( false ); + + useEffect( () => { + if ( ! navRef.current ) { + return; + } + + const htmlElement = navRef.current.closest( 'html' ); + + // Add a `has-modal-open` class to the when the responsive + // menu is open. This reproduces the same behavior of the frontend. + if ( isResponsiveMenuOpen ) { + htmlElement.classList.add( 'has-modal-open' ); + } else { + htmlElement.classList.remove( 'has-modal-open' ); + } + }, [ navRef, isResponsiveMenuOpen ] ); + + return [ isResponsiveMenuOpen, setResponsiveMenuVisibility ]; +} + function ColorTools( { textColor, setTextColor, @@ -284,8 +308,10 @@ function Navigation( { __unstableMarkNextChangeAsNotPersistent, } = useDispatch( blockEditorStore ); + const navRef = useRef(); + const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] = - useState( false ); + useResponsiveMenu( navRef ); const [ overlayMenuPreview, setOverlayMenuPreview ] = useState( false ); @@ -367,8 +393,6 @@ function Navigation( { __unstableMarkNextChangeAsNotPersistent, ] ); - const navRef = useRef(); - // The standard HTML5 tag for the block wrapper. const TagName = 'nav';