Tutorial: Build your first block – 1

Copyright Date Blockを作ってみよう

ほとんどのWebサイトで目にする著作権表示 “Copyright Date Block” の作成を通じて、独自Block開発のイロハを見ていきましょう。WordPress開発の経験があれば理解は早いですが、このチュートリアルはWordPress開発未経験の方を対象としたもののため、ご安心ください。
全て読み終える頃には、独自Block開発の基本的開発スキルが身に付いていることでしょう。

このチュートリアルで作成する Copyright Date Block は、以下のリンクで確認できます。

• WordPress Playground
• WordPress Block Development: Quick Start Guide（YouTube）

Copyright Date Blockは、最新のJavascriptを使用したプラグインとして、新しいBlock Editorで編集可能な独自Blockを実装します。

なお、このチュートリアルを進めるに当たり、開発環境として以下のツールがデバイスにインストールされていることを前提としています。

• Code editor
• Node.jsdevelopment tools
• Local WordPress environment

もし、まだインストールしていない場合は、前回の記事を参考に、先に環境構築を済ませてください。

create-blockで基本構造を準備する

初めての独自Block作成の第一歩は、@wordpress/create-block（create-block）パッケージを使用して、Blockの基本的な構成要素を作成することです。
create-blockは、独自Blockを構成する不可欠なファイル群を自動的に作成してくれるWordPress公式ツールです。複雑な設定作業をすることなく、独自Blockの開発に着手することができます。

それでは、プロジェクトディレクトリとしてblock-tutorialディレクトリを作成し、create-blockを実行しましょう。

mkdir block-tutorial
cd block-tutorial
npx @wordpress/create-block@latest copyright-date-block --variant=dynamic

コマンド実行完了後、block-tutorialディレクトリ内にはcopyright-date-blockディレクトリができあがっています。このディレクトリの中には、独自Blockを構成する必要最低限のファイル群が、既に作成されています。これらのファイルを編集して、Copyright Date Blockを作り上げます。

この時点で、Blockを登録するための基本的なコードが生成され、WordPressがこのコードを読み込むことで、Block Editorに”Copytight Date Block”というスラッグのBlock要素が追加されます。
ローカルWordPress環境を立ち上げて、作成されたコードを読み込ませ、create-block直後のBlock要素の状態を確認しておきましょう。

作成されたcopyright-date-blockディレクトリに移動し、WordPressのローカル環境を立ち上げて、Block Editorを開きます。

cd ./copyright-date-block
wp-env start

上記のコマンドの初回実行時には、コンテナイメージのダウンロードや環境構築のため、実行完了までに少し時間がかかります。
ローカル環境の立ち上げが完了したら、ブラウザで http://localhost:8888/wp-admin/ にアクセスし、WordPress管理画面にログインしてください。ユーザー名は admin 、パスワードは password です。
日本語化されていない管理画面が表示されます。

メニュー内の Posts > Add Post からBlock Editorに遷移し、ヘッダー内の + アイコンをクリックしてInserterを表示後、Blocksタブの検索ボックスに “Copyright Date Block” と入力すると、create-blockで作成されたばかりの Copyright Date Block が抽出されます。

このBlockを選択してContent canvasに挿入した図が、以下です。

これが、create-blockで作成された直後のBlock要素の状態です。ここから、このBlockの構成ファイルを編集していきます。

なお、上記のコマンドで立ち上げたローカルWordPress環境（Dockerコンテナ）は、ブラウザタブを閉じても、自動的には停止しません。コンテナは明示的に停止させる必要があります。
ローカルWordPress環境を使用しなくなった場合は、以下のコマンドでコンテナを停止するようにしてください。

wp-env stop

wp-scriptsでテンポよく開発する

いよいよ開発作業に取り掛かる……としたいところですが、構成ファイルの編集を始める前に、もう一つ、頭に入れておくべきツールがあります。
@wordpress/scripts（wp-scripts）です。
wp-scriptsは、create-blockでBlockを自動構築する際に、一緒にインストールされます。

WordPress公式の言葉を借りると、wp-scriptsは『JavaScriptのビルド作業を必要とするWordPress開発の標準化と簡素化を目的としたツール』です。ReactなどのJavaScriptフレームワークの開発経験がある人には馴染みのある内容でしょうが、いずれにせよ、wp-scriptsの処理プロセスの詳細な理解は、独自Blockの開発には全く必要ありません。
ただし、wp-scriptsが何をしてくれて、なぜ wp-scriptsのコマンドを忘れずに実行しなければならないのかを理解することは、独自Blockを始めとしたWordPress開発を行う上で、必ず助けになるでしょう。

Blockモジュールシステムを導入した新しいWordPressも、依然としてサーバーサイドの処理の大半はphpプログラムで実行しています。
しかし、フロントエンドのBlock Editorは、別です。こちらは、最新のJavaScriptフレームワークを利用して動作しています。

JavaScriptフレームワークの構成ファイルは、安定稼働を前提としているサーバーと異なり、マシンスペックや利用環境の影響を大きく受けるWebブラウザで実行されます。そのため、これらのプロジェクトファイルは、配信の容易さやクロスブラウザ環境下での安定性等の観点から、ファイルの加工・再構築を行い、配信用に最適化したファイルを作成し、Webサーバを通じて公開しています。
この『加工・再構築』の作業を、ビルドと呼びます。

さて、ここでCopyright Date Blockの開発に話を戻します。
このチュートリアルの開発作業は、大まかには以下の流れで進みます。

1. create-blockで、Copyright Date Blockの構成ファイルを自動作成する
2. wp-env startで、ローカルWordPress環境を立ち上げる
3. 1で作られたファイル群に対し、editor（Visual Studio Code）を使用して、ファイルの追加・削除・編集を行って、必要な機能を追加していく
4. 3で追加・削除・編集作業の結果を、2で立ち上げたローカルWordPress環境にWebブラウザでアクセスし、確認する
5. 3、4を繰り返す
6. 全ての編集作業が終了したら、Copyright Date Blockの構成ファイルをビルドし、公開用ファイルを作成する

この作業フローは、先程のビルド作業の概要と矛盾する部分があります。
3で行ったファイルに対する変更をWebブラウザで確認するためには、3と4の間に『公開用ファイルのビルド』『公開用ファイルのサーバー（今回の場合、wp-env上のローカルWordPressサーバー）へのアップロード』が必要なはずです。なぜなら、追加・編集したJavaScriptフレームワークの構成ファイルは、そのままの形ではWebブラウザ側の表示に反映されないからです。
そのため、本来であれば、Copyright Date Blockの構成ファイルに施した変更を確認したいと思ったら、その都度、プロジェクトファイルのビルドをし、ビルドファイルを公開用ディレクトリにアップロードしなけらばなりません。

これが、wp-scriptsが最も必要とされる理由です。

wp-scriptsは、監視対象に設定したファイルに変更が加えられると、変更を検知し、その変更差分をビルドし、変更された部分だけを置き換えます。
これらの作業を、自動で行ってくれるツールなのです。
wp-scriptsがあるおかげで、構成ファイルを変更する度にビルド作業を挟む必要がなくなり、上で示したような流れで開発を進めることができるのです。

wp-scriptsは、以下のコマンドで実行します。

npm start

create-blockコマンドがwp-scriptsをインストールしてくれているので、上記のコマンドのみで、プロジェクトディレクトリ内のファイルが監視対象に設定されます。
このコマンドを実行すると、ターミナルはwp-scriptsをフォアグラウンドプロセスとして実行し、プロンプトの入力を受け付けない状態になります。
wp-scriptsを停止する場合は、ターミナル上で Ctrl + C をタイプしてください。

---

前回の記事でデバイスの開発環境の準備が整い、本記事でBlock要素の基本構成の準備が整いました。
次回は、いよいよエディターでのファイル編集作業が始まります。