create-guten-blockで手軽にGutenbergプラグイン開発環境を整える

以前、Gutenbergプラグインの開発環境セットアップについて簡単に書きました。当時はWebpack等のビルド環境を手作りする必要があり、やや敷居が高かったです。

また、当時はGutenbergチームが使っているのと同じ開発環境を使って開発していましたが、この開発環境は更新頻度が高く、そのたびにローカル開発環境の調整が生じて面倒でした。そこで、開発環境のセットアップ方法を見直し、より簡単で、かつ、安定した開発環境を作れるようにしました。

用意するもの

Dockerは様々なOSをコンテナ化して動かすためのツールで、ここではWordPressのローカル実行環境を作るために使用します。
Local by FlywheelはWordPressのローカル実行環境の作成・管理ツールで、内部ではDockerを使用しています。

npmはJavaScriptのライブラリを管理するツールで、create-guten-blockはJavaScriptで書かれたGutenbergプラグイン作成コマンドです。

これらのうち、必須なのはnpmとcraete-guten-blockだけです。Docker + Local by Flywheelは、WordPressの実行環境を簡単に作れるため採用していますが、他の方法でも問題ありません。

WordPressローカル開発環境の構築

Local by Flywheelを使えば、ボタンをポチポチ押していくだけでローカル開発環境が作れます。

1. サイト名設定

ローカル開発環境の配置やアクセスする際のホスト名も設定できます。

2. 環境設定

Preferredを選ぶとオススメの組み合わせになります（↑の実行次点ではPHP 7.1/nginx/MySQL 5.6）。Customにすれば、PHP 5.6や7.2も選べます。WebサーバはnginxではなくApacheを使うこともできます。

3. ユーザ作成

最後にWordPressの管理ユーザを作成して、完了です。

完成図

http://creategutenbergplayground.local/wp-admin/ にアクセスすれば、管理画面が表示されるので、さきほどのユーザとパスワードを使ってログインします。

Gutenbergのインストール

現在の最新版はWordPress 4.9.6であり、まだGutenbergは本体に統合されていません（5.0で統合予定）。そこで、Gutenbergプラグインをインストールします。

インストールしたら、忘れずに有効化（Activate）しておきましょう。

Gutenbergがインストールされた状態で記事の新規追加を選択すると、以下のような画面が表示されるはずです。

これでWordPress + Gutenberg環境の構築は完了です。

create-guten-block

ここからは、create-guten-blockコマンドを使ってGutenbergプラグインを作っていきます。

まずはターミナル（またはコマンドプロンプト等）を開き、先ほど作成したWordPressのディレクトリに移動します。

$ cd ~/Local\ Sites/creategutenbergplayground

ここは以下のような構造になっています。

$ tree -L 2
.
├── app
│   └── public
└── logs
    ├── mysql
    ├── nginx
    ├── php
    └── supervisor

7 directories, 0 files

このうち、app/publicディレクトリに、WordPressのアプリケーションがインストールされています。今回はプラグインを追加したいので、この下の wp-content/plugins に移動します。

$ cd app/public/wp-content/plugins
$ ls
gutenberg index.php

ここにはgutenbergプラグインだけがある状態になっているはずです。ここに新しいプラグインを追加します。

$ create-guten-block my-block

しばらく待つと、インストールが完了します。

以下のような構造のディレクトリ・ファイルが作成されます。

$ tree my-block -L 1
my-block
├── README.md
├── dist
├── node_modules
├── package-lock.json
├── package.json
├── plugin.php
└── src

3 directories, 4 files

このうち、普段の開発で編集するのは主にsrcディレクトリの中です。

編集のテストをするため、npm startコマンドで変更を検知する(watchする)ようにします。 これを忘れると、srcの下を編集しても反映されないので注意してください。

$ cd my-block
$ npm start

今作成したプラグインを有効化するため、WordPressの管理画面に戻ります。my-blockというものが追加されているので、これを有効化(Activate)しましょう。

次に、記事の編集画面に行って、ブロックの追加を選択します。

すると、今追加したmy-blockというものがブロックの一覧に追加されています。

これを追加してみると以下のように表示されます。

この内容を編集してみます。src/block/block.jsをエディタで開いてください。
22行目あたりのedit関数を以下のように書き換えます。

    edit: function( props ) {
        return (
            <div className={ props.className }>
                Hello, editor!
            </div>
        );
    },

この後、保存してWordPressの画面をリロードすると、画面が以下のように変わります。

あとは通常通り、edit()で初期状態の表示、save()で保存時の処理を行うように実装していけば、Gutenbergのカスタムブロックを作っていくことができます。