ダイナミックカスタムブロック作成（WordPress）～その1～

WordPressのブロックエディタでダイナミックブロックを作成する機会があったので、
自分の知識の整理も込めて、簡単にまとめてみました。

今回は、投稿IDを入力すると、入力したIDのタイトル、サムネイル、リンクを取得して、
表示するものを作成したいと思います。
※プラグインのタイトルやアイコンの設定などは、割愛します（デフォルトのまま）。

ファイルの生成

WordPressが公式にサポートする @wordpress/create-blockを使用して環境構築します。
簡単なコマンドで作成に必要なファイルを自動で生成してくれます。

プラグインのディレクトリ（wp-content/plugins）に移動します。

$ cd xxx/wp-content/plugins

create-blockを実行します。

$ npx @wordpress/create-block sample-dynamic-block

※「sample-dynamic-block」は、作成するプラグインのディレクトリ名になるので、任意のものにしてください

実行が完了すると、以下のような構成が作成されます。

sample-dynamic-block/
│
├── build/
│   ├── index.asset.php
│   ├── index.css
│   ├── index.js
│   └── style-index.css
│
├── node_modules/
│
├── src/
│   ├── edit.js
│   ├── editor.scss
│   ├── index.js
│   ├── save.js
│   └── style.scss
│
├── sample-dynamic-block
│
├── package-lock.json
│
├── pakage.json
│
└── readme.txt

生成されたファイルにより、WordPress管理画面のプラグイン一覧ページに表示がされます。
sample-dynamic-blockと設定したので、「sample-dynamic-block」が追加されています。
有効化します。

開発

作成したプラグインフォルダに移動して、開発モードを実行します。

$ cd sample-dynamic-block

$ npm start //本番用はnpm run build を実行

save.js

通常、フロント表示はsave関数（src/save.js）に定義をしますが、ダイナミックブロックの場合、
PHPで定義する必要があります。

そのため、save関数はnullを返すようにします。
これによりブロックのレンダリングにPHPが使用されるようになります。

src/save.js


export default function save() {
  //PHPでレンダリングするため save 関数は nullを返すようにする
  return null;
}

sample-dynamic-block.php

ブロックをPHPでレンダリングするには、register_block_type関数の第2パラメーターの配列に render_callback を追記します。

sample-dynamic-block.php


register_block_type( __DIR__ . '/build', array(
		//レンダリング用のコールバック関数を設定
		'render_callback' => 'sample_dynamic_block_render'
));

さらに、attributes に入力された値（投稿ID）を保存するための属性を定義します。

sample-dynamic-block.php


register_block_type( __DIR__ . '/build', array(
	//レンダリング用のコールバック関数を設定
	'render_callback' => 'sample_dynamic_block_render',
	//入力された値（投稿ID）を保存するための属性を追記
	'attributes' => [
		'postID' => [
			'type' => 'number',
			'default' => 0
		]
	]
));

render_callbackに指定したコールバック関数を定義します。
保存された投稿IDからその投稿のタイトル、サムネイル、リンクを取得し、出力します。

保存された属性にアクセスするには$attrを使用します。
postIDのアクセスは、$attr['postID']になります。

なお、render_callbackの関数は、WordPressの関数が使用できます。

sample-dynamic-block.php


function sample_dynamic_block_render($attr, $content) {
	if($attr['postID'] > 0) {
		$selectPost = get_post($attr['postID'] );

		if($selectPost) {
			$thumbID = get_post_thumbnail_id($selectPost->ID);

			if($thumbID > 0) {
				$thumbUrl = wp_get_attachment_image_src($thumbID, 'full')[0];
			}

			$title = $selectPost->post_title;
			$link = get_permalink($selectPost->ID);

			ob_start();
			?>
			<div>
				<img src="<?php $thumbUrl; ?>">
				<a href="<?php $link; ?>"><?php $title; ?></a>
			</div>
			<?php
			$output = ob_get_contents();
			ob_end_clean();

			return $output;
		}
	}
}

edit.js

編集画面を作成します。
投稿IDを入力するコンポーネントの呼び出しと、
sample-dynamic-block.phpで設定したattributesにprops経由で取得し、設定します。

//TextControlコンポーネントをインポート
import { TextControl } from '@wordpress/components';

export default function Edit(props) {
	//sample-dynamic-block.phpのattributesにprops経由でアクセスして変数に分割代入
	const {attributes: {postID}, setAttributes, className} = props;

	return (
		<div className={className} { ...useBlockProps() }>
			<div>sample dynamic block</div>
			<TextControl
				label="投稿IDを入力" //ラベルの表記を設定
				type='number' //inputタグのtypeを設定
				value={postID} //保存されている属性（投稿ID）を表示
				//入力された値を属性に登録する
				onChange={(newID) => settAttributes({postID: parseInt(newID)})}
			/>
		</div>
	);
}