getEntityRecordを使用して編集画面にカテゴリー情報を表示させるシンプルなブロックを作成する。

ブロック開発

block.json

コメントなし。

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "create-block/my-post-categories",
	"version": "0.1.0",
	"title": "My Post Categories",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example block scaffolded with Create Block tool.",
	"example": {},
	"supports": {
		"html": false
	},
	"usesContext": ["postId", "postType"],
	"textdomain": "my-post-categories",
	"editorScript": "file:./index.js",
	"style": "file:./style-index.css",
	"render": "file:./render.php"
}

edit.js

@wordpress/core-data の各ストアから投稿データやカテゴリー情報などを取得するため、useSelect フックを使用する。すると、状態が変化した際にコンポーネントが自動的に再レンダリングする。例えば、現在の投稿に下記ブロックを挿入し、新規カテゴリーを作成・保存すると、ブロックが再レンダリングされて、カテゴリー表示が増える。

select(“core”)：core ストアにアクセス

getEntityRecords：WordPress REST API を通じて特定の投稿、ページ、カテゴリーなどのレコードにアクセス

ストアから取得したcategoriesはオブジェクトになるため、mapで値を展開して表示する。

import { useBlockProps } from "@wordpress/block-editor";
import "./editor.scss";
import { useSelect } from "@wordpress/data";

export default function Edit() {
	const categories = useSelect((select) =>
		select("core").getEntityRecords("taxonomy", "category", {
			per_page: 10, // 最大10件取得
			order: "desc", // 降順
		}),
	);

	return (
		<ul {...useBlockProps()}>
			{categories &&
				categories.map((category) => (
					<li key={category.id}>{category.name}</li>
				))}
		</ul>
	);
}

category.nameを編集画面に表示されるときcategory.name.renderedとしないのは、カテゴリー（taxonomy）の場合、name はシンプルな文字列として返ってくるため。

rendered が必要なケース：
post.title や post.content など、HTMLが含まれる可能性のあるリッチなコンテンツは、REST API では以下のような構造で返ってくる

"title": {
  "rendered": "記事のタイトル"
}

rendered が不要なケース：
一方、カテゴリー（category）やタグ（tag）などのタクソノミーの name や slug は、ただの文字列。

{
  "id": 1,
  "name": "お知らせ",
  "slug": "news"
}

そのため、category.name はそのまま使える。

render.php

<?php
$categories = get_categories(array(
	'category'	=> 'name',
	'oeder'		=> 'DESC',
	'number'	=> '5'
));

if (!empty($categories)) {
	echo "<ul>";
	foreach ($categories as $category) {
		echo "<li>" . esc_html($category->name) . "</li>";
	}
	echo "</ul>";
} else {
	"<p>カテゴリーは見つかりませんでした。</p>";
}

現在編集中の投稿に設定されているカテゴリーのみ表示

edit.js

import { useBlockProps } from "@wordpress/block-editor";
import "./editor.scss";
import { useSelect } from "@wordpress/data";

export default function Edit() {
	const categoryIds = useSelect(
		// 現在編集中の投稿に設定されているカテゴリーのID配列を取得
		(select) => select("core/editor").getEditedPostAttribute("categories"),
		[],
	);

	const categories = useSelect(
		(select) =>
			categoryIds &&
			categoryIds.length > 0 &&
			select("core").getEntityRecords("taxonomy", "category", {
				// 指定したIDのカテゴリーだけをREST APIから取得
				include: categoryIds,
			}),
		[categoryIds],
	);

	return (
		<ul {...useBlockProps()}>
			{categories &&
				categories.map((category) => (
					<li key={category.id}>{category.name}</li>
				))}
		</ul>
	);
}

render.php

<?php
$categories = get_the_category();

if (!empty($categories)) {
	echo "<ul>";
	foreach ($categories as $category) {
		echo "<li>" . esc_html($category->name) . "</li>";
	}
	echo "</ul>";
} else {
	"<p>カテゴリーは見つかりませんでした。</p>";
}

参考

• https://www.webdesignleaves.com/pr/wp/wp-core-data.html