キタジマ タカシ Snow Monkey Blocks のメジャーアップデートである v18.0.0 をリリースしました！メジャーアップデートは後方互換性に影響がでる可能性が高いアップデートになりますので、いきなり本番環境でアップデートせず、テスト環境で動作確認して修正変更をおこなってから、本番環境でアップデートすることを推奨します。
Snow Monkey Blocks v18.0.0 の概要
主に、CSS について全面的に再設計をおこないました。変更は多岐にわたるので、テスト環境でアップデートしていただき、実際に崩れが出ないか確認していただくのが確実だと思いますが、大きなポイントとしては CSS カスタムプロパティを積極的に利用する形に変更を入れたことと、タイポグラフィ周りの設計を変更したことです。
すべての変更点については下記を参照してください。
新規追加
- 新しいブロック「パターンを挿入」を追加
変更
- Snow Monkey を使用する場合は Snow Monkey v19 以上が必要
- CSS の全面的な見直し・再設計
- タイポグラフィの設計の見直し
- 余白の設計の見直し
- CSS カスタムプロパティを使った再設計
- サイズ変更等の一部のメディアクエリを除去
- パターンを最新の構造にアップデート
- コンテンツスライダー デフォルト背景色を灰色から「なし」に変更
不具合の修正
- パネル 項目 パネル内に「項目（バナー）」を配置したとき「項目（バナー）」へリンクを設定してもクリックできない不具合を修正
- ボックス コンテンツスライダー ボックスシャドウに CSS カスタムプロパティで定義された色を設定したとき、色が反映されない不具合を修正
- 新しくブロックを追加したとき、ブロックマネージャーでそのブロックがデフォルトで無効になる不具合を修正
- スライダー系ブロックを複数設置した状態のとき、矢印をクリックすると複数スライド分動いてしまう負がういを修正
新しいブロック「パターンを挿入」を追加
Snow Monkey、Snow Monkey Blocks はいくつかのブロックパターンを持っており、とりあえずさくっとページを作成したいというときには、それらのパターンを使うと素早くページを作成することが可能です。
しかし、パターンを挿入するためにはグローバルインサーターを開く→タブを「パターン」に切り替える→「任意のパターンカテゴリーを選択する→任意のパターンを挿入する、という具合に踏まないといけないステップ数が多く、連続して入れるのが面倒です。
そこで、パターンを挿入するためだけのシンプルなブロックを追加してみました。
エディターで「/pattern」と入力するとブロックがでてくるので、それをクリクしてみてください。するとプレースホルダーが挿入され、ボタンをクリックするとパターンを挿入するためのモーダルが開きます。パターンを挿入すると、このプレースホルダーがパターンにまるごと置き換えられます。
コアでも似たような機能を実装するかどうかという issue が立っており、その進捗によってはこのブロックは廃止するかもしれません。
CSS の全面的な見直し・再設計
タイポグラフィ / margin / padding について
Snow Monkey と同じ変更を入れているので、Snow Monkey のアップデート情報を参照してください。
CSS カスタムプロパティを用いた再設計について
例えば、アラートブロックは下記のような CSS に変更になりました。
.smb-alert {
--smb-alert--border-radius: var(--_global--border-radius);
--smb-alert--background-color: #{ $alert-color };
--smb-alert--border-color: #{ darken($alert-color, 5%) };
--smb-alert--color: #{ darken(desaturate($alert-color, 60%), 70%) };
--smb-alert--padding: var(--_padding1);
--smb-alert--icon-color: #{ darken($alert-color, 40%) };
--smb-alert--warning-background-color: #{ adjust-hue($alert-color, -30deg) };
--smb-alert--warning-border-color: #{ adjust-hue(darken($alert-color, 5%), -30deg) };
--smb-alert--warning-color: #{ adjust-hue(darken(desaturate($alert-color, 60%), 80%), -30deg) };
--smb-alert--warning-icon-color: #{ adjust-hue(darken($alert-color, 40%), -30deg) };
...省略
}そのブロックで設定可能なプロパティがブロックの一番外側の要素に列挙されているのがわかると思います。
アラートブロック以外でも同じような再設計がおこなわれており、例えば今まで入れ子を意識してセレクタを書いて CSS の上書きをおこなわないといけなかったものが、外側の要素に列挙された CSS カスタムプロパティを上書きすることで、特に入れ子やセレクタを意識しなくても済むようになりました。
新しくブロックを追加したとき、ブロックマネージャーでそのブロックがデフォルトで無効になる不具合を修正
ブロックマネージャー（ダッシュボード → 設定 → Snow Monkey Blocks）で不要な Snow Monkey Blocks のブロックを無効化できますが、アップデートによって新しいブロックが追加されたとき、そのブロックがデフォルトで無効になってしまう不具合がありました。
データの持ち方の問題だったので、データの持ち方の見直しをおこないました。その影響ですでに無効化設定をされている場合でも、設定がリセットされる場合があります。もしリセットされていたり、有効・無効化状態と実際の状態がことなっている場合は、一度設定をリセットしてから再度設定をおこなってみてください。
ボックス コンテンツスライダー ボックスシャドウに CSS カスタムプロパティで定義された色を設定したとき、色が反映されない不具合を修正
ボックスシャドウの色を rgb() で RGB 値 を指定する仕様のため、カラー値として CSS カスタムプロパティが入ってきそうになる（例：rgb(var(--hex-red)), 0.3)）と、計算ができずに NaN 値 になり、色が反映されないという不具合がありました。
根本の問題は CSS カスタムプロパティで定義された色のカラーコード（Snow Monkey の各色は HEX で定義されています）を HEX ではなく RGB にすることですが、今更それをやるとちょっと後方互換性的に問題が大きすぎる気がするので、CSS カスタムプロパティが使われている色はボックスシャドウの設定パネルで設定できないようにしました。
ダウングレードしたい場合
Snow Monkey Blocks v18.0.0 はメジャーアップデートなので後方互換性に問題がでる可能性があります。いきなり本番環境でアップデートせずにテスト環境でテストしてからアップデートすることを推奨しますが、もしいきなり本番環境でアップデートしてし崩れが発生してしまったため一時的にダウングレードしたいという場合は下記から過去のバージョンをダウンロード可能です。
