ローカル環境にブロックの雛形をインストールしたところから、必要最低限のファイルに絞りこんで最小構成のブロックを作成してみると、srcディレクトリは5ファイルで良いことがわかります。

ブロックの最小構成

カスタムブロックの雛形をインストールすると、次のような構成になります。

• my-block
  • node_modules
  • package-lock.json
  • package.json
  • my-block.php
  • build
    • 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
  • readme.txt

srcディレクトリから使用しないファイルを削除すると次のようになります。

• my-block
  • node_modules
  • package-lock.json
  • package.json
  • my-block.php
  • build
    • block.json
    • index.asset.php
    • index.js
    • style-index-rtl.css
    • style-index.css
    • view.asset.php
  • src
    • block.json
    • edit.js
    • index.js
    • save.js
    • style.scss
  • .wp-env.json
  • .editorconfig
  • .gitignore
  • readme.txt

各ファイルの編集

my-block.phpは編集しない

/**
 * Plugin Name:       My Block
 * Description:       Example block scaffolded with Create Block tool.
 * Version:           0.1.0
 * Requires at least: 6.7
 * Requires PHP:      7.4
 * Author:            The WordPress Contributors
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       my-block
 *
 * @package CreateBlock
 */

if (! defined('ABSPATH')) {
	exit; // Exit if accessed directly.
}

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

block.jsonは編集する。

• 行の削除
  • "editorStyle": "file:./index.css"
  • "viewScript": "file:./view.js"
• namespaceを変更
  • "name": "my-blocks/my-block"

{
	"$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",
	"style": "file:./style-index.css"
}

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,
});

edit.jsは、import './editor.scss'を削除

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

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

save.jsは編集しない。

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

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

style.scssは、適宜修正する

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

editor.scssとview.jsはファイルごと削除する

ブロックの最小構成には5ファイル必要

カスタムブロックを最小構成で作成したい場合は、最低5ファイル必要なことがわかりました。

• block.json
• edit.js
• index.js
• save.js
• style.scss

エディターのみに指定したスタイルがない場合はeditor.scssを、フロントエンド内に読み込ませたいスクリプトがない場合はview.jsをファイルごと削除できます。view.jsはデフォルトでconsoleコマンドが記述されているため、使用しない場合は削除するとよいでしょう。