Query Filter: Update to match new Interactivity API format

[ryelle]

There have been multiple changes to the Interactivity API since it was first used in the Query Filter blocks.

• The view scripts must be modules now (see Tools: Update packages, use wp-scripts for build process #562), and are registered to WordPress with a new viewModule property in block.json (this will probably change to viewScriptModule soon, but both will continue to work).
• The method for registering context & namespaces has changed, which means the hierarchy of data registered in the store() call is different, and the paths to data are updated— ex, effects.wporg.queryFilter.init is now effects.init.
• Functions in the store don't get the store/context/ref, so these needed to be refactored to have access to the getContext function.
• data-wp-effect is now data-wp-watch

See WordPress/gutenberg#52906 (comment), WordPress/gutenberg#57492.

Important

This requires a solution that lets us update Gutenberg to 17.5+ (for the viewModule registration), without breaking the Support Forums— like #561

To test

1. Update node, deps, and build the project (see Tools: Update packages, use wp-scripts for build process #562 for instructions)
2. Test with Showcase or Events, make sure the version of Gutenberg is up to date (see also Site Screenshot block: Update to support latest Interactivity API wporg-showcase-2022#268)
3. Try using the filters- select items and applying should work
4. Keyboard nav should work- open a filter with space or enter, tab through, select some items, apply or use escape to close the dropdown

[ryelle]

The module build is not compatible with importing from other @wordpress/* packages, trying was giving me this error:

Module not found: Error: Attempted to use WordPress script in a module: @wordpress/i18n, which is not supported yet.

The workaround is to pass the label as a data attribute on the element from render.php. I don't think we'll need to do this forever, as this is currently being iterated on.

[adamwoodnz]

Got this working after some considerable config!

I needed to use WordPress/wporg-showcase-2022#268 and Gutenberg 17.5.2 (latest).

Filters work for me, I didn't test the screenshots specifically, but the errors went away after I updated Node and rebuilt everything.

The Interactivity API changes look ok to me but I'm still not familiar with the API at this stage.

Haven't tested with Events.

[iandunn]

I tested the built files with Gutenberg 17.5.3 on my events.wordpress.org sandbox (w.org, not local). Everything looks good 👍🏻