Gutenbergで簡単にカスタムブロックがつくれるLazy Blocks

2019-04-042020-07-11

またも吹き出し問題です

今のところ、Classicブロックでなんとか堪え忍ぶ毎日なのにゃー
いい加減、辛くなってきたのにゃー

しっくりくるプラグインが見つかるといいのですが。
前回の吹き出しプラグイン探索はこちらを参照してください。

Gutenbergと吹き出し対応を考える

WordPressバージョン5がリリースされてから数ヶ月たったのでそろそろアップデートを考え ...

https://possiblytrue.com/インターネット/gutenbergと吹き出し...

一長一短があって吹き出しプラグインを決めることができなかったのにゃー

うーむ、このままだと本当に自作するしか無いですかね
むちゃくちゃ難しそうですけど

フフフッ
カスタムブロックの自作が難しかったのはとうの昔のこと
時代は常に進歩を続けているのだよ

なにやら自信有り気なこの雰囲気
一体・・・・・

ズバリ！！！！
カスタムブロックを簡単に作れてしまうプラグインを見つけたのでしょう！！！

おお～っ

その名もLazy Blocks
神はここに光臨なされた…..

Custom Blocks Constructor – Lazy Blocks – WordPress プラグイン |

Gutenberg カスタムブロックとカスタムメタフィールドをハードコーディングなしで簡単に作成します。

https://ja.wordpress.org/plugins/lazy-blocks/

Lazy Blocks – Gutenberg Custom Blocks Visual Constructor

Visually create custom Gutenberg blocks with no coding hassle in WordPress

https://lazyblocks.com/

（惰性なコイツにおあつらえ向きのプラグイン名やないか）

インストールは公式プラグインなのでLazy Blocksで検索して有効化するだけなのにゃー
有効化するとこんな感じでメニューが追加されるにゃー

ここまでは普通のプラグインですね

新規追加をクリックするとエディター画面になるにゃー
Luxeritasの項目も表示されるけど無視していいにゃー
使うのはControlsとCodeの部分にゃー

普通の投稿画面とそっくりですね
ControlsとCodeで作り込んでいくわけですね

そうなのにゃー
タイトルはプラグイン名になるにゃー
機能はControlsとCodeで作っていくにゃー

早速作ってみましょう

イメージとしてはHTMLにパラメータ入力インターフェイスをくっつけたものをブロック化する感じにゃ
つーことでまずはCodeでHTMLを入力にゃー

なるほど
ここに普段使っている吹き出し用のHTMLを入力すればよいのですね

そうそう
こんな感じにゃ

FrontendとEditorがありますけどどうすればよいですか？

Frontendはプレビューとかの出力、Editorはそのままエディター画面のことにゃー
同じHTMLをコピペしておけばよいにゃー

imgタグのsrcの部分等が｛｛と｝｝で囲まれていますけどこれは？

これがパラメータ部分にゃー
可変の値の部分は｛｛icon.url｝｝とか入力しておくにゃー
このあと設定するControlsの設定とリンクしているにゃ

変数ってことですね
Controlsで変数の設定をしていくわけですね

そんな感じにゃー
ということで次はControlsにゃー
ControlsにあるAdd Controlsをクリックするとこんな感じで画面が出てくるにゃ

Labelは入力画面のフィールド名にゃー
Nameは変数名にゃー。Codeで設定した変数と同じにする必要があるにゃー
Typeは入力画面でどういうふうに入力するか決めるにゃー
例えば一行ですむ場合はText、複数行ならText Areaという感じにゃー

iconの場合は画像から選びたいのでImageにするわけですね

そうなのにゃー
Imageにするとメディアライブラリから選べるにゃー
そうするとicon.urlとかに画像のURLが反映されるにゃー

なるほど
分かってきました

Typeによってどういう動きになるかはドキュメントに書いてあるから読むにゃー

chat_icon_descriptionやcontentも同じ要領で追加していけばよいわけですね

そうなのにゃー
ほとんどの場合、TypeはTextだけで十分にゃー
吹き出しの場合は複数行必要で装飾もちょっとしたいからRich Textタイプにしたけどにゃー

そういえばcontentのところだけ｛｛｛と３つになっていますね
これはなぜでしょうか？

実はコレ
Handlebars というテンプレート文なのにゃー
見れば分かる通り直感で書いていけるすごいヤツなのにゃー
Rich Textタイプだと装飾に使ったHTMLタグも出力するけど｛｛２つだとエスケープされてしまうにゃー
エスケープされると想定の動作をしてくれないのでエスケープしないように｛｛｛３つにするにゃー

なるほど
他の項目はどうしたらいいでしょうか？

Placeholderとか他の項目は適当でいいにゃー
あとで調整できるから好みで設定しておくにゃー

了解です
こんな感じで設定しました