unitone v6.0.1 の概要

全体的に余白のバランスを見直し、それに伴ってテンプレートやパーツの構造を変更したため、シンプルな使い方をされている場合はほとんど影響はないかと思いますが、作り込んでいたり CSS やサイトエディターでカスタマイズされている場合は大きな影響がでてしまう可能性があります。テーマとしてはかなり品質アップになっているとは思うのですが、ご迷惑をおかけしてしまった場合は大変申し訳ございません…。

先日配信した unitone v5 の動画の後半でも今回のアップデートについて触れているので良かったらぜひご覧ください。

機能追加

• テキストブロックの子ブロックも幅広・全幅にできるように（テキストブロックを .is-layout-constrained に）
• テキストブロックに gutters（左右余白）の設定を追加

変更

• 余白バランスの見直し
• テキストブロックで max-width を指定したとき、テキストブロック自体ではなく子ブロックが max-width で制限されるように変更
• settings.layout.contentSize・settings.layout.wideSize で 100% - var(--unitone--global--gutters) * 2) となっていたのを 100% に変更
• 投稿コンテンツブロックの左右に余白（var(--unitone--global--gutters)）がつくように変更
• リモートパターンの viewportWidth（プレビューの画面解像度）を 1440px に変更
• 上記変更にあわせてテンプレート・パーツを変更

不具合の修正

• WooCommerce 7.6 で商品詳細ページのクラシックテンプレートブロックが表示されない不具合を修正

余白バランスの見直し

上記のことが非常に気になっていたのですが、良い実装や余白バランスが見つけられずそのままになっていました。が、それで表現の幅が狭まってしまっては意味がないので、下記の変更を入れました。

• margin・gap・padding 共通で var(--unitone--s{スケール}) という CSS カスタムプロパティで余白サイズを指定していたが、padding については「サイズが大きいときにスマホではコンテンツが狭くなってしまう」問題に対処するために var(--unitone--p{スケール}) という padding 用の CSS カスタムプロパティを追加
• var(--unitone--p{スケール}) は var(--unitone--s{スケール}) と比べ小さい画面サイズのときの各スケール間のジャンプ率がすごく小さい
• ページの左右余白（--unitone--global--gutters）の小さい画面サイズのときのサイズを小さめに変更

これで全体的にスマホのときの見やすさが改善されたと思いますが、すでにコンテンツを作り込んでいたり CSS でカスタマイズされている場合はデザインに大きな影響がでてしまう可能性があります。大変申し訳ございません…。

テキストブロックの変更

テキストブロックは見出しのサイズを良い感じにしたり、要素間の上下余白を良い感じにするブロックです。これは投稿コンテンツブロック（投稿エディターで入力したコンテンツを表示するためのコアブロック）とほぼ同じものなのですが、「子ブロックの幅広・全幅の指定ができない」「左右に余白（gutters）がつかない」という違いがありました。

投稿コンテンツブロックが投稿や固定ページのテンプレートで使用されるのに対し、アーカイブ系ページでは投稿コンテンツブロックは使用できないため、投稿コンテンツブロックとほぼ同じテキストブロックを使用していました。

ただ、前述したような違いがあるためにアーカイブページではデザインに制限がでてきてしまうため、本来テキストブロックはあくまでコンテンツを読みやすくするためだけの役割を提供するブロックなので左右余白の設定はつけていなかったのですが、投稿・固定ページと同じようなデザインを実現できるようにするために、

• 子ブロックも幅広・全幅にできるように（テキストブロックを .is-layout-constrained に）
• gutters（左右余白）の設定を追加
• max-width を指定したとき、テキストブロック自体ではなく子ブロックが max-width で制限されるように変更

という機能追加・変更をおこないました。

これに伴い、v5 までのテンプレート・パーツの入れ子構造では各ブロックの左右余白がバッティングして意図しない余白の大きさになってしまうため、テンプレート・パーツの入れ子構造も変更しました。

こちらもすでにコンテンツを作り込んでいたり CSS でカスタマイズされている場合、テンプレートやパーツをカスタマイズされている場合はデザインに大きな影響がでてしまう可能性があります。大変申し訳ございません…。