Gutenberg の カスタムブロック を 作ってみる
この記事は 2018年 11月 27日 に書かれた記事です。
この記事は WordPress Version 5.0 RC 1 の時の記事です。
WordPress 5.0 が そろそろなので カスタムブロック の 作り方 を 勉強しておこうかと思います
なんだかんだ あっという間に WordPress 5.0 RC 1 が リリースされていました
WordPress 5.0 リリース候補
https://ja.wordpress.org/2018/11/24/wordpress-5-0-release-candidate/
そこで Gutenberg の カスタムブロック の 作り方を 軽く覚えておこうと思います
参考資料
Gutenberg Examples を見ながら進めていきます
Gutenberg Examples
https://github.com/WordPress/gutenberg-examples
ただ Docker って 作業しているうちに ゴミファイルが溜まっていく気がして 好きになれないので 私は vagrant で 環境を作りながら 進めていきます
( こちらはこちらで 毎回 OSやら パッケージやらを インストールしないといけないので 無駄が多いですが 消すときに一気に消せるので 好きってだけです )
開発環境
基本的に Gutenberg Examples 通り 作業をすれば 問題なく ビルド出来るかと思います
あまりにもスムーズに ビルド出来てしまったので 記事としては 寂しいものになってしまいました…
逆に ドキュメントとして しっかり メンテナンスされているということ なのですけどね
注意点
babel と babel-loader の バージョンを合わせないといけないので Examples の package.json を 使うと スムーズです
Webpack plugin for Babel
https://github.com/babel/babel-loader#readme
1 | npm i --save-dev babel-core babel-loader@7 babel-preset-env babel-plugin-transform-react-jsx cross-env webpack webpack-cli |
Example 04 と Example 05 に 関しては 難しいので よく読んで 理解しないと Example の カスタマイズ すら 苦労します…
コンパイル時 1ファイルずつ出力したい
Example では 1つずつ出力する様に コンパイルコマンドが書いてあるのですが
ソースを 追加するたびに 追加するのは 手間かなと思いました
なので /src/ ディレクトリ内にある jsx 拡張子 の ファイル を
/resources/js/ 以下に 出力するようにしてみました
まずは glob という パッケージを 追加します
1 | npm i --save-dev glob |
webpack.config.js を 書き換えます
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | const path = require('path');const glob = require('glob');const entries = {};glob.sync('./src/*.jsx').map(function (file) {const key = file.split('/').pop().replace(/\.[^/.]+$/, '');entries[key] = file;});module.exports = {mode: 'production',entry: entries,output: {path: path.resolve(__dirname, 'resources', 'js'),filename: '[name].js',},module: {rules: [{test: /.jsx$/,exclude: [path.resolve(__dirname, 'node_modules'),],loader: 'babel-loader',}],},}; |
皆さんの環境で 調整して 使ってみてください
また コード間違ってるぞ 等ありましたら 連絡ください
さいごに
Gutenberg Examples に 書いてありますが Gutenberg developer documentation も 参考になるそうです
もっと 複雑なカスタムブロックを作る場合は 一読しておくほうが良いかもしれません
Gutenberg developer documentation
https://wordpress.org/gutenberg/handbook/