カスタムブロックを作ってみた

ブロックエディター（Gutenberg）にもだいぶ慣れてきました。慣れると便利です。ブロックを並べていくだけなので、HTMLを気にすることなく記事が書けます。

ただ、デフォルトのブロックだけでは、まだまだ思ったような表現ができません。

そこで今回は、最近よく見る

こんな感じの、インフォメーション的な表示のやつ

を、このブログでもやってみたくなったので、カスタムブロックで作ってみました。

公式ドキュメントの Block Editor Handbook と https://github.com/WordPress/gutenberg を参考にしました。
今回は、コンパイルなし（JSX の記述を使わない）の方法で作成しました。

デモ

アイコンには、Font Awesome のアイコンフォントや、オリジナルの画像を使用できます。

吹き出しにして、

会話風にすることもできます！

完成したカスタムブロックは、プラグインにして GitHub で公開しています。

「Block Editor Handbook」は具体的な例で説明してあるので、そのまま真似をして作ることで仕組みが理解できます。個人的に使う程度のものなら、コンパイルしない方法で作っても十分使えるものが作れると思います。

当面は今回作ったカスタムブロックを、このブログで使っていこうと思います。