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/

Related Article

知らなかった… 投稿タイプ毎に テンプレートを 用意することができる

詳細へ »