How to remove behaviors/actions associated with data-wp-on?

[daotw]

Hi,

How to remove behaviors associated with data-wp-on--mouseenter="actions.core.navigation.openMenuOnHover" and data-wp-on--mouseleave="actions.core.navigation.closeMenuOnHover"?

Snippet from one of my submenus:

<li data-wp-context="{ &quot;core&quot;: { &quot;navigation&quot;: { &quot;submenuOpenedBy&quot;: {}, &quot;type&quot;: &quot;submenu&quot; } } }" data-wp-effect="effects.core.navigation.initMenu" data-wp-interactive="" data-wp-on--focusout="actions.core.navigation.handleMenuFocusout" data-wp-on--keydown="actions.core.navigation.handleMenuKeydown" data-wp-on--mouseenter="actions.core.navigation.openMenuOnHover" data-wp-on--mouseleave="actions.core.navigation.closeMenuOnHover" tabindex="-1" class="wp-block-navigation-item has-child open-on-hover-click wp-block-navigation-submenu">...</li>

Interactivity API doc doesn't provide event name and reference function. I guessed mouseenter and openMenuOnHover, respectively, for using removeEventListener, but they seem to be wrong.

People may have the same question because Interactivity API doc doesn't provide the answer

A complete list of removing and adding "actions" reference guide is appreciated.

[luisherranz]

You can remove them in PHP using a render_block hook. Something like this (not tested):

add_filter( 'render_block_core/navigation', function( $content ){
  $p = new WP_HTML_Tag_Processor ( $content );
  if ( $p->next_tag( array( 'class_name' => 'wp-block-navigation-item' ) ) ) {
    $p->remove_attribute( 'data-wp-on--mouseenter' );
    $p->remove_attribute( 'data-wp-on--mouseleave' );
  }
  return $p->get_updated_html();
});

However, similar to what would happen with a removeEventListener, be aware that you might need to update your filter in the future if the position of the event listeners changes.

[luisherranz]

Could you share more details about why you need to add and remove an event listener conditionally?

---

By the way, we're also considering supporting multiple event listeners for the same event in the same element, so you can add additional event listeners without wiping the previous one:

add_filter( 'render_block_core/navigation', function( $content ){
  $p = new WP_HTML_Tag_Processor ( $content );
  if ( $p->next_tag( array( 'class_name' => 'wp-block-navigation-item' ) ) ) {
    // Add an additional event listener. The previous ones keep working.
    $p->set_attribute( 'data-wp-on--mouseenter--my-plugin', 'myPlugin::actions.someAction' );
  }
  return $p->get_updated_html();
});

[daotw]

To make a desktop-only multi-column mega menu, I need to remove data-wp-on and their associated JS from all non-top-level li.has-child while possibly preserving (adding back) them for mobile.

With JS, I removed data-wp-on desktop, but when viewport switched from desktop to mobile (and vice versa) a few times, hover behaviors of li.has-child kicked back in, regardless if data-wp-on are removed.

[luisherranz]

Ok, thanks. Just remove them from the HTML with PHP.

But again, be aware that the Navigation block (or any other interactive Core block) are not yet prepared to be extended, so things you do will be hacky and expected to break.

In the future, if people are interested in extending/modifying the default frontend behavior of Core blocks, we can look into official ways to do so that will be supported, documented and backward compatible.

[daotw]

Finally tried your PHP, no luck:

add_filter( 'render_block_core/navigation', function( $content ){
    $p = new WP_HTML_Tag_Processor ( $content );
    if ( $p->next_tag( array( 'class_name' => 'nav.main-navigation li.has-child li.has-child' ) ) ) {
        $p->remove_attribute( 'data-wp-on--mouseenter' );
        $p->remove_attribute( 'data-wp-on--mouseleave' );
    }
    return $p->get_updated_html();
});

The problem is likely my class name.

My current solution:

const secondLevelLIhasChild = document.querySelectorAll('nav.main-navigation li.has-child li.has-child');

secondLevelLIhasChild.forEach(element => {
    element.removeAttribute('data-wp-on--mouseenter');
    element.removeAttribute('data-wp-on--mouseleave');
});

[luisherranz]

You can't use selectors inside class_name, but in WP 6.5 there will be a new WP_HTML_Processor utility that has breadcrumbs, so maybe you can use that to inspect when a li is inside another li, and then check if it has the class has-child.