目次
Interactive APIとは
まず、Interactive APIとはどのようなものかというと、Interactive APIはWPブロック開発におけるフロントエンド側のブロック間のやり取り（interaction）の標準を提供するAPIです。
これだけで説明しても理解しにくいですが、例えば、フルサイトエディティング（以降：FSE）で制作されたECサイトの以下の例をを考えてください。
ECサイトの製品一覧ページにハートの形の気に入りボタンが付いている製品のカードのブロック（コンポーネント）とサイトのヘッダーに気に入りの件数を表示するブロック（コンポーネント）があると想定します。カードにおけるボタンをクリックすると、そのハートの背景色が変わり、そして、件数を表示するブロックにおける数字が自動的に変る処理をJSで実装したいとき、今までWPではその決まった方法がなく、開発者のやり方はバラバラでした。しかし、Interactive APIの導入でその処理用のview.jsのファイルを使い、標準に則って処理を行うようになります。
Interactive APIを導入する条件
Interactive APIはWP6.5で導入された機能のため、当然にそれ以降のWPのバージョンではないと導入できない機能です。但し、古いバージョンだと絶対に導入できないと訳ではなく、古いバージョンでもGutenbergを使って導入できます。ただ、Gutenbergを使っても、そのバージョンは17.5以上ではないといけないのです。
ここまでは、Interactive APIの説明をしましたが、次はそのインストールの方法を説明します。
Interactive APIの設定
Interactive APIのインストールと必要となる設定は以下の感じになります。
まず、以下のコマンドでパッケージをインストールします。
npm install @wordpress/interactivity --save
次は対象ブロックのblock.jsonファイルのサポートに「interactivity」をtrueにします。
"supports": {
"interactivity": true
}
そして、上述したようにInteractive APIを導入することで、ブロック関連の動的な処理はview.jsのファイルで行うようになるため、「viewScriptModule」にview.jsのファイルを以下のように指定しないといけません。
{
...
"viewScriptModule": "file:./view.js"
}
最後はpackage.jsonのファイルにおけるbuildとstartのコマンドに以下のように「--experimental-modules」のフラグを追加しないといけません。
{
"scripts": {
...
"build": "wp-scripts build --experimental-modules",
"start": "wp-scripts start --experimental-modules"
}
それで設定が全て終わり、対象ブロックのview.jsのファイルに使用するメソッドをインポートして使えます。
終わりに
この記事では、Interactive APIとは何なのか、そして、その導入の方法を説明しました。
今度は、view.jsとrender.phpのファイルにどのように使えるかを説明したいと思います。
