この記事は、「Vektor WordPress Solution Advent Calendar 2024」の６日目の記事です。

VK Blocksとは

VK Blocksは、Gutenberg のブロックやツールバーを拡張するプラグインです。
通常では使えないカスタムされたブロックが多数用意されていて便利です。

僕自身もレスポンシブスペーサーブロック（画面幅に応じて大きさを変えることができるスペーサーブロック）など、よく使っています。

VK Blocks

ツールバーにも注目

しかし、今回注目したいのは、ブロックの方ではありません。

このプラグインはツールバーの機能も拡張してくれます。
このツールバーの拡張が、痒い所に手が届く感じでとても助かっています。

ツールバーとは、ブロックにフォーカスしたときに上（画面内の位置によっては下）に出てくる、ブロックに変更を加える要素が載せられたバーのことです。

見出しや段落ブロックのツールバーは、デフォルトでは太字や斜体のほか「V（下矢印）」をクリックすると、ハイライトや打ち消し線などが選択でき、ドラッグで選択した範囲にそれらのスタイルを当てることができます。

No wrapを活用

このツールバーの中でも個人的には特に「No wrap」という機能がおすすめです。

「No wrap」を選択すると、選択範囲に「white-space: nowrap」というスタイルが適用された状態になります。
この状態になると、コンテンツ幅が狭まってテキストが改行していくときに、この範囲の文字は途中で折り返さず、まとまって下の行に落ちてくれるようになります。

これを利用すると、画面幅によって読みづらいところで改行されることがなくなるので、意図した改行を実装しやすくなります。

デバイスごとに改行位置を変えたいというようなときには、デバイスごとに改行を入れる機能もあり、そちらを使うのでもできます。ですが、このやり方であれば、ちょうど文章がコンテンツ幅に収まらなくなったポイントで改行してくれるので、複数のデバイスサイズなどを考慮することなく、読みやすい位置での改行をすることができます。

white-space: nowrapってなに？

一応、「white-space: nowrap」ってどんなcssなのかを書いておこうと思います。

「white-space: nowrap」とは、指定範囲の途中でテキストが折り返すのを禁止するcssです。（brタグは効く）

例えばテキストが1文字だけ落ちてしまうときなど、1行に収めて読みやすくすることができます。

※なお、指定した範囲が長すぎると、コンテンツ幅を飛び出してしまうので注意が必要です。

テキストが折り返さないということはその指定された範囲が一つのまとまりとして扱われるため、その部分が画面内に収まらなくなると下に落ちるしかなくなるということで、文章の折り返し位置を操作することができるというわけです。

まとめ

• VK BlocksはGutenberg のブロックやツールバーを拡張するプラグインだよ
• ブロックだけでなくツールバーの機能も拡張してくれるよ
• ツールバーの「No wrap」という機能を使うと、改行をいい感じにできるよ

ということで、VK Blocksのお話をさせていただきました。
まあ、ほぼwhite-spaceの話だったわけですが・・・。

こういった痒いところに手が届く感じの機能を提供してくれるプラグインはやはり重宝しますね。
特に改行位置は地味なようで、Webサイトの可読性を考えると重要なポイントで、どこまでこだわるか、どこで妥協するかなど苦心するポイントの一つではあると思うので、それを調整できる機能を提供してもらえるのはとても助かります。

自分自身、VK Blocksをそこまで使い込んでいるわけでもないので、まだまだ知らない機能があったり、実はとんでもない勘違いをしてる可能性もありますが、そこはいろいろ教えていただけるとうれしいです。

ブロックやツールバーの拡張は自分でコードを書いて実装することもできますが、こういったプラグインを活用していくことで構築の時間を短縮できたり、制作者や詳しい人の力を借りることもできるので、臨機応変に活用していけるといいのかなと思います。