unitone v24.0.0 の概要

機能追加

• カラーパレットの透過色にバリエーションを追加
• スライダーブロックに逆方向にスライドさせる設定を追加
• ボタンブロックとデコレーターブロックにホバー時の色を設定する機能を追加
• unitone セットアップ画面のサイトロゴのデフォルトの幅の設定に、サイズのリセットボタンを追加

変更

• カラーパレットの「背景」「テキスト」「背景（Alt）」「テキスト（Alt）」は必ず CSS カスタムプロパティになるように変更
• サイトエディターのカラーピッカーの設定で、いくつかの色については変更不可に変更
• 「設定の上書き」「セットアップ画面の色設定」のカラーピッカーから、いくつかの色の設定を削除
• テーマのスクリーンショット（テーマ一覧等に表示される画像）を新しいロゴに変更
• クエリーループに「結果なし」ブロックを追加（一覧に表示する投稿がない場合にメッセージが表示されるようになる）
• テクスチャーブロックの「間隔」と「サイズ」の上限値を大きめに変更
• Swiper を v11 から v12 にアップデート

不具合の修正

• unitone セットアップ画面・サイトエディターのそれぞれで色を変更すると、意図した色が反映されなくなる不具合を修正
• サイトエディター → スタイル → 色 → 背景・テキストを変更しても、リアルタイムにプレビューに色が反映されない不具合を修正
• サイトエディターでスタイルバリエーションを切り替えた場合、カラーパレットから色の選択肢が削れる不具合を修正
• アイッキャッチ画像・OGP 画像の生成に失敗してしまうことがある不具合を修正
• テキストストローク、テキストシャドウのポップオーバーが、スクロールに追従しない
• スライダーブロックのボタンがローディングアニメーションより前面に表示されてしまう不具合を修正
• メガメニューの背景色と、タイムラインドットのドット・ラインの色が「すべてリセット」でリセットされない不具合を修正

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

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

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

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

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

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

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

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

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

• 「サイトエディター → スタイル → 色 → 背景」にカラーパレットの「背景」を設定したり、カラーパレットの「背景」にカラーパレットの「テキスト」、「サイトエディター → スタイル → 色 → テキスト」にカラーパレット「背景」を設定すると 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 ファイル）。

カラーパレットの「背景」「テキスト」「背景（Alt）」「テキスト（Alt）」は必ず CSS カスタムプロパティになるように変更

今後の色の安定性を高めるために、「背景」「テキスト」「背景（Alt）」「テキスト（Alt）」は必ず CSS カスタムプロパティになる変更を入れました。

これらの色をカラーパレットで変更していない場合、もともと CSS カスタムプロパティです。

• 背景 → var(--unitone--color--background)
• テキスト → var(--unitone--color--text)
• 背景（Alt）→ var(--unitone--color--background-alt)
• テキスト（Alt）→ var(--unitone--color--text-alt)

そして、これらの CSS カスタムプロパティに、セットアップ画面やサイトエディターで設定した色が反映されます。

過去にサイトエディター（のスタイル → 色 → パレット）で「背景」「テキスト」「背景（Alt）」「テキスト（Alt）」の色を変更している場合は、意図した色が反映されなくなる可能性があります。その場合は、My unitone プラグインなどに下記のコードを追加して、この変更を解除してください。

remove_filter( 'wp_theme_json_data_theme', 'unitone_apply_css_vars_to_utility_colors', 10000 );
remove_filter( 'wp_theme_json_data_user', 'unitone_apply_css_vars_to_util

カラーパレットの透過色にバリエーションを追加

現在は白透過、黒透過それぞれに「ライト、ノーマル、ヘビー」の3バリエーションがありますが、今回のアップデートで「ペール、マイルド、ライト、ノーマル、ストロング、ヘビー」の6バリエーションになりました。

スライダーブロックに逆方向にスライドさせる設定を追加

「エフェクトがスライド」かつ「自動再生が有効」な場合に、逆方向にスライドさせることができるようになりました。

下記サンプルです。上が通常方向、下が逆方向。

ボタンブロックとデコレーターブロックにホバー時の色を設定する機能を追加

ボタンブロックとデコレーターブロックに、ホバー時の色の設定（テキスト、背景、枠線）ができるようになりました。

下記サンプルです。