Block Development Environment

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を構成するファイル群の作成に取り掛かります。