WPのカスタムブロック作り　③カスタムブロック編集をする際の作法と更新方法|PWCN -WordPressのカスタマイズ情報ほか-

公開日：2023(令和5)年3月19日／最終更新日： 2025(令和7)年3月7日

ここまでで、環境の構築とカスタムブロックを作るためのプラグインの導入までが完了しました。

さて早速．．と言いたいところですが、カスタムブロックを編集する場合には、作法があります。

これを忘れると、いつまでたっても編集内容が反映されず、？？？となってしまうので注意しましょう。

いったいどのファイルがカスタムブロックの実態なの？

プラグインをインストールすると、プラグインフォルダ内（「プラグイン（「ツール」の場合もある）」→「プラグインファイルエディター」で開いた右メニュー）にはたくさんのファイルやフォルダがあります。

この中で、本当にブロックを動かしているのは、「build」というフォルダに含まれるファイルです。

その証拠に、「プラグイン名.php」というファイルを開くと、以下のような記述があり、

function create_block_custom_block_block_init() {
	register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_custom_block_block_init' );

register_block_typeという関数を使って、赤字で示すように、「このファイルと同じ場所（__DIR__）の下にあるbuild(/build)というフォルダを参照しなさい」という記述がされています。

つまり、buildの中のファイルが正しく記述されていれば、作成したカスタムブロックは動くということなんですね。

まずは実態となるフォルダは「build」というのを覚えておきましょう。

この「build」フォルダはブロックとして動作するよう最適化されたファイル群になっており、直接編集は大変なので、同じプラグインフォルダ内にある「src」フォルダの中のファイルを編集して更新（デプロイ）することで簡単にコード管理ができるようになっています。

ブロックの編集と更新

実際にbuildの中のファイルを開いてみると、訳の分からない記述だったり、改行や空白が一切ない、非常に見づらい記述がされています。

これを直接触るのは至難の業ですし、検証できないので動かなかった時の編集も大変です。

そこで作られているのが同じ階層にある「src」というフォルダ。

ファイルの数や名前がちょっと違いますが、編集しやすいように分類されたファイル構成になっています（実際に作り進めると「なるほどねぇ～」って感じると思います）。

カスタムブロックの追加や編集はこの「src」フォルダの中のファイルで行います。

この編集内容を最終的に次項の方法で適用（ビルド）して、開発環境外でも使用できるようにするのですが、ちょっと編集してビルドを繰り返すのはちょっと面倒、そこで活躍するのが以下の作法です。

編集した内容をひとまず即時反映するようにする

以下のようにすると、「src」フォルダで編集した内容をビルドなしに反映されているかのように作業を進めることができます（これを開発モードと一般的に言うようです）。

この作業にはcmd(コマンドプロンプト)を使います。

cmdを開いたら、プラグインのフォルダへ階層を移動させます。

階層の移動は以下のように書くのでしたね！

cd C:\Users\□□□\Local Sites\block-create-test\app\public\wp-content\plugins\プラグインフォルダ名

分からなければ、Local上でサイトを選択した状態で「Site Folder」をクリックし、プラグインのフォルダまで開いてからアドレスバーの内容をコピーすればOKです

移動したら、以下のコードを入力して「Enter」を押します。

npm start

「npm start」が正常に実行されるとこうなる

正常に実行されると、コマンドプロンプト内には以下のように表示されます。

C:\Users\xxxxxxxx\Local Sites\test\app\public\wp-content\plugins\greeting-block>npm start

> greeting-block@0.1.0 start
> wp-scripts start

assets by chunk 17.9 KiB (name: greeting-block/index)
  assets by path greeting-block/*.css 1.92 KiB
    asset greeting-block/index.css 1000 bytes [emitted] (name: greeting-block/index) 1 related asset
    asset greeting-block/index-rtl.css 966 bytes [emitted] (name: greeting-block/index)
  asset greeting-block/index.js 15.8 KiB [emitted] (name: greeting-block/index) 1 related asset
  asset greeting-block/index.asset.php 146 bytes [emitted] (name: greeting-block/index)
assets by chunk 2.04 KiB (name: greeting-block/style-index)
  asset greeting-block/style-index.css 1.04 KiB [emitted] (name: greeting-block/style-index) (id hint: style) 1 related asset
  asset greeting-block/style-index-rtl.css 1 KiB [emitted] (name: greeting-block/style-index) (id hint: style)
assets by chunk 1.08 KiB (name: greeting-block/view)
  asset greeting-block/view.js 1 KiB [emitted] (name: greeting-block/view) 1 related asset
  asset greeting-block/view.asset.php 84 bytes [emitted] (name: greeting-block/view)
asset greeting-block/block.json 518 bytes [emitted] [from: src/greeting-block/block.json] [copied]
Entrypoint greeting-block/view 1.08 KiB (1.17 KiB) = greeting-block/view.js 1 KiB greeting-block/view.asset.php 84 bytes 1 auxiliary asset
Entrypoint greeting-block/index 19.9 KiB (12 KiB) = 6 assets 3 auxiliary assets
runtime modules 5.2 KiB 14 modules
orphan modules 4.87 KiB [orphan] 4 modules
built modules 4.58 KiB (javascript) 476 bytes (css/mini-extract) [built]
  javascript modules 4.14 KiB
    cacheable modules 3.97 KiB
      modules by path ./src/greeting-block/*.js 3.88 KiB 4 modules
      modules by path ./src/greeting-block/*.scss 100 bytes 2 modules
    external ["wp","blocks"] 42 bytes [built] [code generated]
    external ["wp","i18n"] 42 bytes [built] [code generated]
    external ["wp","blockEditor"] 42 bytes [built] [code generated]
    external "ReactJSXRuntime" 42 bytes [built] [code generated]
  css modules 476 bytes
    css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/greeting-block/style.scss 269 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/greeting-block/editor.scss 207 bytes [built] [code generated]
  ./src/greeting-block/block.json 458 bytes [built] [code generated]
webpack 5.98.0 compiled successfully in 4674 ms

補足：階層の指定が間違っている時はこうなる

以下は階層の指定を「C:\WINDOWS\system32」のまま「npm start」を実行した際のエラー例です。

C:\WINDOWS\system32>npm start
npm error code ENOENT
npm error syscall open
npm error path C:\WINDOWS\system32\package.json
npm error errno -4058
npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'C:\WINDOWS\system32\package.json'
npm error enoent This is related to npm not being able to find a file.
npm error enoent
npm error A complete log of this run can be found in: C:\Users\xxxxxx\AppData\Local\npm-cache\_logs\2025-03-05T01_59_16_098Z-debug-0.log

こうなった時は、もう一度「プラグインのフォルダ」に階層を移動させてから実行すればいいです。

作業が終わったら開発モードを終了させなければならないので、「npm start」を実行したコマンドプロンプトの窓は開いたままにしておきましょう

開発モードを終了する

開発モードを終了するには、コマンドプロンプトで以下の手順を実行します。

「Ctrl」＋「c」を押して以下のような確認が出てくるので「y」を入力します。

^Cバッチ ジョブを終了しますか (Y/N)?

簡単に言えば、「npm start」でnpmを稼働させていると、「src」フォルダの編集状況を常に監視して、サイトのプラグインファイルエディターなどで変更を保存すると、即座に「build」フォルダ内の各ファイルに反映してくれるということなんですね。

ちなみにいくつかの変更をしたら、以下のようにコマンドプロンプト画面には編集したよという記述が追加され、ブロックにも反映されていました。

./src/greeting-block/save.js 367 bytes [built] [code generated]
webpack 5.98.0 compiled successfully in 220 ms
assets by status 3.03 KiB [cached] 3 assets
assets by status 16.8 KiB [emitted]
  assets by chunk 15.2 KiB (name: greeting-block/index)
    asset greeting-block/index.js 14.2 KiB [emitted] (name: greeting-block/index) 1 related asset
    asset greeting-block/index-rtl.css 966 bytes [emitted] (name: greeting-block/index)
    asset greeting-block/index.asset.php 146 bytes [emitted] (name: greeting-block/index)
  asset greeting-block/style-index-rtl.css 1 KiB [emitted] (name: greeting-block/style-index) (id hint: style)
  asset greeting-block/block.json 518 bytes [emitted] [from: src/greeting-block/block.json] [copied]
  asset greeting-block/view.asset.php 84 bytes [emitted] (name: greeting-block/view)
Entrypoint greeting-block/view 1.08 KiB (1.17 KiB) = greeting-block/view.js 1 KiB greeting-block/view.asset.php 84 bytes 1 auxiliary asset
Entrypoint greeting-block/index 18.3 KiB (10.6 KiB) = 6 assets 3 auxiliary assets
cached modules 2.27 KiB (javascript) 476 bytes (css/mini-extract) [cached] 12 modules
runtime modules 3.37 KiB 6 modules
./src/greeting-block/edit.js 661 bytes [built] [code generated]
webpack 5.98.0 compiled successfully in 206 ms

この辺りが、ブロック制作に関する数々の参考ページやWordPress公式参考ページで端折られているところです。それらのページでは「これはわかるでしょう？」という前提で書かれていますから、それが理解できればグッとハードルが下がりますよ！

このページまでのおさらい

開発環境が整っている状態で、カスタムブロックを作るためのプラグインの生成方法～更新までをおさらいしておきましょう。

プラグインを新規に作る時

コマンドプロンプトでプラグイン階層まで移動（wp-content→plugins）
「npx @wordpress/create-block プラグインのスラグ（半角英数字）」を実行
- エラーが出た時は新たなコマンドプロンプトで「npm update」を実行して最新に更新してから再試行
しばらく待って完了したらサイトを立ち上げてプラグインを有効化する