Skip to content

Commit

Permalink
Docs: Interactivity Api - Small fixes (WordPress#61403)
Browse files Browse the repository at this point in the history
* small markdown fix

* minor fixes
  • Loading branch information
juanmaguitar authored May 6, 2024
1 parent 2df24b3 commit c889c51
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 6 deletions.
5 changes: 3 additions & 2 deletions docs/reference-guides/interactivity-api/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Blocks can share data, actions, and callbacks between them. This makes communica
For more information about the genesis of the Interactivity API, check out the [original proposal](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/). You can also review the [merge announcement](https://make.wordpress.org/core/2024/02/19/merge-announcement-interactivity-api/), the [status update post](https://make.wordpress.org/core/2023/08/15/status-update-on-the-interactivity-api/), and the official [Trac ticket](https://core.trac.wordpress.org/ticket/60356).

<div class="callout callout-info">
The Interactivity API is supported by the package <code>@wordpress/interactivity</code> which is bundled in WordPress Core from v6.5
The Interactivity API is supported by the package <a href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/"><code>@wordpress/interactivity</code></a> which is bundled in WordPress Core from v6.5
</div>

## Navigating the Interactivity API docs
Expand All @@ -23,6 +23,7 @@ Use the following links to locate the topic you're interested in. If you have ne
- **[Docs and Examples](#docs-examples):** Additional resources to learn/read more about the Interactivity API.

To get a deeper understanding of what the Interactivity API is or find answers to questions you may have about this standard, check the following resources:

- **[About the Interactivity API](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-about/):** To learn more about the API Goals and the reasoning behind the use of a standard to add interactivity to blocks.
- **[Frequently Asked Questions](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-faq/):** To find responses to some frequently asked questions about the technology behind and alternatives.

Expand Down Expand Up @@ -56,7 +57,7 @@ Refer to the [`interactivity` support property docs](https://developer.wordpress

#### 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:
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
Expand Down
4 changes: 2 additions & 2 deletions docs/reference-guides/interactivity-api/iapi-about.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# About the Interactivity API

The Interactivity API is **a standard system of directives, based on declarative code, for adding frontend interactivity to blocks**.
The Interactivity API is **a [standard](#why-a-standard) system of [directives](#why-directives), based on declarative code, for [adding frontend interactivity to blocks](#api-goals)**.

**Directives extend HTML with special attributes** that tell the Interactivity API to attach a specified behavior to a DOM element or even to transform it. For those familiar with [Alpine.js](https://alpinejs.dev/), it’s a similar approach but explicitly designed to work seamlessly with WordPress.

Expand Down Expand Up @@ -72,7 +72,7 @@ The Interactivity API pipeline promotes **progressive enhancement** by building
For example, blocks with directives can coexist with other (interactive or non-interactive) blocks. This means that if there are other blocks on the page using other frameworks like jQuery, everything will work as expected.

<div class="callout callout-warning">
Full-page client-side navigation will be an exception to this compatibility with other libraries rule. See <a href="#client-side-navigation">Client-side navigation</a> for more details.
Full-page client-side navigation with the Interactivity API will be an exception to this compatibility with other libraries rule. See <a href="#client-side-navigation">Client-side navigation</a> for more details.
</div>

### Declarative and reactive
Expand Down
4 changes: 2 additions & 2 deletions docs/reference-guides/interactivity-api/iapi-faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -112,11 +112,11 @@ wp_interactivity_state( 'favoriteMovies', array(
```

A translation API compatible with script modules (needed for the Interactivity API) is
currently being worked on. Check https://core.trac.wordpress.org/ticket/60234 to follow the progress on this work.
currently being worked on. Check [#60234](https://core.trac.wordpress.org/ticket/60234) to follow the progress on this work.

## I’m concerned about XSS; can JavaScript be injected into directives?

No. The Interactivity API only allows for [References](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/#references) to be passed as values to the directives. This way, there is no need to eval() full JavaScript expressions, so it’s not possible to perform XSS attacks.
No. The Interactivity API only allows for [References](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/#values-of-directives-are-references-to-store-properties) to be passed as values to the directives. This way, there is no need to eval() full JavaScript expressions, so it’s not possible to perform XSS attacks.

## Does this work with Custom Security Policies?

Expand Down

0 comments on commit c889c51

Please sign in to comment.