Gutenberg の カスタムブロック を 作ってみる

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

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 という パッケージを 追加します

npm i --save-dev glob

webpack.config.js を 書き換えます

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/