unitone v11.0.0 をリリースしました – WordPress テーマ unitone

unitone v11.0.0 の概要

機能追加

メガメニューブロックを追加

変更

ナビゲーションブロック用 CSS のリファクタリング
右サイドバーありのレイアウト用のパターンの構成を変更（.site-container-right-sidebar クラスを廃止）

不具合の修正

エディター上でナビゲーションブロックのトグルボタンの表示位置がずれている不具合を修正
子テーマ使用時、テンプレートパーツが表示されない不具合を修正
WooCommerce 商品ページで、商品の説明文がカラム幅ではなくコンテナー幅で表示される不具合を修正
bbPress のページで、右サイドバーありのレイアウトのとき、メインコンテンツ部分の左右に不要な padding がついている不具合を修正
エディター上でのスイッチャーブロックの表示を修正
テーマ一覧画面で Warning がでる不具合を修正
<figure /> に不要な下マージンがつくことがある不具合を修正

メガメニューブロックを追加

ナビゲーションブロックにメガメニューを挿入できる「メガメニュー」ブロックを追加しました！

挿入している様子を録画してみました。

上記の動画ではメガメニューとしてパターンを挿入していますが、普通にブロックを入れてつくっていくこともできます。

開発していて気づいたのですが、unitone のブロックはブレイクポイントを使わない Intrinsic Design なつくりになっているので、グローバルナビゲーションがモバイルのときにドロワー表示に切り替わっても、特に意識してつくらなくても大きな崩れが起きないのは、なかなか使い勝手が良いなぁ〜と思ったりしました。

ナビゲーションブロックはどこにでも配置できるし、ヘッダーの中に入れた場合でもヘッダーの表示位置が固定のときもあれば非固定のときもあるし、ナビゲーションが横並びのときもあれば縦並びのときもあったりなので、どの場合でも大崩れはしないように、position:fixed で表示して、画面がリサイズしたりスクロールしたときにはメガメニューが閉じるようにしています。この辺の細かい挙動は使い勝手をみて、今後変更するかもしれません。

ナビゲーションブロック用 CSS のリファクタリング

設定や配置場所等によって崩れが発生したり、また、CSS でのカスタマイズ性が微妙だなと思ったので、ゼロベースで CSS を書き直しました。主に下記の変更をおこないました。

ゼロベースで書き直し
ブロックスタイルを適用していない場合は CSS を追加しないように変更（ほぼ素のナビゲーションブロックになる）
CSS カスタムプロパティで幅、余白のカスタマイズができるように変更
ページレイアウトが「左ヘッダー」のとき、ヘッダー部分のスクロールもサブメニューの展開も可能になるように修正

コアの CSS の詳細度が強いのでブロックスタイルの CSS の詳細度もそれに合わせた上でなるべく低くなるように調整しています（なんでコアの CSS の詳細度あんなに強いの…）。unitone のブロックスタイルの装飾が不要な場合は、ブロックスタイルを外せば素のナビゲーションブロックになるので、それを独自の CSS で上書きして装飾していくのが良いのかなと思います。

CSS カスタムプロパティでのナビゲーションブロックのカスタマイズ

ブロックスタイル「unitone」が適用されているナビゲーションブロックは CSS カスタムプロパティで幅や余白のカスタマイズができます。

基本の設定は

.wp-block-navigation:where(.is-style-unitone)

ドロワー表示用の上書きは

.wp-block-navigation:where(.is-style-unitone):where(:has(.is-menu-open)), .wp-block-navigation:where(.is-style-unitone) :where(.is-menu-open .wp-block-navigation__container)

に定義しています。詳しくはコードを参照してください。