Pinegrow Interactions in WordPress menus breaks the site

General Bug Reports
1

When I add an Interaction to an element inside a WordPress menu, I get the following error from WordPress.

image
image1512×394 37.9 KB

Apparently, WordPress doesn’t like the Pinegrow Interaction code in the PHP file

PG_Smart_Walker_Nav_Menu::$options['template'] = '<li class="group px-4 py-2 relative lg:focus-within:bg-gray-700 lg:focus-within:text-white lg:hover:bg-gray-700 lg:hover:text-white {CLASSES}" data-pg-ia='{"l":[{"trg":"mouseenter","t":"this","a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"scale":1},"e":"Power1.easeOut"},{"t":"tween","p":0,"d":0.5,"l":{"scale":1.2},"e":"Power1.easeOut"},{"t":"tween","p":0.5,"d":0.5,"l":{"scale":1},"e":"Power1.easeOut"}]}]}}]}' id="{ID}"><a class="cursor-default flex focus:underline items-center no-underline" {ATTRS}><span class="pr-1">{TITLE}</span></a>

Here is a sample project demonstrating the issue and an archive of the LocalWP site that I used for testing in the _LocalWP directory. The username / password for the LocalWP site are pinegrow / pinegrow.

2

@adamslowe thanks for the report! The problem happens because PG forgets to escape the quotes. I’ll fix that.

For now, a workaround is to define the animation on the Main Nav element and use Target to target the li.group.

Here is the code snippet:

<nav class="hidden w-full space-y-2 lg:flex lg:items-center lg:space-x-4 lg:space-y-0 lg:w-auto" data-pg-name="Main Nav" data-pg-ia='{"l":[{"trg":"mouseenter","a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"scale":1},"e":"Power1.easeOut"},{"t":"tween","p":0,"d":0.5,"l":{"scale":1.2},"e":"Power1.easeOut"},{"t":"tween","p":0.5,"d":0.5,"l":{"scale":1},"e":"Power1.easeOut"}]}]},"t":"li.group"}]}'>
    <ul class="flex flex-col font-light items-start text-gray-700 uppercase lg:flex-row lg:items-center" data-pg-name="Menu List" wp-nav-menu wp-nav-menu-theme-location="primary" wp-nav-menu-type="smart" wp-if-has-nav-menu="primary">
        <li class="group px-4 py-2 relative lg:focus-within:bg-gray-700 lg:focus-within:text-white lg:hover:bg-gray-700 lg:hover:text-white"><a class="cursor-default flex focus:underline items-center no-underline" href="#submenu-trigger"><span class="pr-1">Home</span></a>
        </li>
        <li role="group" class="focus-within:bg-gray-700 focus-within:text-white hover:bg-gray-700 hover:text-white px-4 py-2" cms-no-export>
            <a href="#" class="no-underline focus:underline hover:underline" role="menuitem">About</a>
        </li>
        <li role="group" class="focus-within:bg-gray-700 focus-within:text-white hover:bg-gray-700 hover:text-white px-4 py-2" cms-no-export>
            <a href="#" class="no-underline focus:underline hover:underline" role="menuitem">Features</a>
        </li>
        <li role="group" class="focus-within:bg-gray-700 focus-within:text-white hover:bg-gray-700 hover:text-white px-4 py-2" cms-no-export>
            <a href="#" class="no-underline focus:underline hover:underline" role="menuitem">Services</a>
        </li>
        <li role="group" class="focus-within:bg-gray-700 focus-within:text-white hover:bg-gray-700 hover:text-white px-4 py-2" cms-no-export>
            <a href="#" class="no-underline focus:underline hover:underline" role="menuitem">Contact</a>
        </li>
    </ul>
    <a href="#" class="inline-block px-5 py-2 text-white no-underline uppercase transition-all duration-200 ease-in-out bg-gray-600 rounded focus:bg-gray-900 focus:underline hover:bg-gray-900 hover:underline">Sign Up</a>
</nav>
1 Like
3

Awesome! I have a fully accessible and responsive menu with dropdowns in one of my real projects. Once we can get this and the nav walker thing sorted I’ll post a stripped down project for people to use as a model.

4 Likes