関連記事: テーマカラーパレットの変更とグラデーション背景 – WordPress Theme Emulsion
emulsion theme 1.8.2で、テーマをemulsionに切り替えた時に、他のテーマで作成された記事の前景色と背景色のコントラストが失われる問題に対処しました。
emulsionテーマを、他のテーマに変更した場合に、emulsionテーマで作成した投稿の背景が非表示となる事があります。テーマを他のテーマに変更した場合、emulsionテーマの背景を復旧するための機能を、emulsion-addonsプラグインに追加しました。
WordPressのブロックエディタでは、ブロックごとに背景色をやテキスト色を指定する機能があります。この機能は、テーマを変更した場合に背景色とテキストのコントラストがなくなり、変更前のテーマで作成した記事をすべて修正しなければならないといった問題をはらんでいます。
このような問題が実際に発生する例
Twenty Twenty One テーマで記事を作成します。
<!-- wp:heading {"backgroundColor":"dark-gray","textColor":"white"} -->
<h2 class="has-white-color has-dark-gray-background-color has-text-color has-background">THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"backgroundColor":"dark-gray","textColor":"red"} -->
<p class="has-red-color has-dark-gray-background-color has-text-color has-background">THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"dropCap":true,"backgroundColor":"dark-gray","textColor":"white"} -->
<p class="has-drop-cap has-white-color has-dark-gray-background-color has-text-color has-background">THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG<br />THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG<br />THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
<!-- /wp:paragraph -->
このような問題は、なぜ発生するのか？
WordPress5.7のアップデートで、パレットの色指定は、style属性だったものが、クラス名に置き換えられました。この変更により以下のような現象が発生するようになった模様です。
多くのブロックエディタテーマは、add_theme_support( ‘editor-color-palette’, array(…) ) という関数で、テーマ特有の色設定を行っていて、これは、コアの持っているデフォルトのカラー設定を上書きします。
この設定を行っていない場合は、以下の名前の背景色クラス（例：has-black-background-color）文字色クラスが設定できるようになっています。また、これらのクラスに対応するCSSカラーはコアに設定済みです。
black
white
cyan-bluish-gray
pale-pink
vivid-red
luminous-vivid-orange
luminous-vivid-amber
light-green-cyan
vivid-green-cyan
pale-cyan-blue
vivid-cyan-blue
vivid-purpleテーマで設定された editor-color-palette は、テーマを切り替えると失われてしまいますので、背景色は適用されなくなります。
すべての色指定が、適用されなくなればテーマを切り替えても、切り替え後の色指定が適用されてコントラストの問題は発生しなくなるはずですが、落とし穴があります。
多くのテーマでは、blackとwhiteの色設定を持っています。これは、背景とテキストのコントラストを維持するために、持つべき設定ですが、これを持っていることにより、背景色だけが無効になり、真っ白な表示になってしまうのです。
これは、問題としてとらえられているのか？
WordPressについては、さまざまなレビューや、ハックが公開されているのは誰もが認めるところだと思います。
特に、テーマチーム（以前のテーマレビューチームは、テーマ全般に関与するとしてチームの名前を変更した）は、伝統的に コンテンツポータビリティ（平たく言えば、テーマを変更してもコンテンツは消えたりしないこと）を重要としていた。
コントラストについてのチームからの言及は見つからなかった
テーマが変更になったら、そのテーマ以外で作成されたの投稿は壊れて当たり前？
特に問題にする人も見当たらないままemulsion テーマはこの問題について対処することになりました。
emulsionテーマでは、これをテーマの問題として解決方法を探すことにしました。
当面の解決策、その1 背景色が設定されている場合、テーマの色クラス（has-xxx-background-color)と同時に has-background というクラスが追加されるので、そのクラスにフォールバックカラーをCSSで、追加することにしました。
Note:cover blockはhas-backgroundクラスが付かないのと、多数は、画像などのメディアが存在することを前提にしているため、文字列は白で決め打ちされているので注意
Note:Twenty Twenty テーマ等、切り替え後のテーマに、共通する背景クラスが存在する場合には、切り替え後のテーマの背景クラスを優先します。
これで、他のテーマから、emulsion テーマに切り替えた時に、コンテンツが見えなくなる問題については、何とか最低限度の可読性を確保できそうでした。
emulsionテーマを、他のテーマに切り替えた場合に起きるコントラストの問題
カスタムCSSにスタイルを自動書き込みするような、過激な方法はとらずに、テーマ用のプラグインに、テーマがemulsion以外の場合は、テーマのカラークラスだけ、スタイルを追加する方法で対処することにしました。これで、プラグインが有効な場合のみ、他のテーマでもemulsion テーマで作成した投稿の背景色を、概ね再現できます。
雑感
この問題気づいたのは、最近。普段は、他のテーマとの関係性だとかをまじめに調べることはなかったし、むしろ、ブロックエディタも数年の時間の中で良くなってきていることを認めてもいた。
しかし、目線をユーザーに移してみると、信じられないような出来事が様々なブロックエディタテーマで起きていました。
多くのユーザーは、サイトを運営しながら、「気になるテーマ」を試しているはずです。
新しいブロックエディタテーマに、変更して「既存投稿のコンテンツが表示できない状態」があれば、そのテーマを評価することはあり得ません。
おそらくブロックエディタテーマに対する嫌悪を助長するでしょう。
コアは、luminous-vivid-orangeなどという、単に色を表すようなクラス名に依存しないで、もっとセマンテックな意味を持たせたクラスネームへの変更と、これらの色クラスや、CSS variable nameを、テーマから柔軟に使えるようなものに、変更されることを望んでいるけれど、私に必要なものは、今のワードプレスの機能の中で対処を行う事。
このテーマの問題を検証するために、いくつかのブロックエディタで記事を作成し、他のテーマで表示するといった作業をいくつか繰り返しましたが、残念なことに、多くのテーマで色の問題が見られました。このメモが、誰かの助けになればいい。