unitone v24.3.0 の概要
機能追加
- グリッドブロック・グリッド（区切りあり）ブロックの、PC・タブレット・モバイル切り替えのブレイクポイントを任意数値に設定できる機能を追加
- unitone 独自サポート「位置（
position）」にプリセットを追加 - unitone 独自サポート「このブロックの水平配置（
justify-self）」「このブロックの垂直配置（align-self）」の選択肢に「自動（auto）」を追加
変更
- 配置・整列系独自サポートの初期値を設定
- レイアウトパネルから、配置・整列系の設定項目を切り出して、配置・整列系パネルを追加
- 設定パネル内の各設定項目の説明文を、ボタンクリックで展開する形に変更
不具合の修正
- インラインアイコンを検索したときに、スピナーアイコンが絞り込まれない不具合を修正
グリッドブロック・グリッド（区切りあり）ブロックの、PC・タブレット・モバイル切り替えのブレイクポイントを任意数値に設定できる機能を追加
先日開催された WordCamp Kansai 2025 で、ユーザーさんから「グリッドブロックのブレイクポイントを自由に設定できるようになりませんか？」と要望を頂きました。
メディアクエリーには CSS カスタムプロパティが使えず、ブレイクポイントを変数的に指定できないので、やるならメディアクエリーと関連する CSS を全部インライン CSS にする必要があります。HTML に出力される CSS も増えてしまうし、メンテナンス性的にも悩ましいところだったので、その場では「難しいかも…」とお答えしたのですが、実現できれば表現の幅がかなり広がることは確かなので、今回実装してみました。
なるべくインライン CSS が少なくなるように設計等も調整をおこないました（もっと良い実装方法があればぜひアドバイスください！）。
unitone 独自サポート「位置（position）」にプリセットを追加
CSS の仕様上、sticky や fixed を選択した場合、適切に top などの値を設定しないと、意図した挙動にならないのですが、ある程度 CSS の知識がある方じゃないとピンとこないだろうし、知識があったとしても設定するのが面倒臭いと思うので、その辺も良い感じで適用されるプリセットがあると便利だなーと。
選択肢に、下記の3つの選択肢を追加しました。
- sticky（上部）
- sticky（上部 / 管理バー対応）
- fixed（上部 / 管理バー対応）
sticky（上部）
スクロールしたときに、何らかのボックスの上部で固定させる場合に便利です。
--unitone--top: 0px、--unitone--z-index: 1 も自動的に反映されます。
sticky（上部 / 管理バー対応）
スクロールしたときに、ページの上部で固定させる場合に便利です。
--unitone--top: var(--wp-admin--admin-bar--height, 0px)、--unitone--z-index: 2 も自動的に反映されます。
fixed（上部 / 管理バー対応）
ページの上部で固定させる場合に便利です。
--unitone--top: var(--wp-admin--admin-bar--height, 0px)、--unitone--right: 0px、--unitone--left: 0px、--unitone--z-index: 2 も自動的に反映されます。
配置・整列系独自サポートの初期値を設定
CSS 的には適用されているけど、UI には反映されていないという形になっていたものを、UI でも視覚的にわかりやすいように変更しました。
グリッドブロック
alignItems→stretchjustifyItems→stretch
グリッドブロックの子ブロック
alignSelf.lg→autojustifySelf.lg→auto
グリッド（区切りあり）ブロックの子ブロック
alignContent→stretch
レスポンシブグリッド（区切りあり）ブロックの子ブロック
alignContent→stretch
スイッチャーブロック
alignItems→stretch
タイムラインドットブロック
alignItems→stretch
サイドバーブロックの子ブロック
alignContent→stretch
設定パネル内の各設定項目の説明文を、ボタンクリックで展開する形に変更
設定項目の説明文が長くて、設定パネルがわかりにくくなっているように感じたので、
- 長文のもの
- 読まなくてもなんとなくわかるもの
については、ボタンクリックで展開する形に変更しました。
コメントを残す