Interactivity API リファレンス

Topics

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 の素晴らしい紹介記事です。
  • API リファレンス: API が内部的にどのように動作するのか、ディレクティブのリスト、ストアがどのように動作するのかを深く掘り下げます。
  • ドキュメントとサンプルプログラム: Interactivity API についてもっと学習するための追加の情報 (後述)。

Interactivity API をより深く理解したり、この標準に関する疑問への答えを見つけるには以下のリソースをチェックしてください。

  • Interactivity API について: API のゴールと、ブロックへのインタラクティビティの追加に、標準を使用する理由について、詳細を学びます。
  • よくある質問: 背後にある技術と代替について、よくある質問に対する回答があります。

Top ↑

Interactivity API の要件

Interactivity API は WordPress 6.5 の Core に含まれています。それ以前のバージョンでは、Gutenberg 17.5 以上をインストールし、WordPress で有効化する必要があります。

また、ブロック作成のワークフローに変更はなく、すべての前提条件に変更がないことも強調しておきます。これには以下が含まれます。

ブロック開発環境をセットアップし、WordPress 6.5+ (または Gutenberg 17.5+) を実行すれば、インタラクションの作成を始められます。

Top ↑

コードの要件

Top ↑

block.json への interactivity サポートの追加

ブロックが Interactivity API の機能をサポートしていることを示すには、ブロックの block.json ファイルの supports 属性に "interactivity": true を追加します。

// block.json
"supports": {
    "interactivity": true
},

このプロパティの詳細については、interactivity サポートプロパティのドキュメントを参照してください。

Top ↑

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"
	}

Top ↑

DOM 要素への wp-interactive ディレクティブの追加

DOM 要素 (およびその子要素) で Interactivity API を「有効化」するには、ブロックの render.php または save.js ファイル内の DOM 要素に wp-interactive ディレクティブを追加します。

<div data-wp-interactive="myPlugin">
    <!-- Interactivity API zone -->
</div>

このディレクティブの詳細については、wp-interactive のドキュメント を参照してください。

Top ↑

ドキュメントとサンプルプログラム

Interactivity API についてより詳細を知りたい方は、以下のリソースを参照してください。

Interactivity API ドキュメントに関連する作業の調整を簡素化のため、Tracking Issue がオープンされました：Documentation for the Interactivity API – Tracking Issue #53296 です。

原文

最終更新日: