[Cocoon] ラベルボックスの枠の色を修正した（gutenberg.php）

Cocoon バージョン: 2.5.7.4 に更新したところ、ラベルボックスの枠の色がおかしくなってしまいました。

ラベルボックスの枠を「白」に設定していた箇所が、「黒」に表示されています。

追記

Cocoon バージョン: 2.5.7.5 で修正されました。

（参考）

更新後にラベルボックスの枠の色がおかしい？ | 不具合報告 | Cocoon フォーラム

1. ラベルボックスの枠とクラスを検証

Chromeでスタイルを検証すると、「.has-white-border-color」なのに「var(–cocoon-black-color)」になっています。

<style id='cocoon-style-inline-css'>
html .body .label-box.has-white-border-color .box-content {
border-color: var(--cocoon-black-color);
}

このスタイルを Cocoonのコード内を検索すると、
「/lib/gutenberg.php:451」から生成されているようです。

<?php //ラベルボックス ?>
html .body .label-box.has-<?php echo $slug; ?>-border-color .box-content{
border-color: <?php echo $color; ?>;
}

$slug と $color の対応がおかしいようです。

目次に戻る

2. 作成されたラベルボックスのHTMLを見る

新規で作成したラベルボックスだと、「白」ではなく、「拡張色B FFFFFF」として設定されます。
こちらは、枠色は正しく表示されます。

Cocoonの「ラベルボックス」で、枠線をいじって class にどんな違いがあるか、調べてみました。

枠の色	div class
未設定	クラスなし
オレンジ	has-orange-border-color
白（拡張色B）	has-ex-b-border-color
白（旧設定）	has-white-border-color
白（2.5.7.5）	has-cocoon-white-border-color

目次に戻る

2-1. テスト１：枠色デフォルト（クラスなし）

テスト１：枠色デフォルト

<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box has-background has-watery-yellow-background-color">

目次に戻る

2-2. テスト２：枠色あり（has-orange-border-color）

テスト２：枠色あり

<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box has-background has-border-color has-watery-yellow-background-color has-orange-border-color">

目次に戻る

2-3. テスト３：新ラベルボックスの白枠（has-ex-b-border-color）

テスト３：新設定

<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box has-background has-border-color has-watery-yellow-background-color has-ex-b-border-color">

目次に戻る

2-4. テスト４：旧ラベルボックスのコピー（has-white-border-color）

テスト４：旧設定

<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box has-background has-border-color has-watery-yellow-background-color has-white-border-color">

目次に戻る

3. gutenberg.phpの修正箇所

Cocoonフォーラムにて「不具合報告」したところ、原因箇所を教えていただきました。

/lib/gutenberg.php
カラーパレットのCSSプロパティ変数名に誤りがあります。
CSSプロパティ変数がvar(–cocoon-white-color)でない。
cocoon/gutenberg.php at f6eaeafb2cb165e88a33079c71117897db6087ee · xserver-inc/cocoon · GitHub
更新後にラベルボックスの枠の色がおかしい？ | 不具合報告 | Cocoon フォーラム

Cocoonのコード（/lib/gutenberg.php）の該当箇所を確認してみると、たしかに記入ミスがありました。

function get_cocoon_editor_color_palette_colors(){
  $colors = array(
（…中略…）
    array(
        'name' => __( '白', THEME_NAME ),
        'slug' => 'white',
        'color' => 'var(--cocoon-black-color)',

いずれ Cocoonのアップデートでも修正されると思いますが、さしあたり自分のコードはテーマエディタで修正しました。

確認すると、ちゃんと以前のラベルボックスブロックもちゃんと枠の色が白に戻りました。

Cocoonでは、テーマの色をこのような「連想配列」で管理しているんですね。

目次に戻る

3-1. 【追記】テスト5：Cocoon 2.5.7.5 の白枠のラベルボックス（has-cocoon-white-border-color）

Cocoon 2.5.7.5 で修正されました。
ただし、Class名が「has-white-border-color」から「has-cocoon-white-border-color」に変更になっています。

テスト5：Cocoon 2.5.7.5 の白枠のラベルボックス

<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box has-background has-border-color has-watery-yellow-background-color has-cocoon-white-border-color">