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

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

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

教えていただきたいこと

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

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

css
1a.a1 {
2  color: red;
3}
4
5a.a2::after {
6  background-image: url('svgのコード'[stroke="currentColor"を指定]);
7}

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

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

背景

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

php
1add_action('init', function () {
2	register_block_style(
3
4		// wp-block-button
5		'core/button',
6		[
7			'name' => 'btn-square-rounded',
8			'label' => '角丸ボタン',
9			'style_handle' => 'editor-style.css'
10		]
11	);
12});

カラーパレットを追加

php
1function setup_theme_supported_features() {
2	// カラーパレットに色を追加
3	add_theme_support( 'editor-color-palette', array(
4			array(
5					'name'  => 'テーマブラック',
6					'slug'  => 'theme-black',
7					'color' => '#413D3D',
8			),
9			array(
10					'name'  => 'テーマブルー',
11					'slug'  => 'theme-blue',
12					'color' => '#5985EE',
13			)
14	) );
15}
16add_action( 'after_setup_theme', 'setup_theme_supported_features' );

SASS
1$colorList: (
2  'black': #413D3D,
3  'blue': #5985EE
4);
5// lightning側の指定の影響でhover時の色がうまく指定できないため!importantとした。
6@each $color_name, $color in $colorList {
7  .has-theme-#{$color_name}-background-color {
8    background-color: $color !important;
9  }
10  .has-theme-#{$color_name}-color {
11    color: $color !important;
12  }
13}

現在のスタイルの指定

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

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

SASS
1.wp-block-button {
2  line-height: 1.5;
3}
4
5.is-style-btn-square-rounded {
6  .wp-block-button__link {
7    font-size: 20px;
8    height: 52px;
9    border-radius: 26px;
10    padding: 0.5em 2.6em 0 1.8em;
11    position: relative;
12    &::after {
13      content: '';
14      display: block;
15      height: 0.8em;
16      width: 0.5em;
17      position: absolute;
18      top: 50%;
19      right: 1.6em;
20      transform: translateY(-50%);
21      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;
22      transition: right 0.3s ease-in-out;
23    }
24    &:hover::after {
25      right: 0.8em;
26    }
27  }
28}

結果：上に表示した画像のように矢印の色が、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の値の指定を行う

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

scss
1$colorList: (
2    "black": #413d3d,
3    "blue": #5985ee,
4);
5// lightning側の指定の影響でhover時の色がうまく指定できないため!importantとした。
6@each $color_name, $color in $colorList {
7    .has-theme-#{$color_name}-background-color {
8        background-color: $color !important;
9    }
10    .has-theme-#{$color_name}-color {
11        color: $color !important;
12    }
13
14// ここから
15    .is-style-btn-square-rounded {
16        .wp-block-button__link.has-theme-#{$color_name}-color {
17            &::after {
18                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>')
19                    left
20                    center
21                    no-repeat;
22            }
23        }
24    }
25}