【スポンサーリンク】

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

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

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

追記

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

\記事が役に立ったらシェアしてね/
【スポンサーリンク】

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

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 の対応がおかしいようです。

作成されたラベルボックスの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

テスト1:枠色デフォルト(クラスなし)

テスト1:枠色デフォルト

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

テスト2:枠色あり(has-orange-border-color)

テスト2:枠色あり

<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">

テスト3:新ラベルボックスの白枠(has-ex-b-border-color)

テスト3:新設定

<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">

テスト4:旧ラベルボックスのコピー(has-white-border-color)

テスト4:旧設定

<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">

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では、テーマの色をこのような「連想配列」で管理しているんですね。

【追記】テスト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">

どうやらスラッグの名前がデフォルトとかぶってしまっているため、デフォルトのblackとかwhiteが上書きされているっぽいですね。
表示されるように修正しておきました。

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

ですので、既存の「has-white-border-color」のラベルボックスは、枠の色が「黒」に戻ってしまいました。

WordPressプラグイン「Search Regex」で、サイト全体を置換することにしました。

置換前にサイトのバックアップを忘れずに。

QRコードを読み込むと、関連記事を確認できます。
[Cocoon] ラベルボックスの枠の色を修正した(gutenberg.php)
【スポンサーリンク】
タイトルとURLをコピーしました