カラーパレットのCSS変数はコアの変数名--wp--preset--color--$slugに合わせないと色が当たらないことがある

[shimotmk]

WordPress 6.1より画像ブロックなどでボーダー ブロックのサポートされた
上下左右異なるカラーを設定できる
WordPress/gutenberg#31366

Screen.Recording.2022-07-15.at.11.31.52.am.mp4

テーマはTT2などのブロックテーマ

レンダリングされるHTML

<figure class="wp-block-image size-large has-custom-border">
<img decoding="async" src="https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png" alt="" style="border-top-color:var(--wp--preset--color--vivid-red);border-top-width:20px;border-right-color:var(--wp--preset--color--luminous-vivid-orange);border-right-width:20px;border-bottom-color:var(--wp--preset--color--vk-color-custom-3);border-bottom-width:20px;border-left-color:var(--wp--preset--color--vivid-cyan-blue);border-left-width:20px">
</figure>

インラインスタイルでborder-right-color:var(--wp--preset--color--$slug)を追加してそれぞれの色を指定している

現状のカラーパレットマネージャーで出力されるCSS変数はスラッグ名のみ(例--vk-color-custom-1)なので--wp--preset--color--$slugが必要です
https://github.com/vektor-inc/vk-color-palette-manager/blob/e93a74ae178338b6f190457fed91f0158a6d2461/src/VkColorPaletteManager.php

---

--vk-color-primary、--vk-color-custom-1などのcss変数を--wp--preset--color--$slugに変更する

• src/blocks/button/style.scss
  

  vk-blocks-pro/src/blocks/button/style.scss

  Lines 248 to 269 in e15add7

  	background-color: var(--vk-color-primary);
  	}
  	&.has-vk-color-primary-dark-color {
  	background-color: var(--vk-color-primary-dark);
  	}
  	&.has-vk-color-primary-vivid-color {
  	background-color: var(--vk-color-primary-vivid);
  	}
  	&.has-vk-color-custom-1-color {
  	background-color: var(--vk-color-custom-1);
  	}
  	&.has-vk-color-custom-2-color {
  	background-color: var(--vk-color-custom-2);
  	}
  	&.has-vk-color-custom-3-color {
  	background-color: var(--vk-color-custom-3);
  	}
  	&.has-vk-color-custom-4-color {
  	background-color: var(--vk-color-custom-4);
  	}
  	&.has-vk-color-custom-5-color {
  	background-color: var(--vk-color-custom-5);

  
  【2人目確認待ち】ボタン WP6.1用のカスタムカラー変数に修正 #1484

• src/utils/common.scss
  リストブロックWP6.1用のカスタムカラー変数に変更 #1483
  

  vk-blocks-pro/src/utils/common.scss

  Lines 131 to 138 in 83ca6b6

  	vk-has-vk-color-primary-color: var(--vk-color-primary),
  	vk-has-vk-color-primary-dark-color: var(--vk-color-primary-dark),
  	vk-has-vk-color-primary-vivid-color: var(--vk-color-primary-vivid),
  	vk-has-vk-color-custom-1-color: var(--vk-color-custom-1),
  	vk-has-vk-color-custom-2-color: var(--vk-color-custom-2),
  	vk-has-vk-color-custom-3-color: var(--vk-color-custom-3),
  	vk-has-vk-color-custom-4-color: var(--vk-color-custom-4),
  	vk-has-vk-color-custom-5-color: var(--vk-color-custom-5),

• editor-css/_editor_before_button.scss
  https://github.com/vektor-inc/vk-blocks-pro/blob/e15add774f6afa6500816f4b170aaafb68075bbe/editor-css/_editor_before_button.scss
  【2人目確認待ち】ボタン WP6.1用のカスタムカラー変数に修正 #1484

[shimotmk]

VK Blocks側では vektor-inc/vk-color-palette-manager#15 がリリースされた後に--vk-color-custom-1などのcss変数を--wp--preset--color--に変更する

[shimotmk]

各種対応が終わったと思うのでcloseします