unitone v24.0.0 ベータ1

サイト全体の色に関する仕様の変更・設計の変更をおこないました。色が変わってしまうなど、見た目に対して大きな影響がでてしまうと良くないので、正式リリース前に一旦ベータ版をリリースすることにしました。

いきなり本番環境でアップデートするのではなく、テスト環境でアップデートして、表示に影響がないか事前に確認することを強く推奨します。

もしアップデートしたら色が変わってしまった、のような重大な問題を発見した場合は、もともとの設定や再現手順など、情報提供していただけると助かります！（おかしくなってしまった場合は、改めて設定しなおすとこれまでより安定するはずです）

unitone v24.0.0 ベータ1 のダウンロード

Dropbox

www.dropbox.com

unitone v24.0.0 の概要

機能追加

unitone セットアップ画面のサイトロゴのデフォルトの幅の設定に、サイズのリセットボタンを追加

変更

「設定の上書き」「セットアップ画面の色設定」のカラーピッカーから、いくつかの色の設定を削除
サイトエディターのカラーピッカーの設定で、いくつかの色については変更不可に変更
テーマのスクリーンショット（テーマ一覧等に表示される画像）を新しいロゴに変更

不具合の修正

unitone セットアップ画面・サイトエディターのそれぞれで色を変更すると、意図した色が反映されなくなる不具合を修正
サイトエディター → スタイル → 色 → 背景・テキストを変更しても、リアルタイムにプレビューに色が反映されない不具合を修正
サイトエディターでスタイルバリエーションを切り替えた場合、カラーパレットから色の選択肢が削れる不具合を修正
アイッキャッチ画像・OGP 画像の生成に失敗してしまうことがある不具合を修正

unitone セットアップ画面・サイトエディターのそれぞれで色を変更すると、意図した色が反映されなくなる不具合を修正

unitone セットアップ画面では色の設定ができます。

ここでの「色の取得・更新」を、サイトエディター（グローバルスタイル）の色を参照・更新するようにしていれば良かったのですが、もともとの設計が良くなく、異なるデータを何とか同期するような設計にしていたせいで、unitone セットアップ画面・サイトエディターのどちらでも色を変更していると、何らかの拍子に意図した色が正しく反映されなくなる不具合がありました。

根本からやり直したかったのですが、そうすると後方互換性を維持するのが難しそうだったので、なるべくサイトエディターに寄せつつ、なるべく後方互換性を維持するような形に変更を入れてみました。

結構時間をかけて検証したつもりですが、もしかしたらアップデートしたら色が変わってしまうことがあるかもしれません。その場合は大変申し訳ないのですが、改めて色の再設定をお願いします…。

（とはいえ、そもそも 24.0.0 未満のバージョンでも意図した色が反映されない不具合があるので、それよりはマシになっているはずです…）

「設定の上書き」「セットアップ画面の色設定」のカラーピッカーから、いくつかの色の設定を削除 / サイトエディターのカラーピッカーの設定で、いくつかの色については変更不可に変更

unitone のカラーピッカーには、下記の「単純な色ではなく、役割を持つ色」が用意されています。

テキスト（黒 / 不変）… ダークモード対応等をした場合に、反転しても必ず文字色にしたい場所用
背景 … 背景と同じ色にしたい場所用
テキスト … テキストと同じ色にしたい場所用
背景（Alt）… 基本的には、「テキスト」と同じ色
テキスト（Alt）… 基本的には、「背景」と同じ色
inherit … CSS の inherit
currentColor … CSS の currentColor
transparent … CSS の transparent

カラーピッカーの各色はサイトエディターから色を変更できるのですが、これらの「役割を持つ色」に下記のような不具合がみつかりました。

「サイトエディター → スタイル → 色 → 背景」にカラーパレットの「背景」を設定したり、カラーパレットの「背景」にカラーパレットの「テキスト」、「サイトエディター → スタイル → 色 → テキスト」にカラーパレット「背景」を設定すると CSS カスタムプロパティが循環してしまい、色が抜ける
「役割を持つ色」は CSS カスタムプロパティで色を保持しているが、サイトエディターで色を変更すると CSS カスタムプロパティではなく単純なカラーコードに変わってしまうため「設定の上書き」が反映されなくなったり、「サイトエディター → スタイル → 色 → 背景」がカラーパレットの「背景」に反映されなくなって、役割を果たさなくなる

などの理由から、「役割を持つ色」は色を変更できないようにするのがベターかなという結論になりました。

ということで、「設定の上書き」「セットアップ画面の色設定」のカラーピッカーから、これら「役割を持つ色」を表示しないように変更しました。

また、サイトエディターのカラーピッカーの設定でも、これら「役割を持つ色」は色を変更できないようにしました。

サイトエディター → スタイル → 色 → 背景・テキストを変更しても、リアルタイムにプレビューに色が反映されない不具合を修正

CSS でも背景やテキストの色をコントロールしやすいように、下記のような CSS を適用していました。

:where(body) {
  background-color: var(--wp--preset--color--unitone-background);
  color: var(--wp--preset--color--unitone-text);
  font-family: var(--unitone--font-family);
}

が、この CSS の影響で、サイトエディター → スタイル → 色 → 背景・テキストを変更しても、リアルタイムにプレビューに色が反映されない不具合が発生していました。

この CSS は削除し、WordPress コアが適用する背景・テキスト・フォントファミリーの CSS が素直に適用される形に変更しました。

独自に CSS を追加して、これらの CSS カスタムプロパティを上書きしていた場合は影響がでる可能性がありますのでご注意ください。

サイトエディターでスタイルバリエーションを切り替えた場合、カラーパレットから色の選択肢が削れる不具合を修正

unitone のカラーパレットには赤とか青とか緑とかの膨大な色がデフォルトで設定されていますが、

スタイルバリエーションを切り替えるとこれらの色が全てなくなってしまう（カラーピッカーが表示されなくなる）不具合がみつかったので修正をおこないました。

もともとは「テーマ」カラーパレットに追加していたのですが、その方法だとどうしてもなくなってしまうようだったので、「デフォルト」カラーパレットに追加する形に変更しました。

また、これらの色と、「inherit」「currentColor」「transparent」はフックで追加していたのですが、「inherit」「currentColor」「transparent」についてはフックではなく、json ファイルで追加する形に変更しました（theme.json と、各スタイルの json ファイル）。