@wordpress/interactivity
Advanced tools
@wordpress/interactivity - npm Package Compare versions
Comparing version 5.0.1 to 5.1.0
@@ -110,3 +110,3 @@ /* @jsx createElement */ | ||
| * ```html | ||
| * <div data-wp-interactive='{ "namespace": "messages" }'> | ||
| * <div data-wp-interactive="messages"> | ||
| * <button data-wp-alert="state.alert">Click me!</button> | ||
@@ -121,3 +121,3 @@ * </div> | ||
| * ```html | ||
| * <div data-wp-interactive='{ "namespace": "myblock" }'> | ||
| * <div data-wp-interactive="myblock"> | ||
| * <button | ||
@@ -124,0 +124,0 @@ * data-wp-color--text="state.text" |
@@ -11,3 +11,3 @@ /** | ||
| import { getScope, setScope, resetScope, getNamespace, setNamespace, resetNamespace } from './hooks'; | ||
| const isObject = item => !!item && typeof item === 'object' && !Array.isArray(item); | ||
| const isObject = item => item && typeof item === 'object' && item.constructor === Object; | ||
| const deepMerge = (target, source) => { | ||
@@ -185,3 +185,3 @@ if (isObject(target) && isObject(source)) { | ||
| * ```html | ||
| * <div data-wp-interactive='{ "namespace": "counter" }'> | ||
| * <div data-wp-interactive="counter"> | ||
| * <button | ||
@@ -188,0 +188,0 @@ * data-wp-text="state.double" |
@@ -110,3 +110,3 @@ /** | ||
| * ```html | ||
| * <div data-wp-interactive='{ "namespace": "messages" }'> | ||
| * <div data-wp-interactive="messages"> | ||
| * <button data-wp-alert="state.alert">Click me!</button> | ||
@@ -121,3 +121,3 @@ * </div> | ||
| * ```html | ||
| * <div data-wp-interactive='{ "namespace": "myblock" }'> | ||
| * <div data-wp-interactive="myblock"> | ||
| * <button | ||
@@ -124,0 +124,0 @@ * data-wp-color--text="state.text" |
@@ -66,3 +66,3 @@ export declare const stores: Map<any, any>; | ||
| * ```html | ||
| * <div data-wp-interactive='{ "namespace": "counter" }'> | ||
| * <div data-wp-interactive="counter"> | ||
| * <button | ||
@@ -69,0 +69,0 @@ * data-wp-text="state.double" |
@@ -126,3 +126,3 @@ "use strict"; | ||
| * ```html | ||
| * <div data-wp-interactive='{ "namespace": "messages" }'> | ||
| * <div data-wp-interactive="messages"> | ||
| * <button data-wp-alert="state.alert">Click me!</button> | ||
@@ -137,3 +137,3 @@ * </div> | ||
| * ```html | ||
| * <div data-wp-interactive='{ "namespace": "myblock" }'> | ||
| * <div data-wp-interactive="myblock"> | ||
| * <button | ||
@@ -140,0 +140,0 @@ * data-wp-color--text="state.text" |
@@ -20,3 +20,3 @@ "use strict"; | ||
| const isObject = item => !!item && typeof item === 'object' && !Array.isArray(item); | ||
| const isObject = item => item && typeof item === 'object' && item.constructor === Object; | ||
| const deepMerge = (target, source) => { | ||
@@ -195,3 +195,3 @@ if (isObject(target) && isObject(source)) { | ||
| * ```html | ||
| * <div data-wp-interactive='{ "namespace": "counter" }'> | ||
| * <div data-wp-interactive="counter"> | ||
| * <button | ||
@@ -198,0 +198,0 @@ * data-wp-text="state.double" |
@@ -5,2 +5,8 @@ <!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. --> | ||
| ## 5.1.0 (2024-02-21) | ||
| ### Bug Fixes | ||
| - Only add proxies to plain objects inside the store. ([#59039](https://github.com/WordPress/gutenberg/pull/59039)) | ||
| ## 5.0.0 (2024-02-09) | ||
@@ -7,0 +13,0 @@ |
@@ -54,3 +54,3 @@ # Getting started with the Interactivity API | ||
| #### A local WordPress installation | ||
| #### A local 6.5 WordPress installation | ||
@@ -61,6 +61,4 @@ You can use [the tools to set your local WordPress environment](https://developer.wordpress.org/block-editor/getting-started/devenv/#wordpress-development-site) you feel more comfortable with. | ||
| #### Latest vesion of Gutenberg | ||
| Interactivity API is included in Core in WordPress 6.5, for versions below, you'll need to have Gutenberg 17.5 or higher version installed and activated in your WordPress installation. | ||
| The Interactivity API is currently only available as an experimental feature from Gutenberg, so you'll need to have Gutenberg 17.5 or higher version installed and activated in your WordPress installation. | ||
| #### Node.js | ||
@@ -88,5 +86,5 @@ | ||
| ```html | ||
| <div data-wp-interactive='{ "namespace": "myPlugin" }'> | ||
| <div data-wp-interactive="myPlugin"> | ||
| <!-- Interactivity API zone --> | ||
| </div> | ||
| ``` |
@@ -50,3 +50,3 @@ # API Reference | ||
| <div | ||
| data-wp-interactive='{ "namespace": "myPlugin" }' | ||
| data-wp-interactive="myPlugin" | ||
| data-wp-context='{ "isOpen": false }' | ||
@@ -73,7 +73,7 @@ data-wp-watch="callbacks.logIsOpen" | ||
| With directives, we can directly manage behavior related to things such as side effects, state, event handlers, attributes or content. | ||
| With directives, we can directly manage interactions related to things such as side effects, state, event handlers, attributes or content. | ||
| #### `wp-interactive` | ||
| The `wp-interactive` directive "activates" the interactivity for the DOM element and its children through the Interactivity API (directives and store). It includes a namespace to reference a specific store. | ||
| The `wp-interactive` directive "activates" the interactivity for the DOM element and its children through the Interactivity API (directives and store). The directive includes a namespace to reference a specific store, that can be set as a `string` or an `object`. | ||
@@ -83,2 +83,13 @@ ```html | ||
| <div | ||
| data-wp-interactive="myPlugin" | ||
| data-wp-context='{ "myColor" : "red", "myBgColor": "yellow" }' | ||
| > | ||
| <p>I'm interactive now, <span data-wp-style--background-color="context.myBgColor">>and I can use directives!</span></p> | ||
| <div> | ||
| <p>I'm also interactive, <span data-wp-style--color="context.myColor">and I can also use directives!</span></p> | ||
| </div> | ||
| </div> | ||
| ```html | ||
| <!-- This is also valid --> | ||
| <div | ||
| data-wp-interactive='{ "namespace": "myPlugin" }' | ||
@@ -731,3 +742,3 @@ data-wp-context='{ "myColor" : "red", "myBgColor": "yellow" }' | ||
| ```html | ||
| <div data-wp-interactive='{ "namespace": "myPlugin" }'> | ||
| <div data-wp-interactive="myPlugin"> | ||
| <div data-bind--hidden="otherPlugin::!state.isPlaying" ... > | ||
@@ -913,11 +924,8 @@ <iframe ...></iframe> | ||
| > **Note** | ||
| > We will rename `wp_store` to `wp_initial_state` in a future version. | ||
| The state can also be initialized on the server using the `wp_interactivity_state()` function. You would typically do this in the `render.php` file of your block (the `render.php` templates were [introduced](https://make.wordpress.org/core/2022/10/12/block-api-changes-in-wordpress-6-1/) in WordPress 6.1). | ||
| The state can also be initialized on the server using the `wp_store()` function. You would typically do this in the `render.php` file of your block (the `render.php` templates were [introduced](https://make.wordpress.org/core/2022/10/12/block-api-changes-in-wordpress-6-1/) in WordPress 6.1). | ||
| The state defined on the server with `wp_interactivity_state()` gets merged with the stores defined in the view.js files. | ||
| The state defined on the server with `wp_store()` gets merged with the stores defined in the view.js files. | ||
| The `wp_interactivity_state` function receives two arguments, a `string` with the namespace that will be used as a reference and an [associative array](https://www.php.net/manual/en/language.types.array.php) containing the values. | ||
| The `wp_store` function receives an [associative array](https://www.php.net/manual/en/language.types.array.php) as a parameter. | ||
| _Example of store initialized from the server with a `state` = `{ someValue: 123 }`_ | ||
@@ -927,7 +935,5 @@ | ||
| // render.php | ||
| wp_store( array( | ||
| 'myPlugin' => array( | ||
| 'someValue' = 123 | ||
| ) | ||
| ); | ||
| wp_interactivity_state( 'myPlugin', array ( | ||
| 'someValue' => get_some_value() | ||
| )); | ||
| ``` | ||
@@ -939,5 +945,3 @@ | ||
| // render.php | ||
| wp_store( | ||
| array( | ||
| "favoriteMovies" => array( | ||
| wp_interactivity_state( 'favoriteMovies', array( | ||
| "1" => array( | ||
@@ -947,5 +951,3 @@ "id" => "123-abc", | ||
| ), | ||
| ), | ||
| ) | ||
| ); | ||
| ) ); | ||
| ``` | ||
@@ -952,0 +954,0 @@ |
| { | ||
| "name": "@wordpress/interactivity", | ||
| "version": "5.0.1", | ||
| "version": "5.1.0", | ||
| "description": "Package that provides a standard and simple way to handle the frontend interactivity of Gutenberg blocks.", | ||
@@ -36,3 +36,3 @@ "author": "The WordPress Contributors", | ||
| }, | ||
| "gitHead": "730beb7fd33d3382d6032c3f33e451625a0fcf36" | ||
| "gitHead": "c139588f4c668b38bafbc5431f2f4e3903dbe683" | ||
| } |
@@ -19,4 +19,4 @@ /** | ||
| const isObject = ( item: unknown ): boolean => | ||
| !! item && typeof item === 'object' && ! Array.isArray( item ); | ||
| const isObject = ( item: unknown ): item is Record< string, unknown > => | ||
| item && typeof item === 'object' && item.constructor === Object; | ||
@@ -239,3 +239,3 @@ const deepMerge = ( target: any, source: any ) => { | ||
| * ```html | ||
| * <div data-wp-interactive='{ "namespace": "counter" }'> | ||
| * <div data-wp-interactive="counter"> | ||
| * <button | ||
@@ -242,0 +242,0 @@ * data-wp-text="state.double" |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.02%
927054