GutenbergのSpacer blockは段落の改行ではなくpage固有の間隔に使う

GutenbergのSpacer blockは、文章を入れずに画面上の間隔を作るためのblockです。見出しの前後、案内のまとまり、画像と次の説明の間など、ある投稿だけで必要になる間隔には使えます。ただし、段落へ改行を重ねて位置を動かす代わりにはしません。すべての投稿に共通する見出しと本文の間、記事の端と本文の間、画面幅に応じて変わる余白は、themeのCSSで管理します。

Gutenberg 2.8には、空の領域を作るSpacer blockが加わりました。開発はeditor projectの第一段階を仕上げ、mergeへ向けて進められています。新しいblockを見つけたからといって、既存の投稿へ一斉に空白を足す必要はありません。まず、どの間隔が文章の構成に必要なのかを決めます。 WordPress Coreの案内

空白の役割を文章と見た目で分ける

記事には、読み手へ話題の切り替わりを伝えるための区切りがあります。たとえば、サービスの説明をしたあとに申込みの条件を示すなら、見出しと段落によって内容の順序を伝えます。ここへ余白を付けるとしても、何を説明しているかは見出しと文章で残します。Spacer blockだけを置き、空白の前後にどんな関係があるかを任せてはいけません。

一方で、投稿固有の見せ方として少し間を取りたい場合があります。写真のあとに短い補足を置くとき、本文の途中へ引用と次の説明を置くとき、日付の異なる案内を一つのpageに並べるときなどです。文章の意味は変えず、読んだときのまとまりだけを分けたいなら、Spacer blockを検討できます。空白は内容を増やすものではなく、すでにある内容の関係を見やすくする指定です。

この二つを混ぜると、更新のたびに判断が増えます。改行だけの段落を何行も入れて間を作ると、編集画面では空いて見えても、文字の大きさやthemeのstyleが変わったときに同じ位置へ残るとは限りません。空の段落が文章なのか装飾なのかも、引き継いだ人には分かりません。文字の改行は段落の中で行を変えるために使い、内容のない間隔はSpacer blockかCSSのどちらが持つかを決めます。

投稿ごとに必要な間隔だけSpacer blockへ置く

Spacer blockが向くのは、同じsiteの全pageへは必要ない間隔です。たとえば、採用pageで募集内容の説明と応募方法の間に、写真や図を置かずに一度間を取る場合を考えます。募集の条件と応募先は、見出しと本文で読めるようにします。そのうえで、そのpageだけにまとまりを作りたいなら、Spacer blockを一つ置きます。

反対に、全ての記事で見出しの下へ同じ間隔が必要なら、投稿のたびにSpacer blockを加える仕事にはしません。見出しのclassと本文のclassをtheme側で確認し、共通のmarginかpaddingを決めます。投稿が百本になったあとで間隔を替えたくなったとき、themeに一つの指定があれば直す場所も一つです。各投稿へSpacer blockを置いていれば、必要なpageを探し出し、同じ高さへ直す作業が残ります。

次のように、誰が間隔を持つかで判断します。

表の判断は、空白の高さだけで決まりません。内容の変更を誰が行うか、themeを更新するときにどこまで影響させるか、狭い画面でどのくらい間が見えるかを一緒に考えます。投稿担当者がpageごとの構成を直せるようにし、site全体の約束はthemeを管理する側が持つ方が、仕事の境目が明確になります。

高さを決める前に公開画面の文章を読む

Spacer blockを追加するときは、編集画面の白い余白だけを見ません。下書きの公開画面を開き、空白の直前と直後の見出し、段落、linkを続けて読みます。間があることで二つの説明が別に見えるのか、それとも一つの説明が途中で切れたように見えるのかを確かめます。余白が必要な理由を一文で言えないなら、blockを足す前に文章の順序を直します。

説明用の仮例として、施工の流れを紹介するpageを考えます。「お問い合わせ」「打ち合わせ」「公開後の更新」という三つの説明があるなら、先に各項目へ見出しを付けます。各説明の量が大きく違い、二つ目の前だけ間を取りたいときは、その理由を確認します。打ち合わせの説明にだけ写真が続くため間を取るのか、全ての項目を同じ形式で読ませたいのかで、置く場所が変わります。見出しの規則をそろえたいならCSS、二つ目の投稿固有の構成だけを整えたいならSpacer blockです。

高さを大きくすれば区切りが明確になるとは限りません。狭い画面では、同じ空白でも本文数行分に見えます。読者が画面を送ったとき、次の見出しだけが突然現れるようなら、空白が内容より強くなっています。PCの幅だけで決めず、狭い幅でも前後の文章が続いて読めるかを確認します。画像の読み込み、広告枠、外部のwidgetが近くにある場合も、空白の見え方を別に見ます。

既存の投稿を直す前に一つの下書きで確かめる

Gutenberg 2.8のSpacer blockは、editorの機能です。siteのthemeがその空白をどう見せるか、既存のshortcodeやcustom HTMLを含む投稿がどのように編集されるかは、blockを追加した事実だけでは決まりません。新しい編集方法を試すなら、公開済みの記事をまとめて開き直す前に、内容を複製した一つの下書きで確認します。

確認する順序は、まずSpacer blockを一か所へ置きます。次に、編集画面でblockを選び直し、高さを変えたり削除したりできるかを見ます。その後、公開画面でPCと狭い画面を開き、前後の文章、画像、link、次の見出しを確認します。最後に、blockを外したときに文章の順序やlinkが残るかを見ます。この順序なら、空白の調整と投稿内容の変更を同時に進めずに済みます。

作業を依頼する場合も、「間を空ける」とだけ渡さない方がよいです。対象URL、どの説明の前後か、共通のstyleにするか投稿固有か、狭い画面で確認する幅、編集担当者が後から高さを替えるかを渡します。制作側がCSSで直すべき所へSpacer blockを置いたり、投稿側で持つべき構成をthemeの指定へ隠したりする失敗を減らせます。

Spacer blockは文章の不足を埋めない

空白を加えると読みやすくなる場合はありますが、説明が足りないことは直せません。たとえば、申込みの条件を書かずにbuttonの前だけを広く空けても、読者は何を確認すればよいか分かりません。画像の意味が説明されていないなら、画像の下を空けるよりcaptionか本文を足す方が先です。視線を誘導するための間隔と、判断に必要な情報は別です。

また、Spacer blockを使うpageは、作った人だけが高さの理由を知る状態にしないでください。page固有の構成として残すなら、編集メモに目的を書きます。全体の見た目を管理するなら、themeのCSSとその変更場所を引き継ぎます。作業を頼んだ人がblockを置いたとしても、投稿内容とthemeを誰が更新できるかはsiteを持つ側が把握します。

最初の一手は、余白が気になるpageを一つ選び、その空白が投稿固有かsite全体の規則かを書き出すことです。投稿固有ならSpacer blockを一つだけ試します。共通の規則ならthemeのCSSを確認します。空白の見た目を急いで揃えるより、内容、間隔、更新する場所を分ける方が、次の編集でも迷いません。