インタラクティビティAPIドキュメントのナビゲーション

興味のあるトピックを見つけるために、以下のリンクを使用してください。インタラクティビティAPIを初めて使用する場合は、以下のリソースをリストされた順序で読むことを検討してください。

  • 要件: インタラクティビティAPIを使用してインタラクティブブロックを作成する前に、このセクションを確認してください。
  • クイックスタートガイド: インタラクティビティAPIを使用してカスタムブロックを1分以内に立ち上げます。
  • チュートリアル: インタラクティビティAPIの初見 このWordPress開発者ブログの記事は、インタラクティビティAPIを紹介する素晴らしい方法です。
  • コア概念 このセクションからインタラクティビティAPI開発に関連する概念やメンタルモデルをよりよく理解します。
  • APIリファレンス: APIが内部でどのように機能するか、ディレクティブのリスト、ストアの機能について深く掘り下げます。
  • ドキュメントと例: インタラクティビティAPIについてさらに学ぶための追加リソース。

インタラクティビティAPIが何であるかをより深く理解したり、この標準に関する質問の答えを見つけたりするには、以下のリソースを確認してください:

  • インタラクティビティAPIについて: APIの目標や、ブロックにインタラクティビティを追加するための標準の使用理由について学びます。
  • よくある質問: 技術の背後にあるいくつかのよくある質問や代替手段に対する回答を見つけます。

インタラクティビティAPIの要件

インタラクティビティAPIは、WordPress 6.5のコアに含まれています。それより前のバージョンでは、WordPressインストールにGutenberg 17.5以上がインストールされ、アクティブ化されている必要があります。

ブロック作成のワークフローは変更されず、すべての前提条件は同じままであることを強調することも重要です。これには以下が含まれます:

ブロック開発環境を設定し、WordPress 6.5+（またはGutenberg 17.5+）を実行すると、インタラクションの作成を開始できます。

コード要件

プロジェクトにインタラクティビティを追加

次のコマンドを使用して、プロジェクトにインタラクティビティAPIをインストールします: 

  1. npm install @wordpress/interactivity --save

ストアをview.jsにインポートします。詳細については、ストアのドキュメントを参照してください。 

  1. import { store } from '@wordpress/interactivity';

block.jsonにインタラクティビティサポートを追加

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

  1. // block.json
  2. "supports": {
  3.    "interactivity": true
  4. },

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

viewScriptModuleでインタラクティビティAPIのJavaScriptコードを読み込む

インタラクティビティAPIは、@wordpress/interactivityスクリプトモジュールを提供します。インタラクティビティAPIを使用するJavaScriptは、@wordpress/interactivityに依存できるようにスクリプトモジュールとして実装する必要があります。スクリプトモジュールはWordPress 6.5以降で利用可能です。ブロックは、viewScriptModuleブロックメタデータを使用して、スクリプトモジュールを簡単にエンキューできます: 

  1. // block.json
  2. {
  3.    ...
  4.    "viewScriptModule": "file:./view.js"
  5. }
  3. ``````bash
  4. // package.json
  5. {
  6.    "scripts": {
  7.    ...
  8.    "build": "wp-scripts build --experimental-modules",
  9.    "start": "wp-scripts start --experimental-modules"
  10.    }
  11. `

DOM要素にwp-interactiveディレクティブを追加

DOM要素（およびその子要素）でインタラクティビティAPIを「アクティブ化」するには、ブロックのrender.phpまたはsave.jsファイルのDOM要素にwp-interactiveディレクティブを追加します。 

  1. <div data-wp-interactive="myPlugin">
  2.    <!-- Interactivity API zone -->
  3. </div>

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

ドキュメントと例

インタラクティビティAPIについてさらに学ぶためのリソースをいくつか紹介します: