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

[以前](https://qiita.com/ryo511/items/81d0b3c199c3a7725443)、Gutenbergプラグインの開発環境セットアップについて簡単に書きました。当時はWebpack等のビルド環境を手作りする必要があり、やや敷居が高かったです。

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

## 用意するもの

- [Docker](https://www.docker.com/)
- [Local by Flywheel](https://local.getflywheel.com/)
- [npm](https://www.npmjs.com/)
- [create-guten-block](https://github.com/ahmadawais/create-guten-block)

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. サイト名設定

<img width="995" alt="Screen Shot 2018-06-23 at 10.59.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/33450/44a77c43-3479-b813-edbd-5b0acc48788d.png">

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

### 2. 環境設定

<img width="994" alt="Screen Shot 2018-06-23 at 11.00.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/33450/726bef9c-b285-3ecc-f4df-d6f33591aa6e.png">

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

### 3. ユーザ作成

<img width="989" alt="Screen Shot 2018-06-23 at 11.03.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/33450/142cdca8-ac76-fffb-a6b2-f99caeaba742.png">

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

### 完成図

<img width="985" alt="Screen Shot 2018-06-23 at 11.04.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/33450/b19a2923-13e3-f8c1-ce4d-7a18c02464a9.png">

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

## Gutenbergのインストール

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

<img width="796" alt="Screen Shot 2018-06-23 at 11.08.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/33450/a7127e3b-2b7f-fe26-e82e-915f84ed9555.png">

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

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

<img width="801" alt="Screen Shot 2018-06-23 at 11.12.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/33450/5ce6abbf-b27a-8934-6b68-aeaf56147781.png">

これで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
```

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

<img width="801" alt="Screen Shot 2018-06-23 at 11.29.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/33450/07c3ccaf-b354-9bcc-05bb-9f6c24f394b3.png">

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

```
$ 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)しましょう。

<img width="796" alt="Screen Shot 2018-06-23 at 11.34.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/33450/bbceb074-ac6b-3a0b-c4bc-63c929eb915d.png">

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

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

<img width="795" alt="Screen Shot 2018-06-23 at 11.36.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/33450/f5712bbc-e212-ae32-e3f8-ee67ddbd2466.png">

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

<img width="807" alt="Screen Shot 2018-06-23 at 11.37.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/33450/d4a97e01-bfbb-5305-9624-0509ecf62092.png">

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

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

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

<img width="796" alt="Screen Shot 2018-06-23 at 11.45.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/33450/6372b606-cb4d-958e-7450-68d44ce9dca4.png">

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