今後のアップデートで後方互換性に大きな影響がありそうな変更点:2021/4/27時点

TwentyTwentyOne などの公式テーマのスタイルを改めて見直していたところ、コンテンツエリア直下の要素や全幅・幅広要素のスタイルが Snow Monkey とは違っており、恐らくは TwentyTwentyOne などの公式テーマにあわせたほうがブロックエディター的には不具合がなく素直に動作するのだろうということで、すぐすぐではないにしろ、今後時期をみて下記の変更を入れようかなと考えています。

普通に Snow Monkey を使っている場合は影響は少ないと思うのですが、CSS でカスタマイズしたり、 カスタムブロックをつくったり、カスタム HTML を使っている場合は影響が大きくでる可能性がありますのでご注意ください。

コンテンツエリア直下の要素の扱い:要素の幅

コンテンツエリア(Snow Monkey でいう .c-entry__content )直下の要素は

margin-right: auto;
margin-left: auto;
max-width: ○○px

としたうえで、全幅要素は

max-width: none;
width: 100%;

となるのが正しいようです。

普通は(普通 is 何ですが)各要素に max-width を指定するようなことをせずに親(あるいは先祖)に widthmax-width を指定しておいて、各要素の幅についてはフリーにしておく、そして全幅要素は margin-right/left: calc(50 - 50vw) させるものだろうと思っていて Snow Monkey もそうしていたので結構衝撃的でした。これテーマ開発者の皆さんやオリジナルテーマを開発納品している皆さんどうしてるんでしょう…。

で、この変更を入れない(= 現状)ことの問題点としては、エディター内でブロックツールバーが見切れてしまうというものがあります。

現状では問題はこれだけなので、ひとまず早めにエディター側だけ変更を入れようと考えていますが、フロントとエディター側でスタイルが違うのはそれはそれでカスタマイズされている方への影響が大きそうなので、最終的には揃える方向で考えています。ということでどうでしょうか…。

コンテンツエリア直下の要素の扱い:position

エディター上では各ブロックはデフォルトで position: relative になっています。フロントはテーマまかせで、Snow Monkey は特に指定なし(= position: static)なのですが、position: relative になっていないとエディターと前・後ろブロックとの重なり具合を同じにすることができないため、フロントも position: relative になるように変更を入れようと思います。

これによりコンテンツエリアに position: absolute な要素を独自にコーディングして配置されている場合や、重なり順を独自にカスタマイズしている場合は影響が出る可能性があります。

Snow Monkey Blocks のブロック内にある全幅・幅広要素の扱い

現状、

  • コアブロック内の全幅要素(例:グループブロック内に全幅の画像ブロック)は全幅(= 画面いっぱい)にならない
  • Snow Monkey Blocks ブロック内の全幅要素(例:コンテナブロック内に全幅の画像ブロック)は全幅(= 画面いっぱい)になる

という仕様になっています。僕の認識としては「全幅」=「画面いっぱい」だったのですが、どうもこの認識が間違っていて、「全幅」=「親要素いっぱい」なんですかね。コアのデフォルトスタイルから察するにそうなのかなーと。ということで、これも

  • コアブロック内の全幅要素(例:グループブロック内に全幅の画像ブロック)は全幅(= 画面いっぱい)にならないけど、親要素いっぱいには広がる
  • Snow Monkey Blocks ブロック内の全幅要素(例:コンテナブロック内に全幅の画像ブロック)も全幅(= 画面いっぱい)にならないけど、親要素いっぱいには広がる

としたほうが良いのだろうなと考えています。Snow Monkey Blocks のコンテナブロックやセクションブロック内に全幅の画像ブロックやスライダーブロックを入れられている場合は見た目にモロ影響がでてしまうのでご注意ください…。

横並びのブロック(例:項目、パネル等)の左右余白のとり方

現状横並びのブロックの左右余白については

// 下記わかりやすく改変したサンプルなので細かい数値は実際とは異なります。
.c-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-right: -1rem;
  margin-left: -1rem;
  margin-bottom: -1rem;
}

.c-row__col {
  padding-right: .5rem;
  padding-left: .5rem;
  padding-bottom: 1rem;
}

のようにしています。多分これも横並びの要素の左右余白のとり方としては一般的なものだと思うのですが、これもエディター上で問題があります。

WordPress 5.7 から、横並びの要素の場合はその要素の隣にインサーター(ブロック追加ボタン)が表示されるようになったのですが、上記のスタイルで横並びにしている場合はこのインサーターが表示されません。まぁ 5.6 まではそもそも表示されなかったので良いっちゃ良いのでしょうけど、公式テーマやコアブロックでは表示されるのになんで Snow Monkey や Snow Monkey Blocks だと表示されないの?バグなの?となっちゃうのだろうなと思いますので、これもちゃんとインサーターが表示されるように変更したほうが良いのだろうなと…。

具体的な変更方法についてはまだ検討中のですが、多分 display: grid を使う方向になるかなと思います。

こちらについても CSS でカスタマイズしている方には大きな影響が出る可能性があります。具体的には項目ブロックやパネルブロックに CSS で背景色をつけたり、余白を消してぴったりくっつけるようなカスタマイズをしていると、それが効かなくなったり崩れたりする可能性が考えられます。

IE11 対応

WordPress が IE11 を切る方向みたいなので、そのタイミングで Snow Monkey の IE11 対応は終わりにしようと思います。IE11 用に追加している CSS も全部消そうと思うので、レイアウトが崩れたりアクセントカラーが反映されなくなったりします(アクセントカラーくらいは残したほうが良いのだろうか…要検討)。


他にも大きな影響がありそうな変更点がでてきたときにはこのページに追加していこうと思います。

個人的にはどの変更も入れたくないのですが、今後もブロックエディターに付き合っていくのであればやむを得ないのだろうなと考えています…。時期については次かその次のメジャーアップデートのタイミング、なので WordPress 5.8 や 5.9 がでるタイミングで一気にやっちゃうのが良いのかなぁと考えています。WordPress が IE11 を切る方向みたいなので、そこでえいやでやっちゃうのも良いかもですね…。

この記事を書いた人

キタジマ タカシ

長崎県長崎市在住。地元のWeb制作会社でWebデザイナー/エンジニアとして従事した後、2015年にフリーランス [ モンキーレンチ ] として独立。WordPress のテーマやプラグイン、ライブラリ、CSS フレームワーク等、多数のプロダクトをオープンソースで開発・公開しています。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!