ここまでで、環境の構築とカスタムブロックを作るためのプラグインの導入までが完了しました。
さて早速．．と言いたいところですが、カスタムブロックを編集する場合には、作法があります。
これを忘れると、いつまでたっても編集内容が反映されず、？？？となってしまうので注意しましょう。
いったいどのファイルがカスタムブロックの実態なの？
プラグインをインストールすると、プラグインフォルダ内（「プラグイン（「ツール」の場合もある）」→「プラグインファイルエディター」で開いた右メニュー）にはたくさんのファイルやフォルダがあります。
この中で、本当にブロックを動かしているのは、「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」というフォルダ。
ファイルの数や名前がちょっと違いますが、編集しやすいように分類されたファイル構成になっています（実際に作り進めると「なるほどねぇ～」って感じると思います）。
カスタムブロックの追加や編集はこの「src」フォルダの中のファイルで行います。
この編集内容を最終的に次項の方法で適用（ビルド）して、開発環境外でも使用できるようにするのですが、ちょっと編集してビルドを繰り返すのはちょっと面倒、そこで活躍するのが以下の作法です。
編集した内容をひとまず即時反映するようにする
以下のようにすると、「src」フォルダで編集した内容をビルドなしに反映されているかのように作業を進めることができます（これを開発モードと一般的に言うようです）。
この作業にはcmd(コマンドプロンプト)を使います。
cmdを開いたら、プラグインフォルダへ階層を移動させます。
階層の移動は以下のように書くのでしたね！
cd C:\Users\□□□\Local Sites\block-create-test\app\public\wp-content\plugins\プラグインフォルダ名移動したら、以下のコードを入力して「Enter」を押します。
npm start開発モードを終了させるときは
「Ctrl」＋「c」を押して以下のような確認が出てくるので「y」を入力します。
^Cバッチ ジョブを終了しますか (Y/N)?この辺りが、ブロック制作に関する数々の参考ページやWordPress公式参考ページで端折られているところです。それらのページでは「これはわかるでしょう？」という前提で書かれていますから、それが理解できればグッとハードルが下がりますよ！
編集内容をどうやって反映させるのか？
ここまでの説明で、「src」で編集するのね！「build」フォルダの内容が実際には使われるのね！というのは理解いただけたでしょう。
では最後にどうやって「src」フォルダ内で編集したものを「build」フォルダの中のファイル類に反映させるのか？
これには、パソコンのcmd(コマンドプロンプト)を使います。
この作業だけは、WordPressの中ではできないんですね。そして、WordPressが稼働するだけの一般のレンタルサーバーではできない（非常にやりにくいし間違いが起こると大変な）作業ということになります。
さて、では実際に「src」フォルダで編集した後、どうやってビルド（「build」フォルダへ動作するように整理して適用することをそう呼ぶそうです）するのかを説明します。
コマンドプロンプトは、Windowsの場合、「スタート」をクリックして表示されるプログラム一覧の中の「Windows システムツール」の中にあります。
恐らくブロック編集では頻繁に使いますので、デスクトップにショートカットを出すなり、ピン止めするなりしてすぐに使えるようにしておきましょう。
cmdを開いたら、以下の手順で、パソコン上にある、ブロック作成プラグインのある場所を指定します。
- Localを起動して、サイトを起動する
- Localの画面上にある「Go to site folder」をクリックする
- 「app」→「public」→「wp-content」→「plugins」→「ブロック作成用のプラグインフォルダ」を順に開く
- アドレスバーをクリックして参照先をコピーする
- cmdの画面に入力して参照先を変更する
cmdの画面はこんな感じです（上が変更前、下が変更後）
具体的には、最初「c:\Users\ユーザー名>」となっているところに、以下のように、「cd 」を付けて、プラグインの階層までのアドレス（先ほどの手順3）を入力し、下の画像のように変更されればOKです。
cd プラグインフォルダまでの階層これは「このフォルダ内に対して何かの処理をするよ！」という指定ですので必ず行う必要があります
階層の変更ができたら、以下のように入力（またはコピペ）して、「Enter」キーを押すと、先ほどの「src」フォルダで編集した内容をチェックして、「build」フォルダ内のファイルを再構築してくれます。
結構時間がかかるので、そのつもりでじっと待ってください
何もエラーがなければ、以下のような感じの画面が出て、再構築は完了します。
内容はさておき、最後に「successfully in 時間」が表示され、エラー表示がなければOKです。
「src」フォルダの中のファイルに何か変化を加えたら、必ず上記の作業が必要になりますから、覚えておきましょう。
また、WordPressのカスタムブロックを作る方法にまつわるページで「ビルドする」というのが出てきた時、「ああ、この作業をするのね！」とすぐにピンとくれば、ハードルはまたまた下がりますね。
どうでしょう？少しずつブロック作成の敷居が下がってきていませんか？そうなっていたら幸いです（笑）。
このページの続き（次ページ）は現在鋭意制作中です。公開までしばらくお待ちください．．
「」へ進む→
コメントを残す