カスタムブロック作成 ダイナミックブロック

日付を出力するブロックを作成する。

雛形の作成

–variant dynamic をつけてコマンドを叩く

npx @wordpress/create-block dojo-dynamic-block --variant dynamic

プラグインを有効化する。

block.jsonに次の行が追加される

	"render": "file:./render.php",
	"viewScript": "file:./view.js"

ビルド

npm run

render.php

クラスを当ててる関数　get_block_wrapper_attributes()

<p <?php echo get_block_wrapper_attributes(); ?>>
	<?php esc_html_e( 'Dojo Dynamic Block – hello from a dynamic block!', 'dojo-dynamic-block' ); ?>
</p>

フロントエンドの開発

現在時刻を表示

<p <?php echo get_block_wrapper_attributes(); ?>>
 <?php echo wp_date('Y-m-d H:i:s'); ?>
</p>

エディターの開発

edit.jsを編集する。jsで現在時刻を出力させるのは難しい

参考：packages/block-library/src/post-date/edit.js

export default function Edit() {
	return <p {...useBlockProps()}>現在の日時は、XXXX-XX-XX XX:XX:XXです。</p>;
}

ブロックサポートを追加

	"example": {},
	"supports": {
		"html": false,
		"color": {
			"text": true,
			"background": true,
			"gradients": true
		},
		"typography": {
			"fontSize": true
		},
		"spacing": {
			"padding": true
		}
	},
	"textdomain": "dojo-dynamic-block",

ショートコードとダイナミックブロックの違い

ショートコードは、

• エディター側で実際の見た目がわからない。フロントエンドでしか表示確認できない。
• ブロックサポートを追加できない

参考

• ダイナミックブロックの作成 / En
• @wordpress/create-block / En
• Block API changes in WordPress 6.1
• wp_date()
• packages/block-library/src/post-date/edit.js