Docs: Interactivity API - Add viewScriptModule as a requirement to wo…

…rk with the Interactivity API (#61355)

* add viewScriptModule as a requirement to work with the Interactivity API

* fix link docs-examples

* Update docs/reference-guides/interactivity-api/README.md

Co-authored-by: Jon Surrell <sirreal@users.noreply.github.com>

* More clear explanations and references added

* Update docs/reference-guides/interactivity-api/README.md

Co-authored-by: Jon Surrell <sirreal@users.noreply.github.com>

---------

Co-authored-by: Jon Surrell <sirreal@users.noreply.github.com>

docs/reference-guides/interactivity-api/README.md

@@ -19,36 +19,52 @@ Use the following links to locate the topic you're interested in. If you have ne
 - **[Requirements](#requirements-of-the-interactivity-api):** Check this section before you start creating your interactive blocks with the Interactivity API.
 - **[Quick Start Guide](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-quick-start-guide/):** Get a custom block using the Interactivity API up and running in less than one minute.
 - **[Tutorial: A first look at the Interactivity API](https://developer.wordpress.org/news/2024/04/11/a-first-look-at-the-interactivity-api/)** This article from the [WordPress Developer Blog](https://developer.wordpress.org/news/) is a great way to get introduced to the Interactivity API.
-- **[API Reference](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/):** To take a deep dive into how the API works internally, the list of Directives, and how Store works.
-- **[Docs and Examples](#docs--examples):** Additional resources to learn/read more about the Interactivity API.
+- **[API Reference](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/):** To take a deep dive into how the API works internally, the list of Directives, and how the Store works.
+- **[Docs and Examples](#docs-examples):** Additional resources to learn/read more about the Interactivity API.
 
 ## Requirements of the Interactivity API
 
 Interactivity API is included in Core in WordPress 6.5. For versions below, you'll need Gutenberg 17.5 or higher installed and activated in your WordPress installation.
 
 It’s also important to highlight that the block creation workflow doesn’t change, and all the [prerequisites](https://developer.wordpress.org/block-editor/getting-started/devenv/) remain the same. These include: 
 
-- [Code editor](https://developer.wordpress.org/block-editor/getting-started/devenv/#code-editor)
+- [Code Editor](https://developer.wordpress.org/block-editor/getting-started/devenv/#code-editor)
 - [Node.js development tools](https://developer.wordpress.org/block-editor/getting-started/devenv/#node-js-development-tools)
 - [Local WordPress environment (site)](https://developer.wordpress.org/block-editor/getting-started/devenv/#local-wordpress-environment)
 
-You can start creating interactions once you set up a block development environment and are running WordPress 6.5+ (or Gutenberg 17.5+).
+You can start creating interactions once you set up a block development environment and run WordPress 6.5+ (or Gutenberg 17.5+).
 
 ### Code requirements
 
 #### Add `interactivity` support to `block.json`
 
 To indicate that the block [supports](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) the Interactivity API features, add `"interactivity": true` to the `supports` attribute of the block's `block.json` file.
 
-```
+```json
+// block.json
 "supports": {
     "interactivity": true
 },
 ```
 
+Refer to the [`interactivity` support property docs](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity) to get a more detailed description of this property.
+
+#### Load Interactivity API Javascript code with `viewScriptModule`
+
+The Interactivity API provides the `@wordpress/interactivity` Script Module. JavaScript using the Interactivity API should be implemented as Script Modules so they can depend on `@wordpress/interactivity`. [Script Modules have been available since WordPress 6.5](https://make.wordpress.org/core/2024/03/04/script-modules-in-6-5/). Blocks can use [`viewScriptModule` [block metadata](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script-module) to enqueue their Script Modules easily:
+
+```json
+// block.json
+{
+   ...
+   "viewScriptModule": "file:./view.js"
+}
+```
+
 #### 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 DOM element in the block's `render.php` or `save.js` files. 
+
 
 
 ```html
@@ -57,6 +73,8 @@ To "activate" the Interactivity API in a DOM element (and its children), add the
 </div>
 ```
 
+Refer to the [`wp-interactive` documentation](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/#wp-interactive) for a more detailed description of this directive.
+
 ## Docs & Examples
 
 Here you have some more resources to learn/read more about the Interactivity API: