Skip to content

Commit

Permalink
Add note about iAPI in interactive-blocks-demos-99def1
Browse files Browse the repository at this point in the history
  • Loading branch information
@juanmaguitar
juanmaguitar committed Jan 22, 2025
1 parent 1664c6d commit 59ac39a
Showing 1 changed file with 12 additions and 3 deletions.
15 changes: 12 additions & 3 deletions plugins/interactive-blocks-demos-99def1/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# Interactive Blocks Demos

These examples show the use of the [Interactivity API](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/) in Blocks via the [`@wordpress/interactivity` package](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/)

> [!IMPORTANT]
> WordPress now provides an [Interactivity API](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/), the official a recommended way to add interactivity in the Frontend for WordPress sites. Check the [Interactive Block using Interactivity API example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-block-833d15)
>
> To better understand the benefits of using the Interactivity API versus other aporoaches you can check the docs [About the Interactivity API](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-about) and [Frequently Asked Questions](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-faq/)
The goal of this example is to showcase the use of different ways of creating interactive blocks in [Gutenberg](https://github.com/WordPress/gutenberg).

This example shows how to add interactivity to a block using:
Expand All @@ -14,9 +21,11 @@ _This example has been adapted from [the original one](https://github.com/wptrai

<!-- Please, do not remove these @TABLE EXAMPLES BEGIN and @TABLE EXAMPLES END comments or modify the table inside. This table is automatically generated from the data at _data/examples.json and _data/tags.json -->
<!-- @TABLE EXAMPLES BEGIN -->
| Example | <span style="display: inline-block; width:250px">Description</span> | Tags |Download .zip | Live Demo |
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Interactive Blocks](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactive-blocks-demos-99def1) | Collection of examples showing how to create blocks with interactive features and client-side functionality. | <small><code><a href="https://WordPress.github.io/block-development-examples/?tags=interactive-block">interactive-block</a></code></small> <small><code><a href="https://WordPress.github.io/block-development-examples/?tags=multi-block">multi-block</a></code></small> | [📦](https://github.com/WordPress/block-development-examples/releases/download/latest/interactive-blocks-demos-99def1.zip "Install the plugin on any WordPress site using this zip and activate it to see the example in action") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/interactive-blocks-demos-99def1/_playground/blueprint.json "Click here to access a live demo of this example" ) |

| Example | <span style="display: inline-block; width:250px">Description</span> | Tags | Download .zip | Live Demo |
| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Interactive Blocks](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactive-blocks-demos-99def1) | Collection of examples showing how to create blocks with interactive features and client-side functionality. | <small><code><a href="https://WordPress.github.io/block-development-examples/?tags=interactive-block">interactive-block</a></code></small> <small><code><a href="https://WordPress.github.io/block-development-examples/?tags=multi-block">multi-block</a></code></small> | [📦](https://github.com/WordPress/block-development-examples/releases/download/latest/interactive-blocks-demos-99def1.zip 'Install the plugin on any WordPress site using this zip and activate it to see the example in action') | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/interactive-blocks-demos-99def1/_playground/blueprint.json 'Click here to access a live demo of this example') |

<!-- @TABLE EXAMPLES END -->

## Understanding the Example Code
Expand Down

0 comments on commit 59ac39a

Please sign in to comment.