ローカルにインストールしたカスタムブロックの雛形を編集して、挙動を確認してみましょう。また最小構成要件を満たす小さなブロックを作成してみましょう。

create-blockでインストールしたディレクトリの構成

create-blockコマンドをmy-blockディレクトリで実行すると、my-block配下の構造は次のようになります。

• my-block
  • node_modules // node本体
  • package-lock.json
  • package.json // 依存関係とローカル開発で使用するスクリプトを定義
  • my-block.php // ブロックをWordPressに登録するプラグインのメインのPHPファイル
  • build // srcをビルドした時の出力先
    • block.json
    • index-rtl.css
    • index.asset.php
    • index.css
    • index.js
    • style-index-rtl.css
    • style-index.css
    • view.asset.php
    • view.js
  • src // 開発用ディレクトリ
    • block.json
    • edit.js
    • editor.scss
    • index.js
    • save.js
    • style.scss
    • view.js
  • .wp-env.json
  • .editorconfig // コーディングスタイルを統一
  • .gitignore // gitで管理しないファイルを指定
  • readme.txt

srcディレクトリ配下

block.json

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

ブロックの基本のメタデータ

• apiVersion: ブロック API バージョン。2025年1月時点では3
• name: ブロックを定義する一意の名前
• title: インサーターに表示されるブロックのタイトル
• category: インサーターでのカテゴリー (text, media, design, widgets, theme, embed)
• icon: ブロックで表示される Dashicon アイコン
• description: ブロックの短い説明。タイトル以上のコンテキストを与えます。
• keywords: ユーザーのブロックの検索を支援するキーワードの配列。
• textdomain: 国際化で使用されるブロックのテキストドメイン。

データ保存

"attributes": {
    "fallbackCurrentYear": {
        "type": "string"
    },
    "showStartingYear": {
        "type": "boolean"
    },
    "startingYear": {
        "type": "string"
    }
},

• attributes:ブロックが必要なカスタムデータとデータベースへの保存方法を記述
  • ユーザーの入力値（attributes）をEdit コンポーネントと save 関数に渡す

ブロックの動作、出力、スタイルのためのファイル

• ブロックエディターで使用
  • editorScript: ブロックエディター内のみで使用される JavaScript ファイル
  • editorStyle: ブロックエディター内でのスタイル用の CSS ファイル
• ブロックエディターとフロントエンドで使用
  • script: ブロックエディターとフロントエンドの両方で読み込まれる JavaScript ファイル。
  • style: ブロックエディターとフロントエンドの両方で適用される CSS ファイル
• フロントエンドで使用
  • viewScript: フロントエンドのみを対象とする JavaScript ファイル
  • render:ダイナミックブロック生成時にsrc/render.php からコピーされる、バンドルした render.php のパスを設定

index.js

import { registerBlockType } from "@wordpress/blocks";
import "./style.scss";
import Edit from "./edit";
import save from "./save";
import metadata from "./block.json";

registerBlockType(metadata.name, {
	/**
	 * @see ./edit.js
	 */
	edit: Edit,

	/**
	 * @see ./save.js
	 */
	save,
});

• ブロックエディターでのみロードされる
• registerBlockType 関数を呼び出し、クライアント側でブロックを登録
• edit.js と save.js ファイルをインポートし、ブロックの登録で必要な機能を取得

edit.js

import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
import "./editor.scss";

export default function Edit() {
	return (
		<p {...useBlockProps()}>
			{__("My Block – hello from the editor!", "my-block")}
		</p>
	);
}

• 編集画面の構成をReactコンポーネントで記述する
• index.js ファイルの registerBlockType 関数の edit プロパティに渡される

save.js

import { useBlockProps } from '@wordpress/block-editor';

export default function save() {
	return (
		<p { ...useBlockProps.save() }>
			{ 'My Block – hello from the saved content!' }
		</p>
	);
}

• データベースに保存される静的な HTML マークアップを返す関数を定義
• index.js ファイル内の registerBlockType 関数の save プロパティに渡される

style.**

.wp-block-create-block-my-block {
	background-color: #21759b;
	color: #fff;
	padding: 2px;
}

• ブロックエディターとフロントエンドの両方に読み込まれるブロックのスタイルを記述するファイル
• ビルドプロセスで style-index.css に変換され、通常は block.json の style プロパティを使用して定義

editor.**

.wp-block-create-block-my-block {
	border: 1px dotted #f00;
}

• ブロックエディター内でブロックに適用される追加スタイルを記述するファイル
• ビルド時に index.css に変換され、通常は block.json の editorStyle プロパティで定

render.php

function create_block_my_block_block_init() {
	register_block_type( __DIR__ . '/build/my-block' );
}
add_action( 'init', 'create_block_my_block_block_init' );

// render_callbackを使用した場合
function create_block_my_block_block_init() {
	register_block_type(
		__DIR__ . '/build',
		array(
			'render_callback' => 'render_block_core_notice',
		)
	);
}
add_action('init', 'create_block_my_block_block_init');

• フロントエンドからのリクエストに対してブロックのマークアップを返す、サーバー側の処理を定義

view.js

console.log("Hello World! (from create-block-my-block block)");

• フロントエンド内に読み込ませたいスクリプトを定義