unitone は、unitone 独自のブロックを持っており、デフォルトのテンプレートやパターン等はこれらのブロックをフル活用してつくられています。
その unitone ブロックは「Intrinsic Web Design」「Every Layout」の考え方にインスパイアされて開発していて、ざっくりですが、下記のような特徴を持っています。
- フレックスボックス・グリッドを活用して利用可能なスペースに応じて流動的にレイアウトを決定する。
- ブレイクポイントを使用しない（画面幅に依存しない）設計にすることで、どのようなスペースにブロックを配置してもコンテンツが見づらくならないようにする。
vw・vh等のビューポート単位を活用する。min()・max()・clamp()等の比較関数を活用する。- 各ブロックには「レイアウトに関する単一の役割」がある（例えば要素間に縦方向の余白を付与する、グリッド上に並べる等）。レゴブロックのようにそれぞれの役割のブロックを組み合わせて柔軟で自由なレイアウトを実現する。
つまり、これまでの web 制作のように、デザインツールで PC・タブレット・スマホ用に幅がガッチリ固定化されたデザインを再現するのには向かないのですが「様々なサイズのデバイスが溢れる現代において、ブレイクポイントで細かく CSS を上書きせずとも自動的に崩れのないそれなりのレイアウトを実現できる」「ユーザーがどこにでも自由にブロックを配置できる WordPress のブロックテーマにもマッチする考え方である」ことから、これからの WordPress による web 制作の現場で活躍するテーマになるはずだと考えています。
実装したいデザインが、どのようなレイアウトの組み合わせでできているかを考える
まずは実装したいデザインが、どのようなレイアウトの組み合わせでできているのかをよく観察してみてください。「ここは等間隔で縦並びだな」とか、「ここは等間隔で横並びだな」とか、「ここはコンテナー幅になっているな」等々。
そこが素早く見えてくるようになると、unitone のブロックでレイアウトを組み立てるのがやめられなくなってくると思います！
unitone ブロックの特徴を理解して組み合わせを考える
unitone の各ブロックには前述した特徴があるため、コアブロック + CSS で構築するよりも、unitone ブロックの特徴を理解して組み合わせ構築するほうがメリットを享受できます。
各ブロックの説明はマニュアルをご覧ください。
また、ゼロから自分で組み立てるのは、実現したいレイアウトによっては慣れていても時間がかかるので、まずは既存のブロックパターンに近しいものがないか見てみるのが良いと思います。
ブロックインサーター → パターン → [unitone] パターンカテゴリー名に色々なパターンを用意しているのでぜひ見てみてください。
unitone ライセンスキーが有効な場合はパターンライブラリのパターンもインサーターに表示されるようになります。
ブロック間の余白は基本的には0
他のテーマではブロックの上下に margin が付与されていることが多いと思います。例えば「段落」の上下にデフォルトで 1em の margin がついている、のような感じです。
unitone は他のテーマと違い、基本的にはブロックの上下に margin が付与されていません。これは Every Layout の考え方に則ったもので、「margin はその要素自体が持つのではなく、それらを包含する親要素が子要素間に余白を設けるべき」という考えになります。余白（padding ではなく margin や gap）は他の要素との関係性の中で生まれるものであるし、それ自体が余白を持っていないほうがどのような場所にでも自由に配置しやすくなるので、個人的にもそのほうが理にかなっていると思います。
また、見出しの文字サイズについても基本的には本文と同じサイズになっています（サードパーティーの見出しタグを含むブロックを使ったときにレイアウトへの影響がでにくくするため）。
ということで、unitone では基本的にはブロック間の余白は0なのですが、ページの直下と「テキスト」ブロック、その他「.is-layout-constrained」なブロックについては、子ブロック間に適切な余白（単純に 1em ずつ空ける、ではなく、見出しの前後は広めに空けるなど調整済）が空き、見出しにも適切なサイズが反映されるようになっています。
単純にブロック間の縦方向に均等に余白を設けたい場合は「スタック」ブロックを、横方向に均等に余白を設けたい場合は「クラスター」ブロックを使うのがベターです。