Snow Monkey v19 ベータ5

投稿日 2023年2月2日
著者キタジマタカシ
カテゴリーアップデート情報

Snow Monkey のメジャーアップデートである v19 のベータ版を配布します。メジャーアップデートは後方互換性に影響がでる可能性が高いアップデートになりますので、もしテスト環境で動作確認いただける方は、正しく動作できた、ここにこういう不具合があった、などなどオンラインコミュニティにご報告いただけるととても助かります！また、ベータ版はあくまで動作確認用であるため、本番環境での利用は推奨されません。

v19 beta4 からの変更点

変更

記事直下や InnerBlocks 直下のブロックについて、margin-bottom も付与されるようにしていたのを取り消し

不具合の修正

WPAW ではじまるカスタムブロックが表示されない不具合を修正

Snow Monkey v19 の概要

これまで一部機能のみを持たせていた theme.json を本格的に使用する形に変更を入れました。文字サイズ・余白サイズ・色、コアブロックの基本スタイル等を theme.json を使う形に変更しました。

また、CSS についても全面的に再設計をおこないました。変更は多岐にわたるので、テスト環境でアップデートしていただき、実際に崩れが出ないか確認していただくのが確実だと思いますが、大きなポイントとしては CSS カスタムプロパティを積極的に利用する形に変更を入れたことと、タイポグラフィ周りの設計を変更したことです。

すべての変更点については下記を参照してください。

機能追加

余白サイズの定義を theme.json に追加

変更

フォントサイズの定義を一新
フォントサイズの定義を 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 とほぼ同じ設計に変更しました。

WordPress フルサイト編集対応のブロックテーマ unitone について – WordPress テーマ unitone

unitone.2inc.org

余白のバリエーションはフィボナッチ数列、文字サイズのバリエーションは調和数列に基づいたもので定義しなおしました（これまでのサイズ定義についても 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 カスタムプロパティが用意されています。

コンテナー（とページ）の左右余白を少し広めに変更

モバイルと PC でコンテナー（とページ）の左右余白はこれまでモバイルが少し小さめ、PC が少し広めとなっていましたが、CSS からメディアクエリを減らす作業の一貫でモバイルと PC の左右余白の大きさを統一しました。

それに伴い、カスタマイザー → デザイン → 基本デザイン設定 → モバイル端末時のコンテンツの左右余白の選択肢も、「標準」「広め」から、「狭め」「標準」に変更になりました。「狭め」に設定すると、これまでの余白とほぼ同じ大きさになります。

ページレイアウトが「右サイドバー」「左サイドバー」のときの CSS の変更

ページレイアウトが「右サイドバー」「左サイドバー」のときのメイン/サイドバー間の余白のとり方、カラム落ちするための条件を変更しました。

具体的には、これまで余白は margin であけていたものを gap であけるように変更、ブレイクポイントによってカラム落ちさせていたのを、メインカラムの最小幅がスリム幅（var(--wp--custom--slim-width)）を維持できなくなったときにカラム落ちするように変更しました。