unitone v22.0.0 の概要

後方互換性に影響を与える可能性があるアップデートになるので、事前のテストを強く推奨します！

機能追加

• そのページだけ基本設定を上書きできる機能を追加

変更

• 一部の CSS の詳細度の変更

不具合の修正

• 縦書きブロックに変換しようとするとクラッシュする不具合を修正
• セクションブロックに position: sticky を設定したとき、エディター上では CSS が適用されない不具合を修正
• スライダーブロックを「フェード」にすると、エディター上で2スライド目以降のブロック追加ボタンをクリックできない不具合を修正
• 親ブロックが CSS グリッドの場合、スライドの縦横サイズが異常に大きくなる不具合を修正

そのページだけ基本設定を上書きできる機能を追加 / CSS の詳細度の変更

アクセントカラーや基本の文字サイズ等、サイトエディターやセットアップ画面で設定できますが、これらの設定を任意のページにおいて上書きできる機能を追加しました。具体的には下記の設定を上書きできます。

• アクセントカラー
• 背景色
• 文字色
• 基本の文字サイズ
• ハーフレディング
• フォント
• コンテンツ幅
• 幅広

設定画面

実際に背景色と文字色を上書きしてみたサンプル（背景色：ヘビーグレー、文字色：白）

これらの上書き機能を実装するにあたり、一部の CSS の詳細度を強める必要があり、下記の変更を行いました。

body の詳細度の変更

// 詳細度: 0 0 1
body {
  background-color: ...;
  color: ...;
  font-family: ...;
}

// 詳細度: 0 1 0
:root :where(body) {
  background-color: ...;
  color: ...;
  font-family: ...;
}

この変更により、body をセレクタにして背景色・文字色・フォントを独自に追加した CSS でカスタマイズしている場合は、そのカスタマイズが効かなくなる場合があります。

エディター上の、記事直下のブロックの max-width

// 詳細度: 0 2 0
.block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: ...;
}

// 詳細度: 0 2 1
:is(div.block-editor-block-list__layout.is-root-container:where(:not(.wp-site-blocks))) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: ...;
}

この変更により、独自の CSS で max-width が指定されているブロックを記事の直下に配置した場合、その max-width が効かなくなる場合があります。

また、上記にの変更により、プレビューの直下のブロックがコンテンツ幅になってしまうので、それに対処するために下記の CSS を追加。

.block-editor-block-preview__content-iframe .is-root-container > .wp-block {
  max-width: none;
}