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

2019-04-04

人物のアイコン素材 その5

 
またも吹き出し問題です

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

人物のアイコン素材 その5

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

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

人物のアイコン素材 その5

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

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

人物のアイコン素材 その5

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

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

人物のアイコン素材 その5

 
おお~っ

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

人物のアイコン素材 その5

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

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

人物のアイコン素材 その5

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

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

人物のアイコン素材 その5

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

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

人物のアイコン素材 その5

 
早速作ってみましょう

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

人物のアイコン素材 その5

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

猫
 
そうそう
こんな感じにゃ

人物のアイコン素材 その5

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

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

人物のアイコン素材 その5

 
imgタグのsrcの部分等が{{と}}で囲まれていますけどこれは?

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

人物のアイコン素材 その5

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

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

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

人物のアイコン素材 その5

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

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

人物のアイコン素材 その5

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

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

人物のアイコン素材 その5

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

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

人物のアイコン素材 その5

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

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

人物のアイコン素材 その5

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

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

人物のアイコン素材 その5

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

猫
 
あとは細かい設定をすればよいだけにゃー
サイドメニューにある項目を埋めていくにゃー

猫
 
Slugは内部IDみたいな感じかにゃー。他と同じにならないようにしておくにゃー
Iconはブロックのアイコンにゃー。好みで選ぶにゃー
Categoryはカスタムブロックのカテゴリにゃー。わかりやすいようにオリジナルのカテゴリにしておくと良いにゃー

人物のアイコン素材 その5

 
他の項目は適当でいいわけですね

猫
 
触らないでいいにゃー
これで公開ボタンをクリックすれば使えるようになるにゃー

人物のアイコン素材 その5

 
おお~っ簡単でしたね
では早速試してみます
投稿でブロック追加のボタンをクリックすると
ホントに出てキターーー

猫
 
これがLazy Blocksの力よ
早速カスタムブロックを使ってみたまえ

人物のアイコン素材 その5

 
カスタムブロックを追加したらこんな画面が出ました
先程作った設定どおりですね

猫
 
各項目を入力すると一番下の部分がアップデートされるにゃー
ブロックのプレビューができるにゃー

人物のアイコン素材 その5

 
なるほど
試しに打ち込んでみますね

人物のアイコン素材 その5

 

 
おお~っ
今まで通りの吹き出しイメージが出てきました
ページのプレビューも今までとおなじになってます

猫
 
まったく同じで分かりづらいけど上の吹き出しはカスタムブロックで作ったページのプレビュー画像なのにゃー
少し見分けが付きやすいように猫が右に来ているにゃー
それでも分かりづらいので枠線も加えてみたにゃー

人物のアイコン素材 その5

 
本当に簡単にカスタムブロックを追加できましたね
公式ドキュメントを見ながらなので一時間ぐらい実際はかかりましたが次はすぐに作ることができそうです

猫
 
そうなのにゃー
最初はプラグインなんてPHP知らないしどうしようかと思ったのにゃー
Handlebarsのおかげで公式ドキュメントのサンプルをコピペ&修正していけば簡単にカスタムブロックを作れてしまったのにゃー

人物のアイコン素材 その5

 
PHPも使えるので慣れている方はPHPで作成もできて良いですね

猫
 
吹き出しは自作のカスタムブロックでいこうかと思うのにゃー
同じようなプラグインでBlock Labというのもあるからそちらを試してどうするか決めるにゃー

人物のアイコン素材 その5

 
やっと吹き出し問題も解決に向かってきたようです

Lazy Blocksで吹き出しを作成することにしました。

こちらでもう少し詳しいオリジナルブロックを作成する記事を書きました。