unitone v16.0.0 の概要
機能追加
- 「テキストで背景を切り取る（
background-clip: text）」の機能を追加 - div ブロックでラップ・アンラップできる機能を追加
- div ブロックに全幅・幅広にできる機能を追加
- フロントで
position: relativeにするブロックタイプをカスタマイズできるフィルターフックunitone_block_types_allowed_to_add_block_list_dataを追加
変更
- フロントでは全 HTML 要素が
position: relativeだったのを、コアブロックと unitone ブロックだけがposition: relativeになるように変更 - 背景フィルター（
backdrop-filter）の実装を改善 - エディター上で表示されるスライダーブロックのスライド選択ボタンの表示を改善
不具合の修正
unitone_is_outer_block_linkフィルターフックがtrueのとき、クエリーブロック内のページネーションがクリックできなくなる不具合を修正- 子ページの一覧ブロックのブロックスタイルが「ボックス」「パネル」のとき、「さらに詳しく」をクリックしてもページが遷移しない不具合を修正
- エディター上でスライダーブロックの「前へ/次へボタン」「ページネーション」が邪魔で、スライド内のコンテンツを触れないことがある不具合を修正
- 「流体タイポグラフィ」が有効なとき、リサイズすると
Uncaught ResizeObserver loop completed with undelivered notifications.が発生する不具合を修正
「テキストで背景を切り取る（background-clip: text）」の機能を追加
「背景画像の設定が可能」あるいは「背景グラデーションの設定が可能」なブロックに、background-clip: text のサポートを追加しました。background-clip: text を有効化すると、背景画像・背景色をテキストの形でマスクできます。
backdrop-filter は「背後にあるブロック」に対して影響を与えますが、background-clip: text は「そのブロックに適用してある背景画像・背景グラデーション」に対して影響を与えます。似ていて混乱しやすいと思うのでご注意ください。
フロントでは全 HTML 要素が position: relative だったのを、コアブロックと unitone ブロックだけが position: relative になるように変更
ブロックエディターでは「親ブロック」と「その子孫ブロック」にデフォルトで position: relative が適用されますが、フロントには適用されません。
そのため unitone ではフロントでもエディターと同じ表示になるように position: relative を適用しているのですが、雑に全 HTML 要素（*）に適用されてしまっているので、エディターと（なるべく）同じになるように変更しました。
ただ、サードパーティーのブロックだと position: relative を適用したり、position: relative を設定するための HTML へ属性を追加することで意図しない不具合が発生してしまう可能性があるかなと思ったので、デフォルトではコアブロックと unitone ブロックだけに適用されるようにしました。
適用されるブロックを追加したい場合は unitone_block_types_allowed_to_add_block_list_data フィルターフックを使用してください。
とうかなんでそもそもエディター上で全ブロックに position: relative がついてんの？と思ったので調べてみたら、どうも Safari だけ表示が変わっちゃうことへの対策っぽい。Safari……
背景フィルター（backdrop-filter）の実装を改善
v15.10.0 でデコレーターブロックとセクションブロックに backdrop-filter のサポートを追加しましたが、CSS の設計が悪く、いろいろな問題が発生してしまいました。v16.0.0 ではその部分の CSS の設計を見直し、必要なときだけ backdrop-filter が適用されるように変更しました。
コメントを残す