LoginSignup
2

More than 5 years have passed since last update.

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

Posted at

はじめに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2