WordpressのGutenbergを簡単に拡張できる「create-guten-block」を使ってみる

#はじめに
Wordpress 5.0のリリースと共にエディターがGutenbergになるのですが、既存のエディターに対してカスタマイズを施している場合、(テキストエディターのクイックタグでスタイルをあてている等）機能を拡張していく(ブロックを開発する)必要が出てきます。

そこで、Gutenbergの機能を簡単に拡張できるcreate-guten-blockを使用してよかった点やイマイチな点等をまとめてみたいと思います。

##create-guten-block実装方法
やり方はこちらの記事が詳しいです。

##良い点
###設定が比較的不要
create-guten-blockの場合、package.jsonにcgb-scriptsというライブラリをインストールするだけで他の依存するライブラリを一手に管理してくれます。もしcreate-guten-blockと同等の環境を作る場合、以下のライブラリを入れる必要が出てきます。

package.json

...
"dependencies": {
    "autoprefixer": "^7.2.4",
    "babel-core": "^6.25.0",
    "babel-eslint": "^8.2.1",
    "babel-loader": "^7.1.1",
    "babel-preset-cgb": "^1.6.0",
    "cgb-dev-utils": "^1.5.0",
    "chalk": "^2.3.0",
    "cross-env": "^5.0.1",
    "cross-spawn": "^5.1.0",
    "eslint": "^4.15.0",
    "eslint-config-wordpress": "^2.0.0",
    "eslint-plugin-jest": "^21.6.1",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.5.1",
    "eslint-plugin-wordpress": "^0.1.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "filesize": "^3.5.11",
    "fs-extra": "^5.0.0",
    "gzip-size": "^4.1.0",
    "inquirer": "^5.0.0",
    "node-sass": "^4.7.2",
    "ora": "^1.3.0",
    "postcss-loader": "^2.0.10",
    "raw-loader": "^0.5.1",
    "resolve-pkg": "^1.0.0",
    "sass-loader": "^6.0.6",
    "shelljs": "^0.8.0",
    "style-loader": "^0.19.1",
    "update-notifier": "^2.3.0",
    "webpack": "^3.1.0"
  },
...

これだけ記述がされていると使用しているライブラリがわからず、どのライブラリが使わなくなったのか等の把握も難しくなってくるため、cgb-scriptsでひとまとめにされている点は良かったです。

###転用がしやすい
create-guten-blockはwordpressのプラグインを作成してgutenbergのカスタマイズを行います。そのため、他サイトに作成したプラグインをコピーして同じ機能が使えるという点が良いと思いました。

##イマイチな点
###プラグインのバージョン管理
自分の場合、一つのWordpressテンプレートディレクトリ(wp-content/themes/)に対してgitでバージョン管理を行っていたのですが、create-guten-blockはwp-content/plugins/のディレクトリに生成されるため、別途gitを用意してバージョン管理をする必要がありました。
そうなると、デプロイ時にテンプレートとプラグインでそれぞれpullする必要があるため、管理が面倒でした。

##参考
Gutenberg
https://ja.wordpress.org/plugins/gutenberg/
Gutenberg機能開発ドキュメント
https://wordpress.org/gutenberg/handbook/designers-developers/developers/
create-guten-block公式
https://ahmadawais.com/create-guten-block-toolkit/
create-guten-block Github
https://github.com/ahmadawais/create-guten-block
create-guten-block実装方法
https://qiita.com/ryo511/items/d6ad78fc8c7076116f8f