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

前回の記事は

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

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

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 を 出力することはできなさそうでした

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

Related Article

Bootstrap v4.0.0-beta で テーマ を 更新しました!!

詳細へ »

Theme Customization API て 意外と簡単だった!!

詳細へ »

Instant Articles for WP の 出力 を カスタマイズ する ( SyntaxHighlighter Evolved の ショートコード 対応 )

詳細へ »