Make submenus declarative

WordPress · Jan 8, 2024 · 762b3b9 · 762b3b9
1 parent 3b84e7d
commit 762b3b9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 35 deletions.
diff --git a/src/wp-content/themes/twentytwentyone/assets/js/interactivity.js b/src/wp-content/themes/twentytwentyone/assets/js/interactivity.js
@@ -3,26 +3,18 @@
  */
 import { store, getContext, getElement } from '@wordpress/interactivity';
 
-function checkClass( element, className ) {
-    if ( element.classList.contains( className ) ) {
-        return element;
-    }
-    if ( element.parentElement && element.parentElement.classList.contains( className ) ) {
-        return element.parentElement;
-    }
-    if ( element.parentElement.parentElement && element.parentElement.parentElement.classList.contains( className ) ) {
-        return element.parentElement.parentElement;
-    }
-    return null;
-}
-
 const { state, actions } = store( 'twentytwentyone', {
     state: {
         isPrimaryMenuOpen: false,
         windowWidth: 0,
         prevScroll: 0,
         isDarkMode: false,
         isDarkModeTogglerHidden: false,
+        get isSubmenuOpened() {
+            const { ref } = getElement();
+            const { activeSubmenu } = getContext();
+            return !! activeSubmenu && ref === activeSubmenu;
+        },
     },
     actions: {
         togglePrimaryMenu: () => {
@@ -37,6 +29,12 @@ const { state, actions } = store( 'twentytwentyone', {
             state.isPrimaryMenuOpen = false;
         },
 
+        toggleSubmenu: () => {
+            const { ref } = getElement();
+            const ctx = getContext();
+            ctx.activeSubmenu = ctx.activeSubmenu === ref ? null : ref;
+        },
+
         toggleDarkMode: () => {
             state.isDarkMode = ! state.isDarkMode;
             window.localStorage.setItem( 'twentytwentyoneDarkMode', state.isDarkMode ? 'yes' : 'no' );
@@ -85,25 +83,9 @@ const { state, actions } = store( 'twentytwentyone', {
             }
         },
 
-        listenToSpecialClicks: ( event ) => {
-            const ctx = getContext();
-
-            // Check if this was a `.sub-menu-toggle` click.
-            const subMenuToggle = checkClass( event.target, 'sub-menu-toggle' );
-            if ( subMenuToggle ) {
-                if ( ctx.activeSubmenu === subMenuToggle ) {
-                    ctx.activeSubmenu = null;
-                } else {
-                    ctx.activeSubmenu = subMenuToggle;
-                }
-                return;
-            }
-
-            // Otherwise, check if this was an anchor link click.
-            if ( ! event.target.hash ) {
-                return;
-            }
-
+        listenToHashClicks: ( event ) => {
+            // If this is a hash, close the menu and scroll it into view.
+            if ( event.target.hash ) {
                 actions.closePrimaryMenu();
 
                 // Wait 550 and scroll to the anchor.
@@ -113,6 +95,7 @@ const { state, actions } = store( 'twentytwentyone', {
                         anchor.scrollIntoView();
                     }
                 }, 550 );
+            }
         },
     },
     callbacks: {

diff --git a/src/wp-content/themes/twentytwentyone/inc/menu-functions.php b/src/wp-content/themes/twentytwentyone/inc/menu-functions.php
@@ -29,7 +29,7 @@ function twenty_twenty_one_add_sub_menu_toggle( $output, $item, $depth, $args )
 
 		// Extra attributes depending on whether or not the Interactivity API is being used.
 		if ( function_exists( 'gutenberg_register_module' ) ) {
-			$extra_attr = '';
+			$extra_attr = 'data-wp-on--click="actions.toggleSubmenu" data-wp-bind--aria-expanded="state.isSubmenuOpened"';
 		} else {
 			$extra_attr = ' onClick="twentytwentyoneExpandSubMenu(this)"';
 		}

diff --git a/src/wp-content/themes/twentytwentyone/template-parts/header/site-nav.php b/src/wp-content/themes/twentytwentyone/template-parts/header/site-nav.php
@@ -14,11 +14,10 @@
 		id="site-navigation"
 		class="primary-navigation"
 		aria-label="<?php esc_attr_e( 'Primary menu', 'twentytwentyone' ); ?>"
-		data-wp-on--click="actions.listenToSpecialClicks"
+		data-wp-on--click="actions.listenToHashClicks"
 		data-wp-on--keydown="actions.trapFocusInModal"
 		data-wp-context='{"firstFocusable": null, "lastFocusable": null, "activeSubmenu": null}'
 		data-wp-watch--focusable="callbacks.determineFocusableElements"
-		data-wp-watch--submenus="callbacks.refreshSubmenus"
 	>
 		<div class="menu-button-container">
 			<button