unitone v20.0.0 ベータ1

unitone v20.0.0 ベータ1の概要

後方互換性に影響を与える可能性があるアップデートになるので、事前のテストを強く推奨します！重大な不具合の報告がなければ、1週間程度時間をおいてから正式リリースしたいと思います。

機能追加

テンプレートパターン「フロントページ：オーバーレイ（上部固定）ヘッダー」を追加
各テンプレートタイプの各レイアウト毎に「上部固定ヘッダー」のテンプレートパターンを追加
カスタムページテンプレートの各レイアウト毎に「上部固定ヘッダー」のカスタムページテンプレートを追加
セクションブロックのパディングを上下個別に設定できるように変更
カバーブロックの子ブロックに、背景色とパディング、ボックスシャドウのサポートを追加

変更

各テンプレートの HTML 構造（ブロックの構成）を変更
ナビゲーションブロックのブロックスタイル「unitone」「unitone（アコーディオン）」使用時の、メニュー項目の余白の大きさを調整

テンプレートパターン「フロントページ：オーバーレイ（上部固定）ヘッダー」を追加

フロントページテンプレート用に、ヘッダーを position: fixed で上部固定するパターンを追加しました。

ヘッダーがコンテンツの上に重なるので、コンテンツの最上部にヒーローパターンを入れるとちょうど良い感じになると思います。

各テンプレートタイプ毎に「上部固定ヘッダー」のテンプレートパターンを追加

各テンプレートタイプ毎に、ヘッダーを position: sticky で上部固定するパターンを追加しました。

各テンプレートタイプ毎、また、「1カラム」「1カラム / ページヘッダー（画像）」「右サイドバー」等々、全部のレイアウト毎に「上部固定ヘッダー」を追加したので、簡単に上部固定ヘッダーのレイアウトに切り替えられるようになった反面、このスクショの「デザイン」パネルの部分の表示に時間がかかるようになったり、選択して実際のテンプレートのレイアウトが変わるまでに時間がかかる場合がでてきてしまいました…。

僕の環境だと「待機しますか？」的なブラウザのアラートが表示されることもありますが、待機してしばらくすると反映されました。ブラウザが完全にフリーズするようだと問題なのでちょっと考えないとですが、数が増えると重くなるのは多分 Gutenberg の仕様的なものなので、ちょっとどうしたものかなぁという感じです…。

カスタムページテンプレートの各レイアウト毎に「上部固定ヘッダー」のカスタムページテンプレートを追加

投稿や固定ページの編集画面で切り替えることができるテンプレート（= カスタムテンプレート）に、上部固定ヘッダーのテンプレートを追加しました。こちらも「1カラム」「1カラム / ページヘッダー（画像）」「右サイドバー」等々、全部のレイアウト毎に追加しています。

デフォルトだとこれらのカスタムページテンプレートは無効化されているので、必要に応じて、unitone セットアップ画面で有効化してください。

各テンプレートの HTML 構造（ブロックの構成）を変更

現状だと、例えば「ページヘッダーに背景色をつけてページ幅いっぱいに広げたい」のようなカスタマイズをしたい場合、配置済みのブロックの設定を変えるだけでは実現できず、ブロックを組み直す必要があります。

もっと手軽にカスタマイズがしやすくなるように、ブロックの構成を変更しました。

ブロックテーマは、サイトエディターでテンプレートをカスタマイズした場合、データベースにカスタマイズ済みのテンプレートが保存され、それが使用されるので、デフォルトのテンプレートの構造が変わっても影響はでません。

が、サイトエディターでカスタマイズしない状態で、.postid-46 [data-unitone-layout~="cover__content][data-unitone-layout~="-fill] > [data-unitone-layout~="decorator] > .unitone-section というように、独自クラスを付与せずに、既存の HTML 構造に依存したセレクタで CSS を書いている場合は、デザインが崩れてしまうかもしれません。

いきなり本番環境でアップデートするとレイアウトやデザインが崩れてしまう可能性がありますので、事前にテスト環境でアップデートしてみて、確認されることを強く推奨します。

具体的な変更内容は下記のコミットログでご確認ください。