カスタムカラーパレットの色が クラス名でブロックに反映されるように調整

[kurudrive]

Lightning 14.10.0 でキーカラー / 14.11.0 でカスタムカラーがカラーパレットに反映されます。
外観 > カスタマイズ > 色 パネルから指定できます。

複数あるので一人の人がやるのではなく出来る人がブロック単位で作業してプルリクしてください。

■ 確認する事

• カスタムカラーの色が has- クラスとして反映されるかどうか？
• カスタムカラーの色を後からカスタマイザで変更した時に追従して変更されるかどうか？

■ 注意点
現状 before / after 要素への色指定などイレギュラーな処理で単純に has-色-color のクラスをつければ良いというわけではないブロックなども結構存在するので、その際は頑張ってみて、1日程度トライして出口が見えなかったら相談してください。

■ カラーパレットが関連しそうなブロック・機能
※全部は確認してないので見つけたらコメントください。

• 枠線ボックス（鳥山作業）
• Outer(Pro) （丸山作業）
• アイコン
• Button
• 蛍光マーカー（鳥山作業中断）
• balloon
• Step(Pro)
• Timeline (Pro)
• pr-blocks（確認待ち）
• Staff（確認待ち）
• Icon Card(Pro)（確認待ち）
• グリッドカラムアイテム
• スライダーアイテム（下村作業）
• VK 見出し
• PR Content
• リストブロックのアイコンの色 [ リストブロック ] リストアイコンの色だけキーカラー（キーカラー・キーカラー明・キーカラー暗）に対応していない #971
• グループブロック [ グループブロック ] 線の色がカスタムカラーが選べない（デフォルトの色はOK） -> カラーパネルに非推奨の案内表記追加 #1033
• グリッドカラムカード [ グリッドカラムカード ] 文字の色、背景色が常に16進で入っている #1158

[drill-lancer]

参考：
#537

こっちが使えればこちらのほうが楽かも：
https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color

[miminari]

🤔　設計がよく分かってないですが、取り敢えずボタンブロックを触ってみます。

[sysbird]

#766
ここにある <AdvancedColorPalette> を使うとよいかなー
と、アイコンブロックをやってる最中です

[sysbird]

アイコンブロックの場合、クラスとstyleのつけかた
カスタムカラーのみ インラインstyle がつくようにします

[sysbird]

↑
現状アイコンブロックのDOM

カラーパレット を差し替える

• <ColorPalette>を <AdvancedColorPalette>に差し替える
  <AdvancedColorPalette>は、
  (1)コアやテーマが持っている色の場合は vivid-red のような文字列を返す(※テーマによって異なる)
  (2)カスタムカラーの場合は、#xxxxxx のような文字列(16進カラーコード)を返す
• ブロック側では(1) か(2) を色として保存する
• (1)の場合は、.has-vivid-red-background-color(または .has-vivid-red-color) のように整形してクラスに付与
• (2)の場合はインラインで style 指定
• (1) か (2)  の判定は、isHexColor() 今回追加した関数あり

背景色

• パレットから色を選んだとき .has-vivid-red-background-color のようなクラスを付ける
  クラス名はパレットから取得できる
  色はコアが付けてくれる
• Lightning のキーカラーをパレットから選んだとき、.has-vk-color-primary-background-color のようなクラスを付ける
  ※クラス名はパレットから取得できる
  色はLightningが付けてくれる
• パレットにない色(カスタムカラー)のときは、ブロック側で、background-color:#ff6b10 のようなスタイルをインラインで書く(従来どおり)

枠線の場合

• 枠線にしたいときは、.has-色 の親に .is-style-outline を付ける
• has-色のクラスは、.has-vivid-red-color というようにテキスト色として指定
• パレットにない色(カスタムカラー)のときは、ブロック側で、color:#ff6b10 のようなスタイルをインラインで書く(従来どおり)
• 枠線のスタイルでデフォルトを、border: solid 1px currentColor; のようにしておくと currentColor にテキスト色が当たる

デフォルトの色

• #337ab7 をブロックの初期値とクリア時の色にする
• ただしコアやテーマのスタイルが優先されるように注意
  例) 背景色がない場合のみデフォルト色を指定↓↓↓

.vk_icon_border:not(.has-background) {
    background-color: #337ab7;
}

[kurudrive]

これ終わってないタスクなので、他の優先がない人はよろしくお願いいたします。

[shimotmk]

pr-blocksをやってみます

[sysbird]

蛍光マーカーをやりますー

[shimotmk]

pr-blockのカスタムカラーパレットに対応しようとしています。
#900

アイコン背景:背景なしを選択した時にインラインで入るborder:1px solid #0693e3の色はどのように対応したら良いでしょうか。
VK Color Palettesでboderのカラーを追加すればカスタムカラーには対応できると思いますがblock-libraryで出力される色には対応できないように思います。

[sysbird]

@shimotmk
見当ちがいの答えだったらごめんなさい

いまインラインで
border:1px solid #0693e3
が入っている箇所は、CSSで
border: solid 1px currentColor;
と設定し、
デフォルトではインラインの style はないようにしておきます

currentColor にはテキスト色(color)が適用されます
テキストが .has-vivid-cyan-blue-color と指定されれば、ボーダーもその色になる

ブロックが背景もテキスト色もない場合のみ、CSSで #337ab7(デフォルトの青)が適用されるようにします、
(でないとデフォルトが透明になってしまうので)
アイコンブロックだと下記のかんじです

.vk_icon_border:not(.has-background) {
	background-color: #337ab7;
}

ここで not を使うのは、has-色(テーマやコアのCSS)が優先されるようにです
ブロックごとに既存の仕様と兼ね合いがあって、ややこしいです

[sysbird]

図説、追加しましたー

[shimotmk]

@sysbird
ありがとうございます！！
currentColorというものがあるのですね、次回調整してみます

[mthaichi]

Outer(Pro) やってみます。

[shimotmk]

吹き出しブロックのカスタムカラーパレットを調整しています
テキストのcolorとborder-colorが異なる場合が出てきました

今までのようにcurrentColorを使えない状態です

考えられる対応方法としては

1. ​​has-text-colorとcurrentColorを使って吹き出し内のテキストにはcolor: initial;をつける
2. has-background-colorやhas-text-colorのようにhas-border-colorを付け加えるか

が必要な気がします

1ではクラス名has-text-colorと内容が合っていないのであまり良くない気がしています
ただ2の場合だとheadで出力するcssの量が増えるので
どちらが良いのか微妙なところです。。

何か他に良い対応策はありますか

追記
ボタンブロックと同様にすればよいのではと。終礼でリックさんより

[sysbird]

枠線ブロックにも同じ問題があって、 いまのところ 1. で対応しています
2. の has-border-color は　そう、CSSが無限に必要になってくる？他のテーマこのことも考えると…対応難しい？
で、ボタンブロックのように、も考えました。テキスト色のパレットを用意するですよね(面倒ですがわかりやすいかも)

[shimotmk]

@sysbird
ありがとうございます！
やはりhas-text-colorをつけつつcolor: initial;で打ち消すしかなさそうですね、
あと吹き出しブロックのテキストはコアの段落ブロックが入ってくるので吹き出しのテキスト色は不要でした！

[mthaichi]

Outerでキーカラー追従させようと思うと「枠線」と「内包するブロックのテキスト」の色を分ける術がないですね。
内包する要素がシンプルに一つなら上記の下村さんと鳥山さんのやりとりのような形で実現できそうですが、
Outerの場合、中に含まれる要素が無限にあるので、使えないです。

なんか良い手はないでしょうか。

[sysbird]

@mthaichi
枠線ブロックも内包する要素が自由なので、下記のようにしています
あまりよい書き方じゃないかもですが…
枠線の直下の要素(でhas-text-colorが指定されていない場合)のテキスト色を初期化するかんじです

& > *:not(.has-text-color) {
    // 枠線の色が影響しないようにする
    color: initial;
}

と思って自分の確認してみたらうまくいってない
確認ブランチ間違えました、
うまくいってます！

[mthaichi]

とりさん、ありがとうございます。いい感じかもです！
助かりました。