ブロックエディター用の吹き出しのつくりかた（Luxeritas）

備忘録です。

繰り返して使える吹き出し

最近のブログには、よく吹き出し型のコメントが入っています。
当ブログでもやりたい！

ということで、Luxeritasを使っているここでも、吹き出しの設置に挑戦です。

吹き出しへのこだわり

SNSぽい見た目で親近感があるといったことなのだと思います。
口語体でも書きやすいです。

こだわった点は以下。

• テキスト量に合わせての可変幅
• 1ページ内には複数設置可能
• ブロックエディターが基本

これらの要求を満たすために採用したのは、Luxeritasの定型文機能です。

サンプルではダメ

Luxeritasにプリセットされているサンプルでも、コメントらしい見た目は設置できます。
ところが、このコードだと、幅が固定されてしまうのです。
解析してみようと思ったのですが、よく分かりませんでした。

色などは設定しやすくてよいのですが。。

いずれにしても、サンプルは使えません。

ブロックでは対応できない

ひとつのブロックとして、「吹き出し」が用意されています。
とても基本的なもので、画像の選択、キャプションの記入、コメントの入力、背景や枠線の設定、などなどが必要です。
幅は可変です。

自由度は高く、細かいことにも対応できるでしょう。

ただ、毎回設定していくわけにもいきません。
コメントを書くたびに画像と背景と文字色とを設定していたら、時間がもったいないです。

だからといって、再利用可能ブロックにも向いていません。。

定型文に登録

HTMLがある程度わかるので、定型文として登録することにしました。
吹き出しのHTMLを見られたので。

囲み型にして、前方の最後には、改行を入れます。
前方と後方は、単純にくっつくだけです。改行の個数はお間違えの無いよう。

定型文の呼び出しは、ブロックのツールバーで行えます。
ちなみにショートコードも登録しましたが、こちらも固定幅なので使いません。

HTMLなので注意

「定型文テキストエディタ」は、クラシックエディタとは違います。
Wiki的な書き方はできません。
カスタムHTMLに似ています。
改行する際には、かならず<br>タグが必要です。

また、プレビューしないと最終的なレイアウト結果は分かりません。
もともとクラシックエディターで編集していたわけですから、大きな問題ではありません。