diff --git a/packages/interactivity/docs/2-api-reference.md b/packages/interactivity/docs/2-api-reference.md
index 03e9918efec36b..63e2ef03291711 100644
--- a/packages/interactivity/docs/2-api-reference.md
+++ b/packages/interactivity/docs/2-api-reference.md
@@ -50,7 +50,7 @@ With directives we can manage directly in the DOM behavior related to things suc
The `wp-interactive` "activates" hydration for the DOM element and its children through the Interactivity API (directives and store).
> **Note**
-> The use of `wp-interactive` is a requirement for the Intereactivity API "engine" to work. We have not added the `wp-interactive` to the following examples for the sake of simplicity
+> The use of `wp-interactive` is a requirement for the Interactivity API "engine" to work. In the following examples the `wp-interactive` has not been added for the sake of simplicity
#### `wp-context` ![](https://img.shields.io/badge/STATE-207399.svg)
@@ -69,17 +69,23 @@ _Example of `wp-context` directive_
>
```
+
+
+ See store used with the directive above
+
```js
-// store used with the directive above
store( {
- actions: {
+ actions: {
logId: ( { context } ) => {
console.log( context.post.id );
},
- },
+ },
} );
```
+
+
+
Different contexts can be defined at different levels and deeper levels will merge their own context with any parent one:
```html
@@ -120,8 +126,10 @@ _Example of `wp-bind` directive_
```
+
+ See store used with the directive above
+
```js
-// store used with the directive above
store( {
actions: {
toggleMenu: ( { context } ) => ! context.isMenuOpen,
@@ -129,6 +137,9 @@ store( {
} );
```
+
+
+
The `wp-bind` directive is executed:
- when the element is created
- each time there's a change on any of the properties of the `state` or `context` involved on getting the final value of the directive (inside the callback or the expression passed as reference)
@@ -170,17 +181,22 @@ _Example of `wp-class` directive_
```
+
+ See store used with the directive above
+
```js
-// store used with the directive above
store( {
- actions: {
- toggleSelection: ( { context } ) => {
- context.isSelected = !context.isSelected
- }
- }
+ actions: {
+ toggleSelection: ( { context } ) => {
+ context.isSelected = !context.isSelected
+ }
+ }
} );
```
+
+
+
The `wp-class` directive is executed:
- when the element is created
- each time there's a change on any of the properties of the `state` or `context` involved on getting the final value of the directive (inside the callback or the expression passed as reference)
@@ -205,8 +221,10 @@ _Example of `wp-style` directive_
>
```
+
+ See store used with the directive above
+
```js
-// store used with the directive above
store( {
actions: {
toggleContextColor: ( { context } ) => {
@@ -216,6 +234,9 @@ store( {
} );
```
+
+
+
The `wp-style` directive is executed:
- when the element is created
- each time there's a change on any of the properties of the `state` or `context` involved on getting the final value of the directive (inside the callback or the expression passed as reference)
@@ -243,17 +264,22 @@ It sets the inner text of an HTML element.
```
+
+ See store used with the directive above
+
```js
-// store used with the directive above
store( {
- actions: {
+ actions: {
toggleContextText: ( { context } ) => {
context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1';
},
- },
+ },
} );
```
+
+
+
The `wp-text` directive is executed:
- when the element is created
- each time there's a change on any of the properties of the `state` or `context` involved on getting the final value of the directive (inside the callback or the expression passed as reference)
@@ -273,15 +299,20 @@ _Example of `wp-context` directive_
```
+
+ See store used with the directive above
+
```js
-// store used with the directive above
store( {
- actions: {
- logTime: () => console.log( new Date() ),
- },
+ actions: {
+ logTime: () => console.log( new Date() ),
+ },
} );
```
+
+
+
The `wp-on` directive is executed each time the associated event is triggered.
The callback passed as reference receives [the event](https://developer.mozilla.org/en-US/docs/Web/API/Event) (`event`) and the returned value by this callback is ignored.
@@ -304,8 +335,10 @@ _Example of `wp-on` directive_
```
+
+ See store used with the directive above
+
```js
-// store used with the directive above
store( {
actions: {
increaseCounter: ({ context }) => {
@@ -315,12 +348,15 @@ store( {
context.counter--;
},
}
- effects: {
- logCounter: ({ context }) => console.log("Counter is " + context.myNamespace.counter + " at " + new Date() ),
- },
+ effects: {
+ logCounter: ({ context }) => console.log("Counter is " + context.myNamespace.counter + " at " + new Date() ),
+ },
} );
```
+
+
+
The `wp-effect` directive is executed:
- when the element is created
- each time there's a change on any of the properties of the `state` or `context` involved on getting the final value of the directive (inside the callback or the expression passed as reference)
@@ -355,17 +391,23 @@ _Example of several `wp-init` directives on the same DOM element_
```
+
+ See store used with the directive above
+
```js
-// store used with the directive above
store( {
- effects: {
+ effects: {
logTimeInit: () => console.log( `Init at ` + new Date() ),
focusFirstElement: ( { ref } ) =>
ref.querySelector( 'input:first-child' ).focus(),
- },
+ },
} );
```
+
+
+
+
The `wp-init` can return a function. If it does, the returned function will run when the element is removed from the DOM.
### Values of directives are references to properties