navigation - Off-Canvas Menu Toggle Issue After WordPress Core Update

admin管理员组

文章数量:1122832

After a recent WordPress update, I've encountered an issue with the toggle functionality of my off-canvas navigation menu. I'm using my custom-built theme, built on Twenty Twenty Three theme. The button is supposed to add and remove the is-open class when clicked, to open and close the menu. However, after the update, the class is not removed on the second click, which prevents the menu from closing.

Native behaviour of the menu from Wordpress is designed in a way to provide two buttons: one for opening the menu and the second for closing it. I hid the closing button and only kept the opening button. Mostly to have an animation of the hamberger icon into the X (you can see it on the website: ).

Here's the behavior I expect:

1. Clicking the button adds the is-open class to it, and the menu opens.
2. Clicking the button again should remove the is-open class, and the menu should close.

Here's the current behavior:

1. Clicking the button adds the is-open class to it, and the menu opens.
2. Clicking the button again does nothing; the is-open class remains, and the menu stays open.

I suspect there's a conflict with a core WordPress script related to navigation, but I haven't been able to pinpoint the exact cause or find a workaround.

In a previous version of WordPress I managed to dequeue the following file, and that made the trick - everything worked correctly:

// Removing the js interfeering with navigation button
function my_dequeue_scripts() {
    wp_dequeue_script('wp-block-navigation-view');  // The handle
    wp_deregister_script('wp-block-navigation-view');  // Optional: deregister the script
}
add_action('wp_print_scripts', 'my_dequeue_scripts', 100);

Here is the JavaScript I use for the toggle functionality and animation:

/*--------------------------------------------------------------
## Header Off Canvas Menu
--------------------------------------------------------------*/
document.addEventListener("DOMContentLoaded", function() {
  const menuButton = document.querySelector('.wp-block-navigation__responsive-container-open');
  const navContainer = document.querySelector('.wp-block-navigation__responsive-container');
  const menuItems = document.querySelectorAll('#modal-1 .wp-block-navigation-item');

  // Function to create and animate the menu background
  function createMenuBackground() {
      const bgWrapper = document.createElement('div');
      bgWrapper.className = 'menu-bg-wrapper';
      bgWrapper.style.position = 'absolute';
      bgWrapper.style.top = '0';
      bgWrapper.style.left = '0';
      bgWrapper.style.width = '100%';
      bgWrapper.style.height = '100%';
      bgWrapper.style.overflow = 'hidden';
      bgWrapper.style.zIndex = '1'; // Ensure it's below the menu items

      navContainer.insertBefore(bgWrapper, navContainer.firstChild); // Insert at the beginning of navContainer

      for (let i = 0; i < 12; i++) {
          const column = document.createElement('div');
          column.style.position = 'absolute';
          column.style.top = '0';
          column.style.left = `${8.33 * i}%`;
          column.style.width = '8.33%';
          column.style.height = '0';
          column.style.background = 'var(--wp--preset--gradient--primary)';
          column.style.borderRight = 'solid 1px var(--primary-halftrans)';
          bgWrapper.appendChild(column);

          gsap.to(column, {
              height: '100%',
              duration: .5,
              ease: "power2.inOut",
              delay: i * 0.05,
          });
      };
  };

  // Function to remove the menu background with animation
  function removeMenuBackground() {
      const bgWrapper = document.querySelector('.menu-bg-wrapper');
      if (bgWrapper) {
          gsap.to(bgWrapper.children, {
              height: 0,
              duration: .5,
              ease: "power2.inOut",
              stagger: 0.05,
              onComplete: () => bgWrapper.remove()
          });
      }
  }

  // Function to animate menu items
  function animateMenuItems(show = true) {
      if (show) {
          menuItems.forEach((item, index) => {
              gsap.fromTo(item,
                  { autoAlpha: 0, y: -50 },
                  {
                      duration: 0.5,
                      autoAlpha: 1,
                      y: 0,
                      ease: "back.out(1.7)",
                      delay: index * 0.1 // stagger the animation
                  }
              );
          });
      } else {
          gsap.to(menuItems, {
              duration: 0.5,
              autoAlpha: 0,
              y: -50,
              ease: "back.in(1.7)",
              stagger: 0.1, // stagger the reverse animation
              onComplete: () => {
                  navContainer.classList.remove('is-menu-open', 'has-modal-open');
                  menuButton.classList.remove('is-open');
                  document.documentElement.classList.remove('has-modal-open');
                  //document.querySelector('header').style.position = ''; // Reset header position after animation completes
              }
          });
      }
  }

  menuButton.addEventListener('click', function() {
      const isOpen = navContainer.classList.contains('is-menu-open');

      if (!isOpen) {
          navContainer.classList.add('is-menu-open', 'has-modal-open');
          menuButton.classList.add('is-open');
          document.documentElement.classList.add('has-modal-open');
          //document.querySelector('header').style.position = 'fixed';

          createMenuBackground();
          animateMenuItems(true);
      } else {
          // Delay the removal of the background to synchronize with menu item animation
          animateMenuItems(false);
          setTimeout(removeMenuBackground, 100); // Adjust timeout as necessary
      }
  });
});

I tried:

1. To find the right handle to dequeue the script (view.min.js), but without any success.
2. I've tried using event.stopPropagation() in the event handler, but it hasn't resolved the issue.
3. I can use the native functionality (with two buttons), but then I would have to modify the current structure and adjust it somehow for the animation I'm using (GSAP).

Probably I'm missing something super obvious.

本文标签： navigationOffCanvas Menu Toggle Issue After WordPress Core Update