unitone v18.2.0 の概要
機能追加
- 新規ブロック追加:タイムラインドットブロック
- 新規ブロック追加:サイドバー(区切りあり)ブロック
変更
- 「レスポンシブグリッド(区切りあり)」ブロック・「グリッド(区切りあり)」ブロックの区切りが「ボーダー」のとき、横並びのときは
column-gap
、縦並びのときはrow-gap
で余白をとるように変更 - いくつかのブロックの名称を変更
figure
のdisplay: table
をdisplay: block
に変更
不具合の修正
- メガメニューブロック、タブパネルブロック内に「検索ブロック」を正しく設置できない不具合を修正
- ワイヤーフレームジェネレーターのパターンの挿入位置を調整
- unitone の独自ブロックサポート「間隔(
gap
)」が「無し」が適用されないことがある不具合を修正 - unitone の独自ブロックサポート「間隔(
gap
)」をパネルの「サイズオプション」からリセットできないことがある不具合を修正 - テーブルブロックのプレースホルダー(挿入時に行列の設定をするもの)が潰れてしまっている不具合を修正
新規ブロック追加:タイムラインドットブロック
項目ごとにドットが打ってあって、タイムラインを掲載するのに使いやすい「タイムラインドット」ブロックを追加しました。
ドットと、それを繋いでいるラインは色を設定できます。ドットについては子ブロック(タイムライン項目ブロック)の設定で、その項目のものだけ色を変えることができます。
レイアウト(項目とドットの並び)は3種類から選べます。
時間の部分、コンテンツの部分はそれぞれインナーブロックになっているので自由にブロックを入れたりレイアウトをすることができます。下記サンプルでは普通に段落ブロックを入れています。
10:00
AM
秋のはじまり:朝の空気が少し冷たくなった。色づき始めた木の葉が揺れている。赤い葉がひらりと落ちてきた。夏が終わり、新しい季節がやってくる。あたたかい飲み物が恋しくなって、近くのカフェへと足を向けた。
11:00
AM
風鈴と昼下がり:軒先に吊るした風鈴が、風に揺られてちりんと鳴る。冷えた麦茶のグラスを手にする。庭の向日葵が真っ直ぐに太陽を仰いでいた。ゆっくりと流れる時間が、夏の午後の光とともに心に染み込んでいく。
12:00
PM
新しい一日:東の空がじんわりと明るくなり、遠くの山の端から太陽が顔を出す。窓を開けると、ひんやりとした朝の空気が流れ込んだ。街も少しずつ目を覚ましていく。コーヒーの湯気がゆらめきながら、静かに漂う。
新規ブロック追加:サイドバー(区切りあり)ブロック
こんな感じのセクションパターンをつくりたくて、サイドバーブロックに区切り線機能を追加したブロックを追加しました。区切り線の種類は「ストライプ」「スラッシュ」「ボーダー」の3種類から選べます(下記は「ストライプ」を適用しています)。
弊社メンバーのタイムスケジュール
プログラマー
10:00
秋のはじまり:朝の空気が少し冷たくなった。色づき始めた木の葉が揺れている。赤い葉がひらりと落ちてきた。夏が終わり、新しい季節がやってくる。あたたかい飲み物が恋しくなって、近くのカフェへと足を向けた。
11:00
風鈴と昼下がり:軒先に吊るした風鈴が、風に揺られてちりんと鳴る。冷えた麦茶のグラスを手にする。庭の向日葵が真っ直ぐに太陽を仰いでいた。ゆっくりと流れる時間が、夏の午後の光とともに心に染み込んでいく。
12:00
新しい一日:東の空がじんわりと明るくなり、遠くの山の端から太陽が顔を出す。窓を開けると、ひんやりとした朝の空気が流れ込んだ。街も少しずつ目を覚ましていく。コーヒーの湯気がゆらめきながら、静かに漂う。
デザイナー
10:00
秋のはじまり:朝の空気が少し冷たくなった。色づき始めた木の葉が揺れている。赤い葉がひらりと落ちてきた。夏が終わり、新しい季節がやってくる。あたたかい飲み物が恋しくなって、近くのカフェへと足を向けた。
11:00
風鈴と昼下がり:軒先に吊るした風鈴が、風に揺られてちりんと鳴る。冷えた麦茶のグラスを手にする。庭の向日葵が真っ直ぐに太陽を仰いでいた。ゆっくりと流れる時間が、夏の午後の光とともに心に染み込んでいく。
12:00
新しい一日:東の空がじんわりと明るくなり、遠くの山の端から太陽が顔を出す。窓を開けると、ひんやりとした朝の空気が流れ込んだ。街も少しずつ目を覚ましていく。コーヒーの湯気がゆらめきながら、静かに漂う。
figure の display: table を display: block に変更
そもそも display: table にしていた理由
WordPress で figure
になっている要素は figcaption
が設定できる。display: block
だと画像は小さくて中央寄せになっているのに figcaption
は広いので画像と縦位置がずれる、みたいなことがおこる。display: table
にすれば縦位置が揃う。
figure を display: table にしたときの問題点
max-width: 100%
が効かずにはみ出ることがある- 全幅が効かない(
display: block
化しないといけない)
今回のアップデートでの変更
display: table
をやめてdisplay: block
に変更width: fit-content
にして要素とfigcaption
の縦位置を揃えるfigcaption
をwidth: 0
+min-width: fit-content
にして要素と同じ大きさに揃える
いくつかのブロックの名称を変更
- サイドバーブロックの子ブロック:サイドバー → サブ
- 区切りありブロックの子ブロック:◯◯(区切りあり)のコンテンツ → コンテンツ
- カバーブロックの子ブロック:カバーコンテンツ(◯◯) → ◯◯
コメントを残す