unitone v4.3.3 の概要

変更

• リストビューの入れ子の階層表示を WordPress のデフォルト表示より深い階層まで対応すように変更
• レイヤーブロックのグリッドがスマホサイズで狭すぎるので少しゆるめになるように変更
• パターンは unitone v4.3.3 以上必須に変更

不具合の修正

• WordPress 6.2 で「流体タイポグラフィ」を適用したブロックがブロックバリデーションエラーになる不具合を修正
• 「流体タイポグラフィ」を有効にしていても、グローバルスタイルのフォントサイズ指定クラスで上書きされてしまい流体タイポグラフィにならない不具合を修正

レイヤーブロックのグリッドがスマホサイズで狭すぎるので少しゆるめになるように変更

16 x 9 のグリッド（+ gap）だったのですが、スマホでグリッドが潰れたり gap が大きすぎたりしていたので、潰れなくするために下記の変更をおこないました。既に使用されている場合は若干表示が変わると思います、すみません…。

[data-unitone-layout~="layers"] {
    --unitone--gap: var(--unitone--global--gap); // 変更
    --unitone--base-columns: 16; // 廃止
    --unitone--base-rows: 9; // 廃止
    --unitone--columns: var(--unitone--base-columns);
    --unitone--rows: var(--unitone--base-rows);
    --unitone--layers-gap: min(100%/var(--unitone--columns),var(--unitone--gap)); // 廃止
}

↓

[data-unitone-layout~="layers"] {
  --unitone--columns: var(--unitone--grid-columns); // --unitone--grid-columns を追加、デフォルト：12
  --unitone--rows: var(--unitone--grid-rows); // --unitone--grid-columns を追加、デフォルト：7
  --unitone--gap: min(3.33333%, var(--unitone--grid-gap));
}

WordPress 6.2 で「流体タイポグラフィ」を適用したブロックがブロックバリデーションエラーになる不具合を修正

unitone の「流体タイポグラフィ」や各ブロックの設定（gap や padding 等）は blocks.registerBlockType で編集画面の HTML の変更を、blocks.getSaveContent.extraProps で実際の画面の HTML の変更をおこなっていました。

ですが、blocks.getSaveContent.extraProps で実際の画面の HTML の変更をおこなっていました。ですが、blocks.getSaveContent.extraProps は状況によってブロックバリデーションエラーが発生したり、リカバリーするとブロックの内容が消えてしまうことがあるということがわかりました。

具体的な条件はわからなかったのですが blocks.getSaveContent.extraProps は保存される HTML 自体を書き換えるので、その辺りで影響がでてしまうことがあるみたいでした。そこで、blocks.getSaveContent.extraProps を使うのをやめて、実際の画面の HTML の変更は render_block フィルターフックでおこなうように変更しました。保存される HTML はブロックのピュアな HTML、実際に画面に表示されるのは render_block で属性等が追加された HTML、ということになります。

blocks.getSaveContent.extraProps を使うのをやめただけだと、その影響で既存のブロックがブロックバリデーションエラーになったり、そのまま更新するとそのブロックの内容が消えてしまったりすることがあるみたいだったので、編集画面を表示した瞬間に保存されている HTML の内容を正しい内容に書き換えるという処理も追加しています。おおよそ問題ないような感じだったのですが、もしかしたら完璧ではないかもしれないので、もしバリデーションエラーが発生しているブロックがある場合は、そのブロックを残したまま新規ブロックを追加、そのブロックに内容をコピーして古いブロックは削除、としたほうが安全かもしれません。

ちなみに、既存コンテンツを再保存したり再編集しない限り実際の画面への影響はありません。