タグ: Block Editor Handbook

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要素の基本構成の準備が整いました。
次回は、いよいよエディターでのファイル編集作業が始まります。

Block Editorと独自Block開発

Block Editorは、WordPressの新しいWebサイト構築ツールです。ひとつひとつが機能を持つ、独立したBlockを組み合わせていくことで、クロスデバイス対応のWebサイトなど、デザイン性に富んだデジタルコンテンツを作成することが出来ます。

Block Editorは、次の３つのパネルで構成されています。

Inserter

Content canvasへ追加することができるBlockが格納されたパネル

Content canvas

Blockを組み合わせてコンテンツを構築するメインパネル

Settings Panel

Blockやコンテンツ、投稿記事そのものの設定を行うためのパネル

Block Editorには、様々なBlockが用意されている一方で、独自のBlockを作成することもできます。

各Blockはそれぞれ独立しており、個別に設定を行うこともできます。例えるなら、BlockはHTML要素に対応し、各要素に対してstyle属性などに個別のプロパティを設定するようなイメージです。

Blockを組み合わせて作成されたコンテンツは、Webページや投稿記事としてWordPressデータベースに保存されます。

独自のBlockを作成するための開発環境

Block Editorには、WordPress公式が用意してくれている豊富なBlockが既に存在しますが、独自のBlockを作成することも可能です。
独自のBlockを作成することで、Block Editorを更に機能的に使いこなすことができます。

独自のBlockを作成するためには、開発環境を整える必要があります。開発のための必須要件、及び、WordPress公式の推奨環境は、以下の通りです。

Code editor

Visual Studio Codeがおすすめですが、テキストファイルの編集・保存が可能であれば、どのエディターでも問題ありません。

• Visual Studio Code（英語）

Node.js development tools

最新のLTSバージョンが推奨されています。異なるバージョンのNode.jsを現在進行系で利用している場合は、nvmでのバージョン管理を推奨するほどには、最新のLTSバージョンの利用を推奨しています。
Node.jsとは、本来はブラウザ上でしか動作することのできないJavascriptプログラムを、ブラウザ外の環境下でも動作させることを可能にする実行環境です。
WordPressの豊富な機能の中には、Node.jsを必要としないものもあります。しかし、独自のBlockの開発に際してはNode.jsは必須です。

• Node.js

Local WordPress environment

ローカルデバイス上にWordPress環境を構築し、独自のBlockやその他のWordPressコンテンツの開発やテストを行うことを可能にします。
Block Editor Handbookでは、npmパッケージとして公開されている “wp-env” の利用を推奨しています。

この記事のこれ以降の内容は、ローカルWordPress環境として@wordpress/envパッケージ（wp-env）を利用する場合の、開発環境の構築インストラクションになります。
wp-env以外のローカルWordPress環境を利用する場合は、読み飛ばしてください。

Node.jsのインストール

Block Editor Handbookでは、Node.js開発環境の構築のためのページがありますが、Node.jsのインストールはご利用のデバイスに応じて、その時点での最新の方法でインストールすることをおすすめします。
一般的には、Node.js公式ページのガイダンスにしたがってインストールする方法が、最も安全かつ確実です。

• Node.js公式ダウンロードページ
• Block Editor Handbook：Node.js development environment（英語）

Dockerのインストール

@wordpress/envパッケージ（wp-env）は、WordPressの開発及びテスト環境を、ローカルマシン上に仮想空間として構築するツールです。
wp-envは、Dockerを使用してローカルマシン上にWordPress環境を構築しています。まずは、今使用しているデバイスにDockerコンテナの実行環境が整っているかどうかを確認してください。

もし整っていない場合は、以下のリンクを参考に、Docker Desktopのダウンロードとインストールを行いましょう。

• Install Docker Desktop on Mac（英語）
• Install Docker Desktop on Windows（英語）
• Install Docker Desktop on Linux（英語）

wp-envのインストール

npmパッケージである@wordpress/envパッケージ（wp-env）のインストールは、ターミナルやPowerShellなどのCLIで、以下のコマンドを実行します。

npm -g install @wordpress/env

ここまででNode.jsのインストールは完了しているはずですので、上記のコマンドも問題なく実行されるかと思います。
このコマンドは、wp-envをグローバルインストールするため、今後複数のWordPressプロジェクトを開発する予定がある場合でも、どのディレクトリからでもwp-envの実行が可能になります。

コマンドの実行が完了したら、次のコマンドで、しっかりとインストールされているかどうか確認しましょう。

wp-env --version

wp-envのバージョンが表示されれば、問題なくインストールされています。

---

ここまでの作業で、独自Block開発の前準備は終了です。この次は、プロジェクトディレクトリを作成し、独自Blockを構成するファイル群の作成に取り掛かります。