てくてくあるく

WordPress の テーマ とか プラグイン に ついて 勉強しています

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

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

Related Article

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

詳細へ »

WordPress 5.4 に アップデートしました

詳細へ »

カスタム投稿 も 検索対象 に 含める

詳細へ »