キタジマ タカシ Snow Monkey のメジャーアップデートである v19.0.0 をリリースしました！メジャーアップデートは後方互換性に影響がでる可能性が高いアップデートになりますので、いきなり本番環境でアップデートせず、テスト環境で動作確認して修正変更をおこなってから、本番環境でアップデートすることを推奨します。
アップデートの経緯
Snow Monkey はもう5年目になるプロダクトで、当時は良かった CSS 設計も今見るともっと良くできるという感じだし、今やらないと今後使い物にならなくなってしまう可能性もある…という危機感を持っています。
本当はここは flex じゃなくてもう今なら grid でしょうとか、ここは float じゃなくて flex でしょう、とか本当はやったほうが良いこともあるのですが、さすがに影響が大きすぎてやれないので、せめてタイポグラフィや余白、CSS カスタムプロパティの利用など、影響がでなさそうな部分についてはできるだけモダンな感じにしようということで今回のアップデートをおこないました。
それでも後方互換性的に影響はでてしまうと思うのですが、中途半端に何度も細かくアップデートするよりは一気にやったほうが良いかなということでもう色々一気にやってしまいました。
一応タイポグラフィまわり、余白周り、ブロックまわりについては CSS vars をかなり入れ込みましたが、テンプレートパーツ（クラス名が .c- とか .p- とかではじまる要素）についてはまだ入れ込めなかったので、その辺りについては追々いれていきたいなと思います。
Snow Monkey v19.0.0 の概要
これまで一部機能のみを持たせていた theme.json を本格的に使用する形に変更を入れました。文字サイズ・余白サイズ・色、コアブロックの基本スタイル等を theme.json を使う形に変更しました。
また、CSS についても全面的に再設計をおこないました。変更は多岐にわたるので、テスト環境でアップデートしていただき、実際に崩れが出ないか確認していただくのが確実だと思いますが、大きなポイントとしては CSS カスタムプロパティを積極的に利用する形に変更を入れたことと、タイポグラフィ周りの設計を変更したことです。
すべての変更点については下記を参照してください。
機能追加
- 余白サイズの定義を
theme.jsonに追加 - WPAW ローカルナビゲーションウイジェット/ブロックのカレント項目に
data-active-menu="true"が付与される機能を追加
変更
- Snow Monkey Blocks を使用する場合は Snow Monkey Blocks v18 以上が必要
- フォントサイズの定義を一新
- フォントサイズの定義を PHP（
editor-font-sizes）からtheme.jsonに移動 - 色の定義を PHP（
editor-color-palette）からtheme.jsonに移動 a要素の色定義を CSS からtheme.jsonに移動- いくつかのコアブロック用 CSS を
theme.jsonに移動 - いくつかのブロックで
blockGapを使うように変更 - CSS の全面的な見直し・再設計
- タイポグラフィの設計の見直し
- 余白の設計の見直し
- CSS カスタムプロパティを使った再設計
- サイズ変更等の一部のメディアクエリを除去
- 余白サイズ・文字サイズのデバイスごとのサイズ指定をメディアクエリから
clampに変更 - コンテナー（とページ）の左右余白を少し広めに変更
.c-rowのスマホ時の余白が PC より狭めだったのを、PC と同じに変更- ページレイアウトが「右サイドバー」「左サイドバー」のときのメイン/サイドバー間の余白のとり方を変更
- ページレイアウトが「右サイドバー」「左サイドバー」のときのカラム落ちするための条件を変更
- キャプションの色を灰色→黒に変更
- ドロップナビにロゴを表示したときは、
centerではなくspace-betweenに変更 - お知らせバーが非表示のときは、
data-infobar-positionを出力しないように変更 - スペーサーブロックの前後のブロックの余白は打ち消さないように変更
- PHP のコードフォーマットを WordPress 標準のものに変更
- パターンを最新の構造にアップデート（要 Snow Monkey Blocks v18 以上）
- フィルターフック
snow_monkey_editor_color_paletteを廃止 - フィルターフック
snow_monkey_editor_gradient_presetsを廃止 - フィルターフック
snow_monkey_editor_font_sizesを廃止
不具合の修正
- Android 端末でツイートボタンが機能しない不具合の修正
タイポグラフィの設計変更について
僕が開発しているもう一つの WordPress テーマ unitone とほぼ同じ設計に変更しました。
余白のバリエーションはフィボナッチ数列、文字サイズのバリエーションは調和数列に基づいたもので定義しなおしました（これまでのサイズ定義についても CSS は残しているのでアップデートしても崩れることはありません）。
それに伴い、既存の CSS カスタムプロパティ名についても命名の統一を図るために変更をおこないました。詳しくは下記のページを参照してください。
文字サイズについて
例えば .c-entry-summary__content には --_font-size-level: -1; という CSS カスタムプロパティが設定されています。--_font-size-level は -2 〜 7 の10段階があり、0 を標準サイズとして、小さくなるほど小さく、大きくなるほど大きくなるようになっています。
.c-entry-summary__content {
--_font-size-level: 0;
}のようにすることで文字サイズを1段階大きくすることができます。
margin / padding について
例えばグループブロックや段落ブロックに背景色を設定したときに追加される .has-background というクラスには padding: var(--_padding1); という CSS が設定されています。padding 用の CSS カスタムプロパティ --_padding{数字} は -2 〜 7 までの10段階があり、1 を標準サイズとして、小さくなるほど小さく、大きくなるほど大きくなるようになっています（例外的に 0 は 0px）。したがって、.has-background には標準サイズの padding が設定されている、ということになります。
下記のような CSS を追加することで、padding を1段階大きなものに変更できます。
.has-background {
padding: var(--_padding2);
}margin についても padding と同じように--_margin{数字} という CSS カスタムプロパティが用意されています。
余白サイズ・文字サイズのデバイスごとのサイズ指定をメディアクエリから clamp に変更
余白サイズ・文字サイズについて、メディアクエリでデバイスサイズごとに細かく調整をしていたのですが、メディアクエリを使っていると「CSS で上書きしにくくなる」「CSS の容量も増える」ということで、多くの部分からメディアクエリを削除して、どうしても調整が必要な部分は clamp を使うように変更を入れました。
コンテナー（とページ）の左右余白を少し広めに変更
モバイルと PC でコンテナー（とページ）の左右余白はこれまでモバイルが少し小さめ、PC が少し広めとなっていましたが、CSS からメディアクエリを減らす作業の一貫でモバイルと PC の左右余白の大きさを統一しました。
それに伴い、カスタマイザー → デザイン → 基本デザイン設定 → モバイル端末時のコンテンツの左右余白の選択肢も、「標準」「広め」から、「狭め」「標準」に変更になりました。「狭め」に設定すると、これまでの余白とほぼ同じ大きさになります。
ページレイアウトが「右サイドバー」「左サイドバー」のときの CSS の変更
ページレイアウトが「右サイドバー」「左サイドバー」のときのメイン/サイドバー間の余白のとり方、カラム落ちするための条件を変更しました。
具体的には、これまで余白は margin であけていたものを gap であけるように変更、ブレイクポイントによってカラム落ちさせていたのを、メインカラムの最小幅がスリム幅（var(--wp--custom--slim-width)）を維持できなくなったときにカラム落ちするように変更しました。
ダウングレードしたい場合
Snow Monkey v19.0.0 はメジャーアップデートなので後方互換性に問題がでる可能性があります。いきなり本番環境でアップデートせずにテスト環境でテストしてからアップデートすることを推奨しますが、もしいきなり本番環境でアップデートしてし崩れが発生してしまったため一時的にダウングレードしたいという場合は下記から過去のバージョンをダウンロード可能です。
