ボタンの装飾のSVGの色を、カラーパレットから選んだテキストの色と合わせたい。

Question

Lightningというテーマをもとに子テーマでカスタマイズしているのですが、ボタンに追加したSVGの色をテキストの色と合わせる方法を模索しています。

目次
1. 教えていただきたいこと
2. 背景
3. 現在のスタイル指定
4. 考えている代替手段

教えていただきたいこと

右にある矢印のSVG画像を、ブロックエディタでカラーパレットから選択したテキストの色に合わせる方法を模索しています。

ボタンのタグにa1, a2というクラスを付与し、

a.a1 {
  color: red;
}

a.a2::after {
  background-image: url('svgのコード'[stroke="currentColor"を指定]);
}

理想はspan.a2::afterのsvg画像で、stroke(線)の色をredにしたいのですができません。

svgタグをボタンを投稿に追加するたびに記述するのはできないので、HTMLにsvgタグを追加せず、CSSのみで指定する方法を教えていただきたいです。

背景

子テーマからwp-block-buttonの新しいブロックスタイルを追加しました。

add_action('init', function () {
	register_block_style(

		// wp-block-button
		'core/button',
		[
			'name' => 'btn-square-rounded',
			'label' => '角丸ボタン',
			'style_handle' => 'editor-style.css'
		]
	);
});

カラーパレットを追加

function setup_theme_supported_features() {
	// カラーパレットに色を追加
	add_theme_support( 'editor-color-palette', array(
			array(
					'name'  => 'テーマブラック',
					'slug'  => 'theme-black',
					'color' => '#413D3D',
			),
			array(
					'name'  => 'テーマブルー',
					'slug'  => 'theme-blue',
					'color' => '#5985EE',
			)
	) );
}
add_action( 'after_setup_theme', 'setup_theme_supported_features' );

$colorList: (
  'black': #413D3D,
  'blue': #5985EE
);
// lightning側の指定の影響でhover時の色がうまく指定できないため!importantとした。
@each $color_name, $color in $colorList {
  .has-theme-#{$color_name}-background-color {
    background-color: $color !important;
  }
  .has-theme-#{$color_name}-color {
    color: $color !important;
  }
}

現在のスタイルの指定

<div class="wp-block-button is-style-btn-square-rounded">
　　<a class="wp-block-button__link has-theme-black-color has-theme-blue-background-color has-text-color has-background" href="/blog">ブログ記事へ</a>
</div>

after疑似要素のbackground-imageにsvgコードを指定し、stroke="currentColor"としています。

.wp-block-button {
  line-height: 1.5;
}

.is-style-btn-square-rounded {
  .wp-block-button__link {
    font-size: 20px;
    height: 52px;
    border-radius: 26px;
    padding: 0.5em 2.6em 0 1.8em;
    position: relative;
    &::after {
      content: '';
      display: block;
      height: 0.8em;
      width: 0.5em;
      position: absolute;
      top: 50%;
      right: 1.6em;
      transform: translateY(-50%);
      background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 10.897 19.395"><path d="M-3800.077-11102.448l8-8-8-8" transform="translate(3801.774 11120.146)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4"/></svg>') left center no-repeat;
      transition: right 0.3s ease-in-out;
    }
    &:hover::after {
      right: 0.8em;
    }
  }
}

結果：上に表示した画像のように矢印の色が、has-theme-black-colorで指定している黒色(#413D3D)ではなく、黒色(#000??)になってしまいます。
aタグには.is-style-btn-square-rounded(svgを背景に持つ疑似要素の元の要素)と.has-theme-black-color(カラーパレットの色をcolorで指定している)があるのですが、svgに指定したcolor:currentColor;が.has-theme-black-colorで指定したcolor値を参照しせず、うまくいきませんでした。

考えている代替手段

PHPなどで投稿の文字列を探索していろいろやってしまうと表示速度に影響しそうなので、できればCSSのみで指定したいですが、

• the_contentのフィルターフックを使い、is-style-btn-square-roundedクラスが投稿にある場合は「svgタグ」を子要素に追加しstroke: currentColor;を指定する。(調べるとこれで指定できそう)
• wp_footerのアクションフックを使い、svgタグの追加と動的なstrokeの値の指定を行う

この辺りを検討しています。

Answer 1

あまりいい方法ではないと思うのですが、SCSSで無理やり埋め込んでみました。
サンプルを置いておきます。

https://jsfiddle.net/Lhankor_Mhy/j0thx6fa/

$colorList: (
    "black": #413d3d,
    "blue": #5985ee,
);
// lightning側の指定の影響でhover時の色がうまく指定できないため!importantとした。
@each $color_name, $color in $colorList {
    .has-theme-#{$color_name}-background-color {
        background-color: $color !important;
    }
    .has-theme-#{$color_name}-color {
        color: $color !important;
    }

// ここから
    .is-style-btn-square-rounded {
        .wp-block-button__link.has-theme-#{$color_name}-color {
            &::after {
                background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 10.897 19.395"><path d="M-3800.077-11102.448l8-8-8-8" transform="translate(3801.774 11120.146)" fill="none" stroke="#{"%23"+str-slice(""+$color,2)}" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4"/></svg>')
                    left
                    center
                    no-repeat;
            }
        }
    }
}

Comments

[ry0xi]

回答ありがとうございます。
やはり、全部記述するしかないですね…
質問後ほとんど同じ方法で全部を指定したのですが、SASSでstr_sliceが使えることは知らなかったので、SVGの色を変えるのに便利ですね。

[Lhankor_Mhy]

既にご解決でしたか。それは何よりです。

[ry0xi]

ありがとうございました。