どうも、SSECの何でも屋さん、ささぴよです。
前回はテーマに絡む記述の話をしましたが、今回は投稿に利用するブロックを自作するための環境作りという点でお話ししていこうかと思います。この部分、過渡期だったりもして、新旧いろんな情報が入り乱れているんですよね。ということで、執筆時時点での情報をまとめていこうかと思います。
今回の想定はプラグインとして制作して、カスタムブロックを追加するイメージで、二つのサンプルブロックが実装できるところまでを複数ステップに分けてご紹介しようと思います。
今回はまず環境作りをメインに書いてみますね。
1ブロック1プラグインで良いのか？
そもそもカスタムブロックを作るときですが、1ブロック1プラグインで良いのかどうかという問題がありますね。私のイメージではプラグインを分けてカスタムブロックを増やしていくということは、あまり現実的ではないような気がします。
大抵はいくつかのブロックをセットにして1つのプラグインでインストールできるようにするというのが理想的ですね。後からのブロック追加もしやすいです。
ただ、現状、最初から複数ブロックを作る前提のコマンドなどは無いようなので、一度1ブロック用のプラグインを作ってから、中身を調整していくような流れで進めて行きます。マルチブロックプラグインですね。（そんな言葉があるのかどうかは知らないです。）
準備の準備
動作確認をしながら作業する必要があるので、WordPressがインストールされている環境が必要です。これはローカル環境でも良いですし、サーバー内でも良いでしょう。この部分はお好みがあると思うので割愛します。今回、私はdockerで用意してみました。（やっと使いこなせるようになってきた気がしていますが、Dockerって便利ですね！）
また、作業に際して利用するために、Node.jsの環境が必要です。こちらもインストールなどは環境によりますので、割愛します。 npx コマンドが利用できる状態まで持っていっておいて下さい。環境を汚すのが嫌だという方はこのあたりについてもDockerを使ったりすると良いのかもしれません。（そこまで判断できる方なら、このページを見ていないという説は否めないですが…。）
ブロックを作る準備
技術ブログなので、容赦なくshellのコマンドを挟んでいきます。
まずはshellを使いたいのでターミナルなどお好みのツールで作業用のWordPressをインストールした中にあるpluginsディレクトリまで移動します。
cd <WordPress Directory>/wp-content/plugins続いて、npmのパッケージである @wordpress/create-block を利用して、一度1ブロック用のプラグインを作る事になります。丁寧にやるなら、npmでパッケージをインストールしておくべきですね。この際、グローバルにインストールすることになるかと思います。そうしないとコマンドとして実行出来ないですからね。開発環境の方にもDocker等を利用している方は、その環境に合わせた判断をされてください。
ということでインストールするならこのコマンド
npm i -g @wordpress/create-blockコマンド内の i は install で置き換えられます。 -g オプションがグローバルを示していますね。
続いては npx コマンドです。作業場所は plugins ディレクトリです。間違っていないかは今一度確認しましょう。
npx @wordpress/create-block test-blocks今回は test-blocks という名前でプラグインを作った格好です。もちろん必要に応じて変更して問題ありません。
途中この様な感じのメッセージが表示されて、しばし待ったのち、完了まで行けば完了です。はじめてのカスタムブロックだね！やったね！
Creating a new WordPress plugin in the test-blocks directory.
Creating a "block.json" file.
Creating a "package.json" file.
Installing `@wordpress/scripts` package. It might take a couple of minutes...
Formatting JavaScript files.
Compiling block.
Done: WordPress plugin Test Blocks bootstrapped in the test-blocks directory.
You can run several commands inside:
$ npm start
Starts the build for development.
$ npm run build
Builds the code for production.
$ npm run format
Formats files.
$ npm run lint:css
Lints CSS files.
$ npm run lint:js
Lints JavaScript files.
$ npm run plugin-zip
Creates a zip file for a WordPress plugin.
$ npm run packages-update
Updates WordPress packages to the latest version.
To enter the directory type:
$ cd test-blocks
You can start development with:
$ npm start
Code is Poetryよく見てみるとこのタイミングで @wordpress/scripts というnpmパッケージをインストールしていますね。コレは実際の開発で使われるnpmパッケージです。
おなじみの Code is Poetry で完了です。
コマンドの確認
このままメッセージをスルーしても良い…のかもしれませんが、はじめてですのでちゃんと見ておきましょう。npx実行時のメッセージでは、この先の開発で使うであろういろいろな説明が書かれています。上から順番に確認します。
$ npm start
Starts the build for development.npm start とすることで、開発用環境を起動できます。これは保存するたびにビルドの作業が実行され、即時反映（要再読込）できるという物です。開発中はこのコマンドを起動しっぱなしにするというのがお約束になりそうです。
$ npm run build
Builds the code for production.開発用では無く、完成形を作成したいときにはこちらのコマンドです。最終的に必要なファイルが変換されて出力されるという形です。開発完了時に実行するのがメインになるかと思います。
$ npm run format
Formats files.
$ npm run lint:css
Lints CSS files.
$ npm run lint:js
Lints JavaScript files.このあたりはファイルのインデントなどを整えてくれるコマンドですね。CSSを整形したり、JSファイルを整形したり…という感じでファイルの統一感を出し、WordPressのコーディングスタンダードに合わせてくれます。
$ npm run plugin-zip
Creates a zip file for a WordPress plugin.完成したプラグインはzip形式にする必要がある…という場合が多いと思います。WordPressのダッシュボードからアップロードするときのファイル形式ですね。これで配布できるようになります。おそらく最終的にはGitHub等のactions等を利用してReleasesに展開する…というときに使う事になりそうです。
$ npm run packages-update
Updates WordPress packages to the latest version.コレもなかなか大事かもしれません。npmパッケージを複数組み合わせて利用していますので、それらをアップデートして最新版で作業する必要があるという場合もあるでしょう。そのときに登場するのはこのコマンドです。コマンドが自身のアップデートをしてくれる！ とても便利ですね！
ということで、今回はここまでです。
この状態で、 npm run build すれば、プラグインとして認識されるので、WordPress側で有効化することが可能です。ただ、その前に複数ブロックに合わせるための手順などをなぞっていきたいところですね。そのあたりも含めて次回に続けようと思います。
何せ私も勉強中。ブロックエディタは過渡期だったこともあって、端から見ている期間が長かったのですが、重い腰を上げました。一緒に頑張ってくれる方がいらっしゃったら嬉しいです。
それでは、また。
