ブロックに動きをつける。WordPressのInteractivity API入門

ボタンを押すと表示が切り替わる、タブやアコーディオンで内容を出し分ける。そんな「動きのあるブロック」を作るための、WordPress公式の仕組みが「Interactivity API」です。

本記事では、Interactivity APIの仕組みと主な機能を解説したうえで、押すとカウントが増減する「いいね」ボタンのブロックを実際に作り、TCDの検証サイトで動かしてみます。

記事を、そのまま収益に。

WordPressサイトで記事の有料販売ができる
無料のプラグイン「YOMERU」。

Interactivity APIとは

Interactivity APIは、ブロックにクリックや入力などに反応する動きをつけるための、WordPress公式の仕組みです。WordPress 6.5で本体に正式に加わりました。

これまでは、ブロックに動きをつけるにはプラグインやテーマごとに独自のJavaScriptを書く必要がありました。Interactivity APIを使うと、ディレクティブと呼ばれる決まった書き方で、ブロックに動きをつけられます。複数のブロックで同じ仕組みを使えるので、ページ全体で動作がそろい、読み込むJavaScriptも少なく済みます。

WordPress本体のブロックでも使われている

Interactivity APIは、WordPress本体のブロックでもすでに使われています。たとえば、ナビゲーションブロックのメニューの開閉、画像ブロックの拡大表示（ライトボックス）、検索ブロック、クエリーループブロックのページ送りなどです。

Interactivity APIの仕組み

Interactivity APIは、次の2つを組み合わせて動きをつけます。

ディレクティブ：HTMLに書く「data-wp-」で始まる属性。「クリックしたらこの処理を実行する」「この値を表示する」といった指示を書く
ストア：JavaScriptに書く、状態（データ）と処理のまとまり

最初の表示はPHPでサーバー側で作られ、その後ブラウザでJavaScriptが動いて、ボタンのクリックなどに反応するようになります。最初からHTMLとして中身が表示されるので、表示が速く、検索エンジンにも内容が伝わりやすいのが特徴です。

よく使うディレクティブ

data-wp-interactive：Interactivity APIを使う範囲と、名前空間（ストアの名前）を指定する
data-wp-context：その要素と子要素だけで使うデータ（コンテキスト）を持たせる
data-wp-on–イベント名：クリックなどのイベントで処理を実行する（例：data-wp-on–click）
data-wp-text：要素の中のテキストを、データに合わせて書き換える
data-wp-bind–属性名：HTMLの属性を、データに合わせて書き換える（例：data-wp-bind–aria-pressed）
data-wp-class–クラス名：データがtrueのときにクラスを付ける（例：data-wp-class–is-liked）
data-wp-each：配列のデータから一覧を表示する

「いいね」ボタンのブロックを作ってみる

ここでは、押すと「いいね」の数が増え、もう一度押すと元に戻るボタンのブロックを作ります。動作には、WordPress 6.5以上が必要です。

1. ファイルを用意する

「my-like-button」というフォルダを作り、次の6つのファイルを入れます。

my-like-button/
├── my-like-button.php
├── block.json
├── render.php
├── view.js
├── view.asset.php
└── style.css

my-like-button.php（プラグインの本体。ブロックを登録する）

<?php
/**
 * Plugin Name: My Like Button
 * Description: Interactivity API のサンプル。押すとカウントが増減する「いいね」ボタンのブロックです。
 * Version: 1.0.0
 * Requires at least: 6.5
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

add_action( 'init', 'my_like_button_register_block' );
function my_like_button_register_block() {
	register_block_type( __DIR__ );
}

block.json（ブロックの設定）

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "my-plugin/like-button",
	"title": "いいねボタン",
	"category": "widgets",
	"supports": {
		"interactivity": true
	},
	"render": "file:./render.php",
	"viewScriptModule": "file:./view.js",
	"style": "file:./style.css"
}

「supports」の「interactivity」を true にすると、このブロックでInteractivity APIを使うことをWordPressに伝えられます。「viewScriptModule」には、表側で読み込むJavaScriptを指定します。

render.php（表側に出力するHTML）

<?php
$context = array(
	'count' => 0,
	'liked' => false,
);
?>
<div
	<?php echo get_block_wrapper_attributes(); ?>
	data-wp-interactive="myPlugin"
	<?php echo wp_interactivity_data_wp_context( $context ); ?>
>
	<button
		type="button"
		class="like-button"
		data-wp-on--click="actions.toggle"
		data-wp-class--is-liked="context.liked"
		data-wp-bind--aria-pressed="context.liked"
	>
		いいね <span data-wp-text="context.count"></span>
	</button>
</div>

data-wp-interactive で名前空間「myPlugin」を指定し、data-wp-context で「いいねの数（count）」と「押したかどうか（liked）」の初期値を持たせています。ボタンには、クリックしたら「actions.toggle」を実行するよう指定しています。

view.js（ボタンを押したときの処理）

import { store, getContext } from '@wordpress/interactivity';

store( 'myPlugin', {
	actions: {
		toggle() {
			const context = getContext();
			context.liked = ! context.liked;
			context.count += context.liked ? 1 : -1;
		},
	},
} );

getContext() で、ボタンが属するブロックのデータを取り出し、書き換えています。データを書き換えるだけで、data-wp-text や data-wp-class で指定した表示が自動で更新されます。表示を直接書き換える処理を書く必要はありません。

view.asset.php（view.jsが使うモジュールの指定）

<?php
return array(
	'dependencies' => array( '@wordpress/interactivity' ),
	'version'      => '1.0.0',
);

view.jsで「@wordpress/interactivity」を読み込むために必要なファイルです。後述のcreate-blockで作る場合は、ビルド時に自動で作られます。

style.css（見た目）

.wp-block-my-plugin-like-button .like-button {
	padding: 10px 24px;
	border: 2px solid #e2264d;
	border-radius: 999px;
	background: #fff;
	color: #e2264d;
	font-size: 16px;
	cursor: pointer;
}
.wp-block-my-plugin-like-button .like-button.is-liked {
	background: #e2264d;
	color: #fff;
}

2. プラグインを有効化して、ブロックを配置する

「my-like-button」フォルダをzipファイルにして、管理画面の「プラグインを追加」→「プラグインのアップロード」からアップロードし、有効化します。

今回のサンプルは、仕組みを分かりやすくするため編集画面用のJavaScriptを省いています。そのため、ブロックの一覧からは追加できない場合があります。検証サイトでは、記事の本文に次の1行（ブロックのコメント）を直接書いて配置しました。

<!-- wp:my-plugin/like-button /-->

3. 動作を確認する

TCDの検証サイトに配置してみたところ、ボタンを押すたびに「いいね 0」と「いいね 1」が切り替わり、ボタンの色も変わりました。ページを再読み込みしなくても、その場で表示が変わっています。

「いいね」ボタンを押す前と押した後

ページのソースを見ると、最初のHTMLには「いいね 0」の数字がすでに入っていました。data-wp-text の値がサーバー側で埋め込まれているため、JavaScriptが動く前から正しい内容が表示されます。

実際に開発するときは「create-block」が便利

本格的に作るときは、WordPress公式のツール「create-block」で、Interactivity API用のひな形を作るのがおすすめです。Node.jsが入ったパソコンで次のコマンドを実行すると、必要なファイル一式がそろったプラグインのフォルダが作られます。

npx @wordpress/create-block@latest my-first-interactive-block --template @wordpress/create-block-interactive-template

作られたフォルダで「npm start」を実行すると、ファイルを保存するたびに自動でビルドされます。編集画面用のJavaScriptも含まれているので、ブロックエディターの一覧から通常のブロックと同じように追加できます。

Interactivity APIを使うときの注意点

WordPress 6.5以上が必要：それより古いバージョンでは動かない
名前空間は重ならないようにする：data-wp-interactive と store() で同じ名前空間を使う。ほかのプラグインと同じ名前にならないよう、プラグイン名などを付ける
JavaScriptはモジュールとして読み込まれる：view.jsは「script type=”module”」で読み込まれる。従来のwp_enqueue_script()ではなく、block.jsonの「viewScriptModule」で指定する
表示だけの変化は保存されない：今回の「いいね」の数は、ページを再読み込みすると0に戻る。数を残したいときは、REST APIなどでサーバーに保存する仕組みが別に必要