Docs: Interactivity API - Add viewScriptModule as a requirement to work with the Interactivity API #61355
Conversation
juanmaguitar
requested review from
ajitbohra,
ryanwelcher,
fabiankaegy and
ndiego
as code owners
juanmaguitar
added
[Type] Developer Documentation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
| #### Add `wp-interactive` directive to a DOM element | ||
|
|
||
| To "activate" the Interactivity API in a DOM element (and its children), add the [`wp-interactive`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-reference/#wp-interactive) directive to the element in the block's `render.php` or `save.js` files. | ||
| To "activate" the Interactivity API in a DOM element (and its children), add the [`wp-interactive`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-reference/#wp-interactive) directive to the element in the block's `render.php` or `save.js` files. Its value must be the unique namespace of your plugin or block: |
There was a problem hiding this comment.
I'm not sure this is accurate. The namespace is an Interactivity API concept. It may match your plugin or block name. Or you may develop a plugin that shares the same namespace across many blocks.
I want to make sure we're not conflating a block name with an Interactivity API store - the namespaces are really about the stores and don't technically have anything to do with block names. They're unique store identifiers.
There was a problem hiding this comment.
Thanks for the explanation, @sirreal.
Can this directive be used without a value?
Example:
<div data-wp-interactive>
<!-- Interactivity API zone -->
</div>
Is there any way directives can specify the store they want to use for a specific callback (on a directive level)?
There was a problem hiding this comment.
Yes!
I just did some testing and it looks like data-wp-interactive is sufficient to recognize an interactive region.
Other stores can be accessed by prefixing the directive values with namespace:: like this: interactiveNamespace::state.whatever. So if you have another store like store( "otherNS", { state: { title: "Hello" } } ) you could do this:
<div data-wp-interactive>
<h1 data-wp-text="otherNS::state.title"></h1>
</div>I went to this page to look it up: https://make.wordpress.org/core/2024/03/04/interactivity-api-dev-note/
I think the section "Working with other namespaces" should have described this but it looks like had some of the code samples broken. FYI @cbravobernal (I think the syntaxhighlighter block breaks HTML fairly often and it may be better to use the code block).
There was a problem hiding this comment.
Oks, I have removed the part about "Its value must be the unique namespace of your plugin or block:" as it's confusing and it seems too specific for these introductory steps.
Any additional explanations and clarifications should be added to the wp-interactive documentation
Co-authored-by: Jon Surrell <sirreal@users.noreply.github.com>
Co-authored-by: Jon Surrell <sirreal@users.noreply.github.com>
What?
Add viewScriptModule as a requirement to work with the Interactivity API
Why?
Because it's currently a critical requirement and is not properly reflected in the docs.