unitone v23.4.0 の概要

機能追加

• ローディングアニメーションを表示する機能を追加
• ローディングアニメーション用のアイコンを「インラインアイコン」に追加
• テキストストロークの機能を追加
• ページの読み込み状態を判定できる body class を追加

変更

• テキストシャドウ用の CSS カスタムプロパティの名前を変更

不具合の修正

• 「流体タイポグラフィ」を有効化したブロックの子孫ブロックには「流体タイポグラフィ」の文字サイズが継承されない不具合を修正

ローディングアニメーションを表示する機能を追加

今回のアップデートでローディングアニメーション用のテンプレートパーツが追加されました。

「ダッシュボード → 外観 → unitone セットアップ → レイアウト → ローディングアニメーション」でテンプレートパーツを選択すると、ページの表示時に、ページのロードが完了するまでの間、そのテンプレートパーツが画面前面に表示されます。ロードが完了するとフェードアウトします。

テンプレートパーツのエリアにも「ローディングアニメーション」が追加されていて、新規のテンプレートパーツを作成するときにこのエリアを選択することで、複数のローディングアニメーション用テンプレートパーツを作成することができます。

ローディングアニメーション用のアイコンを「インラインアイコン」に追加

下記のアイコンを追加しました。

テキストストロークの機能を追加

任意のテキストに -webkit-text-stroke を設定できる機能を追加しました。設定したいテキストを範囲選択して、ブロックツールバーから設定できます。

下記サンプル。

ページの読み込み状態を判定できる body class を追加

• unitone-page-loaded:false … ロード未完了
• unitone-page-loaded:true … ロード完了

テキストシャドウ用の CSS カスタムプロパティの名前を変更

• --unitone--offset-x → --unitone--text-shadow-offset-x
• --unitone--offset-y → --unitone--text-shadow-offset-y
• --unitone--blur-radius → --unitone--text-shadow-blur-radius
• --unitone--color → --unitone--text-shadow-color

「流体タイポグラフィ」を有効化したブロックの子孫ブロックには「流体タイポグラフィ」の文字サイズが継承されない不具合を修正

例えば、

- デコレーター
  - 段落：あいうえお
  - 段落：かきくけこ

というコンテンツがあったとして、「あいうえお」と「かきくけこ」を文字サイズ XL + 流体タイポグラフィにしたい場合、文字サイズはその親のデコレーターでも段落でもどちらに設定しても大丈夫なのですが、流体タイポグラフィについては「あいうおえ」と「かきくけこ」の段落両方に設定する必要がありました。

今回のアップデートで「流体タイポグラフィ」も子要素に継承されるようになったので、上の例の場合だとデコレーターに「流体タイポグラフィ」を設定すれば、「あいうえお」と「かきくけこ」の段落には設定しなくても良い、ということができるようになりました。