WordPress5.0でブロックエディター（以下、Gutenberg）が標準化されました。
Gutenbergのカスタムブロック開発を手軽に行うには、開発環境をしっかり構築しておく必要があると思います。
一応、開発環境を構築しなくても、WordPressのローカル環境があり、JavaScriptが書ければブロック開発をすることは可能です。
けれど、JavaScriptオンリーで書くには、複雑かつ冗長な記述になり、逆に開発の手間がかかるように思います。
なので開発で楽をするなら開発環境を整えておくことをおすすめします。
というわけで以下では、「僕がいろいろGutenberg開発環境試した結果、最も簡単だった構築方法」の紹介です。
目次
主な手順
GutenbergでReact（JSX）を用いた開発環境をWindowsに作成する主な手順はこちら。
- WordPressローカル環境を準備しておく
- Node.jsをインストールする
- ターミナルでローカルのpluginsフォルダーに移動
- プロジェクトの作成
- カスタムブロックを動作させてみる
- プラグインの動作確認
今回は、単に開発できる環境を整えるまでの紹介です。
WordPressローカル環境を準備しておく
まずは、Windows上で動作するWordPressローカル環境は必要になります。
個人的なおすすめは、Local by Flywheelです。
インストール方法はこちら。
ちなみに、Local by FlywheelだけでもWP-CLIを用いることで、カスタムブロック作成はできます。
ただ、デフォルトだとJavaScriptオンリー（Reactを使用しない）開発になってしまうため、逆に難しいです。
Node.jsをインストールする
React（JSX）で開発を行うには、Node.jsというサーバーサイド環境をインストールしておく必要があります。
ページを開いたらNode.jsをダウンロードします。今回の用途であれば「推奨版」でOKかと思います。
ダウンロードし、インストーラーを起動すると、以下のような画面が表示されるので、「Next」等を押していけばインストールが完了します。
特に難しいことはないかと思います。
インストールが完了したら、コマンドプロンプトを立ち上げます。
Windowsボタンを右クリックするなどして「ファイル名を指定して実行」メニューを選択します。
名前部分に「cmd」と入力してOKボタンを押します。
コマンドプロンプトが開くので、以下のコマンドを入力してみてください。
node -v
以下のようにNode.jsのバージョンが表示されれば、インストールは成功です。
Gutenberg開発でおすすめのWindowsターミナル
コマンドプロンプトでも、Gutenberg開発は十分にできます。
ただ、コマンドプロンプトの場合、コマンドの履歴保存や、タブ表示ができないため個人的には以下のターミナル（シェル）環境がおすすめです。
ConEmu＆nyaos。
Cmder＆nyaos。
Console2＆nyaos。
タブ化ソフトは好みで。シェルはnyaosがおすすめ。
ターミナルでローカルのpluginsフォルダに移動
次に、Local by Flywheelで作成したローカル環境のプラグインフォルダに移動します。
移動コマンドはこんな感じ。
cd "C:\Users\USERNAME\Local Sites\XXXXXX\app\public\wp-content\plugins"
USERNAMEには、パソコンログイン用のユーザーネームを入力。
XXXXXXには、作成したサイトのスラッグを入力。
cd するパスは「Local Sites」という半角スペースが入ったフォルダがあるので、全体をダブルクォーテーション（”）で囲む必要があります。
cdコマンドを実行すると、現在の場所が変わります。
プロジェクトの作成
次に「demo-block」というフォルダにプロジェクトを作成します。
プロジェクトを作成するコマンドはこちら。
npx create-guten-block demo-block
「demo-block」部分がプロジェクト名（プラグインフォルダ名）になります。
コマンド実行中は、以下のような画面が表示され、しばらく待つ必要があります。
プロジェクトの作成が終わると、以下のような画面になります。
全メッセージはこちら。
C:\Users\USERNAME\Local Sites\demo\app\public\wp-content\plugins>npx create-guten-block demo-block
npx: installed 113 in 5.998s
Creating a WP Gutenberg Block plugin called: demo-block
In the directory: C:\Users\USERNAME\Local Sites\demo\app\public\wp-content\plugins\demo-block
This might take a couple of minutes.
√ 1. Creating the plugin directory called → demo-block
√ 2. Installing npm packages...
√ 3. Creating plugin files...
<img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="✅" src="https://s.w.org/images/core/emoji/11/svg/2705.svg"> All done! Go build some Gutenberg blocks.
CGB (create-guten-block) has created a WordPress plugin called demo-block that you can use with zero configurations #0CJS to build Gutenberg blocks with ESNext (i.e. ES6/7/8), React.js, JSX, Webpack, ESLint, etc.
Created demo-block plugin at: C:\Users\USERNAME\Local Sites\demo\app\public\wp-content\plugins\demo-block
Inside that directory, you can run several commands:
Type npm start
Use to compile and run the block in development mode.
Watches for any changes and reports back any errors in your code.
Type npm run build
Use to build production code for your block inside dist folder.
Runs once and reports back the gzip file sizes of the produced code.
Type npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the plugin folder. <img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="⚠️" src="https://s.w.org/images/core/emoji/11/svg/26a0.svg"> It's a one way street.
If you do this, you can’t go back!
<img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="✊" src="https://s.w.org/images/core/emoji/11/svg/270a.svg"> Support create-guten-block →
Love create-guten-block? You can now support this free and open source project. Supporting CGB means more updates and better maintenance:
Support for one hour or more → https://AhmdA.ws/CGB99
More ways to support → https://AhmdA.ws/CGBSupport
Get Started →
We suggest that you begin by typing:
cd demo-block
npm start
カスタムブロックを動作させてみる
あとは、試しにデフォルトで作成されるカスタムブロックを動作させてみましょう。
先程の長いメッセージの最後の方に以下のコマンド案内がありました。
We suggest that you begin by typing:
cd demo-block
npm start
あとはコマンドプロンプト上で、この通りに行えば良いだけです。
cdコマンドで作成したプラグインフォルダに場所を移動します。
cd demo-block
あとは、以下のコマンドを実行して、構築が完了します。
npm start
npm startコマンドを開始すると、コマンドプロンプトは以下のような状態になります。
この状態になると、「demo-block」フォルダー内を監視し、変更があれば自動でビルドしてくれる状態になります（※詳しい説明は省きます）。
作成される主なファイル
開発環境が構築されると、以下のようなファイル構造が作成されます。
├── package.json（パッケージ情報） ├── README.md（Readme情報） ├── plugin.php（プラグインとして最初に読み込まれるPHPファイル） ├── dist（ビルドしたファイルが格納される） | ├── blocks.build.js（jsファイルをすべてまとめてビルドしたファイル） | ├── blocks.editor.build.css（エディター用のSCSSファイルをすべてまとめてビルドしたファイル） | └── blocks.style.build.css（公開ページ用のSCSSファイルをすべてまとめてビルドしたファイル） └── src（主にこのフォルダで編集を行う） ├── block（カスタムブロックフォルダ） | ├── block.js（ここのブロックの動作を書く） | ├── editor.scss（エディター上のCSSを書く） | └── style.scss（公開ページ上のCSSを書く） ├── blocks.js（作成したカスタムブロックjsファイルをインポートする） ├── common.scss（共通するCSSを書く） └── init.php（CSSやスクリプトの読み込み処理を書く）
主に必要となる部分のみで、特に利用しないファイルについては割愛してあります。
参考 Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する | webOpixel
プラグインの動作確認
最後にWordPressローカル環境管理画面のプラグインページに行き、「demo-block」が作成されているかを確認します。
プラグインの有効化
作成されていれば、プラグインを有効化します。
ブロックエディター
投稿画面に移動して「ブロックの追加」から「一般ブロック」を選択して「demo-block」と表示されていれば正常に動作しています。
ちなみに、「demo-block」を選択するとGutenberg上では以下のように表示されます。
公開ページでの表示
公開ページ上では、以下のように表示されます。
新しいカスタムブロックを作るには
今回は、デモだったのでデフォルトで生成されるカスタムブロック1つだけの紹介でした。
その他のカスタムブロックを自作していく方法も簡単に書いておきます。
- 「src」フォルダ内の「block」をコピーして別名で保存（例として「block-add」とする）
- 「block-add」フォルダ内のblock.js、editor.scss、style.scssの内容を変更する
- 「src」フォルダ内のblocks.jsファイル内でインポートする
インポート記述はこんな感じ。
import './block/block.js'; import './block-add/block.js'; //←インポートを追記していく
たったこれだけで、新しくカスタムブロックを追加作成していくことができます。超簡単。
まとめ
Gutenbergの開発環境を構築するには、他にもいくつかあると思います。
ただ冒頭でも書きましたが、僕がWindows環境でいろいろ試してみた限りでは、これが最も簡単でした。
スタイルもデフォルトでSCSSで書いたら、勝手にCSSにビルドしてくれるのも楽でいいです。
とりあえず、「Windowsで簡単にカスタムブロックの開発環境を整えたい」ということであれば今回の方法はおすすめです。
