Gutenberg の カスタムブロック を 作ってみる (create-guten-block)

以前 も Gutenberg の カスタムブロック を 作ってみる という記事を書いたのですが
その頃よりも もっと 簡単に作れるようになっていたので その紹介となります

前回の記事は

Gutenberg の カスタムブロック を 作ってみる
https://tekuaru.jack-russell.jp/2018/11/27/2080/

このときは 自前で babel や webpack 等 を インストールして
設定値を 書いていかないといけなかったのですが
create-guten-block では そこらへんを すべて自動でやってくれます

I referred to Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する | webOpixel.
https://www.webopixel.net/wordpress/1420.html

ほぼほぼ 転載みたいな形になってしまいますが 使い方を サラッと 書いておきます
( nodejs が 入っていることが 前提です )

create-guten-block

まずは 環境を作るのですが 今回は コマンド一発で作れてしまいます

npx create-guten-block my-guten-block

しかも サンプルコードがついているので
src ディレクトリ の block ディレクトリ を 複製して
サクッと カスタムブロックを 増やせます

src ディレクトリ の blocks.js で import してやれば 表示されます

src ディレクトリ の init.php を 編集すれば 読み込み時の 名前等も 変更できます

前回の記事みたいに 1つのブロック毎に JS を 出力することはできなさそうでした

ただ それ以上に わかりやすくまとめられていて とても使いやすかったですね