Interactivity outside blocks or as "standalone" (like Alpine.js)?

[Niq1982]

Was there any intentions to make Interactivity API work as "standalone", so you could use it just anywhere to build interactivity, like Alpine.js does really beautifully? Or to use it outside blocks? Now you can basically do nothing with it unless you set up a local environment and create&run a build process to get the store set up, which kinda rules out most of non-professionals building sites around the world. If you could create the store with it's functions within the html template, it would be easy not to just create interactivity to new projects, but also build stuff to older, non-block projects as well. Interactivity API could then potentially help to get rid of jQuery, since it would make even easier to build small JS interactions than it is with jQuery.

<div
    x-data="{
        search: '',
 
        items: ['foo', 'bar', 'baz'],
 
        get filteredItems() {
            return this.items.filter(
                i => i.startsWith(this.search)
            )
        }
    }"
>

Other IMO huge limiting issue is not to be able to run code or even set values on data-wp-on directive like <button data-wp-on--click="context.open = ?context.open">. Is there any plans to make this possible in the future?

[michalczaplinski]

Hi @Niq1982 👋

I'm not entirely sure if this is what you meant, but you can easily use Interactivity API "standalone" without even needing WordPress: https://stackblitz.com/edit/vitejs-vite-7kjzrb?file=index.html

You can use the @wordpress/interactivity in the same way as you would use Alpine.js. You could even import it as a JS module from a CDN without installing from NPM.

not to be able to run code or even set values on data-wp-on directive like . Is there any plans to make this possible in the future?

At the moment this is not planned, for a few reasons:

1. There is a potential for security risks with allowing JS expressions to be evaluated in the HTML attributes. It might be possible to define a "safe" subset of JS (like AMP did). This was not a priority for the initial release though.
2. It is preferred that that folks use the tools provided by the framework to accomplish their goals. Allowing arbitrary JS expressions to be evaluated might lead to folks (ab)using it to e.g. imperatively manipulate the DOM. So, by not allowing it it serves as a guardrail to encourages people to use the framework instead of relying on imperative JS APIs that they might already know.
3. And this is related to 2. When opening up the attributes to evaluate arbitrary JS expressions, there is potential for introducing performance regressions if people want to evaluate large expressions and we have to ship an "expression evaluator" to the frontend 🙂 .

[michalczaplinski]

There is no need for a build step to use the Interactivity API. Could you share an example of why this wasn't clear or why you thought that was the case? I want to make sure that this isn't misunderstood.

@alessandrotesoro Could you share a reproducible example of what you mean? I don't think the Interactivity API needs to "go through wp-scripts" in any way. If you are using WordPress 6.5 or later, then you can use the Interactivity API without installing it from npm. You also likely don't need to use wp-scripts if you are not building blocks...

There is an official template for wp-scripts that uses the Interactivity API:

@wordpress/create-block <your-block-name> --template @wordpress/create-block-interactive-template

If you look at the files it generates, there is no custom webpack config, nor the need to enqueue the API manually. Let me know if that clarifies anything, happy to help further.

[alessandrotesoro]

@michalczaplinski I understand that wp-scripts is not needed but the documentation here is misleading because it mentions wp-scripts.

[michalczaplinski]

Perhaps this could have been worded better. Instead of:

This process is often done automatically with tools like wp-scripts.

we could say:

If you are using tools like wp-scripts, this is already done automatically for you.

Does that make sense?

[louiswol94]

Does this demo still work?

[michalczaplinski]

yes, does it not work for you for some reason? If not, can you share what is not working?