ブロックエディタにMy Post Titleブロックを挿入すると、現在の投稿タイトルを取得し表示する仕様。JSファイルにデータベースに格納されたデータを表示させる工程を確認する目的。

ブロック開発

ブロック名：My Post Title

WordPressのプラグインディレクトリ内で下記コマンドを実行してダイナミックブロックの雛形を生成する

npx @wordpress/create-block my-post-title --variant dynamic

block.jsonを編集

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

ポイントは"usesContext": ["postId", "postType"]の部分。

// block.json
"usesContext": ["postId", "postType"]

edit.jsを編集

import { useBlockProps } from "@wordpress/block-editor";
import { useEntityProp } from "@wordpress/core-data";

import "./editor.scss";

export default function Edit({ context: { postType, postId } }) {
	const blockPlops = useBlockProps();
	const [rawTitle = ""] = useEntityProp("postType", postType, "title", postId);

	return <div {...blockPlops}>{rawTitle}</div>;
}

ポイントはconst [rawTitle = ""] = useEntityProp("postType", postType, "title", postId)の部分。

// block.json
"usesContext": ["postId", "postType"]

// kind パラメータを"postType"に設定
// name パラメータを"product"に設定し投稿タイプのプロパティにアクセス
// prop パラメータを"meta"に設定
// "meta"はこの投稿タイプに登録されているすべての投稿メタ情報を含むオブジェクト
// ブロックが「context」オブジェクトから受け取った、
// 「postId」を「id」パラメータとして渡し、
// 参照先の投稿インスタンスの特定の投稿メタ情報を確実に取得
// クエリされたデータとデータを更新する関数を含む配列を返すため、
// 配列の分割を使用して項目を抽出し、その機能に対応する名前を付ける
	const [ meta, updateMeta ] = useEntityProp(
		'postType',
		'product',
		'meta',
		postId
	);

import { useBlockProps } from "@wordpress/block-editor";
import { useEntityProp } from "@wordpress/core-data";

export default function Edit({ context: { postType, postId } }) {
	const blockPlops = useBlockProps();
	const [rawTitle] = useEntityProp("postType", postType, "title", postId);
	const [rawAuthor] = useEntityProp("postType", postType, "author", postId);
	const [rawDate] = useEntityProp("postType", postType, "date", postId);
	const [rawStatus] = useEntityProp("postType", postType, "status", postId);
	const [rawType = ""] = useEntityProp("postType", postType, "type", postId);

	return (
		<div {...blockPlops}>
			<p>post_title：{rawTitle}</p>
			<p>post_author：{rawAuthor}</p>
			<p>post_date：{rawDate}</p>
			<p>post_status：{rawStatus}</p>
			<p>post_type：{rawType}</p>
		</div>
	);
}

<div <?php echo get_block_wrapper_attributes(); ?>>
	<p>post_title：<?php the_title(); ?></p>
	<p>post_author：<?php the_author(); ?></p>
	<p>post_date：<?php the_date("Y年m月d日"); ?></p>
	<p>post_status：<?php echo get_post_status(); ?></p>
	<p>post_type：<?php echo get_post_type(); ?></p>
</div>

render.phpを編集

<div <?php echo get_block_wrapper_attributes(); ?>>
	<?php the_title() ?>
</div>

コードエディタを確認

<!-- wp:create-block/my-post-title /-->

ソースを確認

<div class="wp-block-create-block-my-post-title">
	タイトルを表示します
</div>