unitone v23.3.0 の概要

機能追加

• クエリーブロックに「ブロックリンクを使用する」の設定を追加
• レイヤーブロックに「背景画像/動画を使用（Fixed）」の設定を追加

変更

• クエリーブロックのブロックスタイル「ブロックリンク〜」を削除
• クエリーパターンの各投稿タイトルの見出しレベルを 2 から 3 に変更
• ソーシャルリンクブロックで「テキストを表示」を有効化したときのデザインを、ボタン風のデザインに変更

不具合の修正

• 翻訳ミスを修正（unitone [Dark] → unitone）

クエリーブロックに「ブロックリンクを使用する」の設定を追加、クエリーブロックのブロックスタイル「ブロックリンク〜」を削除

現状、クエリーブロックには下記のブロックスタイルがありました。

• ストライプ
• アンダーライン
• ボーダー
• ストライプ（ブロックリンク）
• アンダーライン（ブロックリンク）
• ボーダー（ブロックリンク）

それぞれのデザインにブロックリンクバージョンがありますが、この設計だとデザインが増えるたびに同じデザインのブロックリンクバージョンのデザインも追加しないといけないのでメンテナンスが大変ですし、UI としても使いにくいなと感じていました。そこで「ブロックリンクを使用する」という設定を追加し、デザインはデザイン、ブロックリンクはブロックリンクとして別々で設定できるようにしました。

レイヤーブロックに「背景画像/動画を使用（Fixed）」の設定を追加

セクション毎に背景画像/動画が固定表示されていて、スクロールすると背景の画像が切り替わるようなデザインを実装したくて、機能を追加してみました。

background-attachment: fixed だと iOS で固定表示されないということで、position: fixed を使った実装をしています。

現状でもデコレーターブロックの position 設定を使えば実現できましたが、今回のアップデートでもっと直感的に実現できるようになりました。

下記サンプル。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

静寂の街角と消えた足音の記憶

朝霧の小道

朝の森に霧が立ち込め、小道がぼんやりと霞む。草の香りが漂い、葉に落ちる雫が静かに音を立てる。

時が止まったような静けさ

石畳に響いた足音がふと消える。振り返ると、そこには誰もいない。風が吹き抜け、教会の鐘が遠くから聞こえた。

夏休みの朝

窓の外から蝉の声が聞こえる。扇風機の風がゆるやかに回り、白いカーテンがふわりと揺れた。

風鈴と昼下がり

軒先に吊るした風鈴が、風に揺られてちりんと鳴る。冷えた麦茶のグラスを手にする。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

夜空に浮かぶ月と流れる雲

雲間から月が顔を出し

静かな夜を淡く照らす

風が木々を揺らし

遠くでは虫の声がかすかに響く

星々は変わらず瞬き続けていた

雲の隙間から月がのぞき

冷たい光を落としていた

夜の静けさがゆっくりと広がり

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

ソーシャルリンクブロックで「テキストを表示」を有効化したときのデザインを、ボタン風のデザインに変更

下記サンプル。