Interactivity APIは、WordPress 6.5で導入され、ブロックのフロントエンドにインタラクション (相互作用、交流) を追加する標準の方法を開発者に提供します。この API は多くの WordPress のコアブロック、検索、クエリ、ナビゲーション、ファイルなどでも使用されています。
この標準により開発者は、シンプルなカウンターやポップアップから、インスタントページナビゲーション、インスタント検索、ショッピングカート、チェックアウトなどの複雑な機能まで、リッチでインタラクティブなユーザー体験を簡単に作成できます。
ブロックはブロック間でデータ、アクション、コールバックを共有できます。これにより、ブロック間の対話がよりシンプルになり、エラーも起きにくくなります。例えば、「カートに追加」ブロックをクリックすると、別の「カート」ブロックをシームレスに更新できます。
Interactivity API の誕生については、オリジナルの提案を参照ください。また、merge のアナウンス、ステータス更新の投稿、公式の Trac チケット も参照してください。
Interactivity APIは、Version 6.5 から WordPress Core にバンドルされた
@wordpress/interactivity
パッケージでサポートされます。
Interactivity API ドキュメントの歩き方
以下のリンクを使用して、興味のあるトピックを探してみてください。これまでに Interactivity API を使用したことがなければ、以下のリソースを順番に読んでください。
- 要件: Interactivity API を使用してインタラクティブなブロックの作成を始める前に、このセクションを確認してください (後述)。
- クイックスタートガイド: Interactivity API を使用するカスタムブロックを1分で作成し、実行します。
- チュートリアル: はじめての Interactivity API: WordPress Developer Blogのこの記事は、Interactivity API の素晴らしい紹介記事です。
- コアコンセプト このセクションでは Interactive API 開発に関するコンセプトとメンタルモデルについて理解を深められます。
- API リファレンス: API が内部的にどのように動作するのか、ディレクティブのリスト、ストアがどのように動作するのかを深く掘り下げます。
- ドキュメントとサンプルプログラム: Interactivity API についてもっと学習するための追加の情報 (後述)。
Interactivity API をより深く理解したり、この標準に関する疑問への答えを見つけるには以下のリソースをチェックしてください。
- Interactivity API について: API のゴールと、ブロックへのインタラクティビティの追加に標準を使用する理由について、詳細を学びます。
- よくある質問: 背後にある技術と代替について、よくある質問に対する回答があります。
Interactivity API の要件
Interactivity API は WordPress 6.5 の Core に含まれています。それ以前のバージョンでは、Gutenberg 17.5 以上をインストールし、WordPress で有効化する必要があります。
また、ブロック作成のワークフローに変更はなく、すべての前提条件に変更がないことも強調しておきます。これには以下が含まれます。
ブロック開発環境をセットアップし、WordPress 6.5+ (または Gutenberg 17.5+) を実行すれば、インタラクションの作成を始められます。
コードの要件
プロジェクトへの interactivity
の追加
以下のコマンドでプロジェクトに Interactivity API をインストールします。
npm install @wordpress/interactivity --save
ストアを view.js
内にインポートします。詳細についてはストアのドキュメントを参照してください。
import { store } from '@wordpress/interactivity';
block.json
への interactivity
サポートの追加
ブロックが Interactivity API の機能をサポートしていることを示すには、ブロックの block.json
ファイルの supports
属性に "interactivity": true
を追加します。
// block.json
"supports": {
"interactivity": true
},
このプロパティの詳細については、interactivity
サポートプロパティのドキュメントを参照してください。
Interactivity API の JavaScript コードを viewScriptModule
で読み込み
Interactivity API は @wordpress/interactivity
スクリプトモジュールを提供します。Interactivity API を使用する JavaScript はスクリプトモジュールとして実装し、@wordpress/interactivity
に依存できるようにします。スクリプトモジュールは WordPress 6.5 から利用可能です。ブロックは viewScriptModule
ブロックメタデータ を使用して、簡単にスクリプトモジュールをエンキューできます。
// block.json
{
...
"viewScriptModule": "file:./view.js"
}
viewScriptModule
を使用するには、 wp-scripts
の build
と start
スクリプトの両方で --experimental-modules
フラグを設定して、スクリプトモジュールを正しくビルドする必要があります。
// package.json
{
"scripts": {
...
"build": "wp-scripts build --experimental-modules",
"start": "wp-scripts start --experimental-modules"
}
DOM 要素への wp-interactive
ディレクティブの追加
DOM 要素 (およびその子要素) で Interactivity API を「有効化」するには、ブロックの render.php
または save.js
ファイル内の DOM 要素に wp-interactive
ディレクティブを追加します。
<div data-wp-interactive="myPlugin">
<!-- Interactivity API zone -->
</div>
このディレクティブの詳細については、wp-interactive
のドキュメント を参照してください。
ドキュメントとサンプルプログラム
Interactivity API についてより詳細を知りたい方は、以下のリソースを参照してください。
- WordPress 6.5 Dev Note
- Merge アナウンスメント
- 提案: Interactivity API – インタラクティブなブロックを構築する際のより良い開発者エクスペリエンス
- Interactivity API ディスカッション、特に showcase ディスカッション
- wpmovies.dev デモとその wp-movies-demo リポジトリ
- block-development-examples の Interactivity API を使用したサンプルプログラム
Interactivity API ドキュメントに関連する作業の調整を簡素化のため、Tracking Issue がオープンされました:Documentation for the Interactivity API – Tracking Issue #53296 です。