仕様変更Ver.2.1.0→2.1.1

リリースメモ
この記事は約2分で読めます。
記事内に広告が含まれています。

【件名】カラーパレットに同期して、記事中のブロックの色が変わらない

Ver.2.0.0で追加した「カラーパレットを追加」を削除する。

現象

基本カラー

スキンは、基本カラーをカラーパレットに反映し、独自の色として表示している。
独自の色をブロックに使用した場合、基本カラーを変更すると、変わらない部分がある(図1参照)。

Gutenbergエディター

再編集を行うと、独自のカラーパレットの色が、ブロックに反映される(図2参照)。

原因

カラーパレットのカラーコード(CSSプロパティ変数)がブロックに埋め込まれる。
また、カラーパレットの色が変更されるたびにカスタムCSSが出力される。

ブロックの色はカスタムCSSと埋め込まれたカラーコードの2つが参照されるため、基本カラーを変更しても本文中のブロックの色が同期して変わるとは限らない。

対策

以下のコードを削除する。

補足:削除理由

以下の「タブボックス」ブロックのHTMLを例に補足する。

<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-check block-box has-border-color has-hvn-main-color-border-color">
  <div class="bb-label"><span class="fa"></span></div>
</div>

以下にCSSを示す。
スキンで個別にパレットを設定し、設定した色をブロックに使用した。
スキンを変更すると、パレットから設定した色が消え、そのため以下のCSSを出力しなくなり、ブロックから色が消えてしまう。

body {
  --wp--preset--color--hvn-main-color: #1e73be;
}

html .body .bb-tab.has-hvn-main-color-border-color .bb-label {
  background-color: #1e73be;
}

.has-hvn-main-color-border-color {
  border-color: var(--wp--preset--color--hvn-main-color) !important;
}

上記の理由により、Ver.2.0.0で追加した「カラーパレットを追加」を削除する。

変更一覧

パスファイル名
/skin-made-in-heaven/hook-cocoon.php
タイトルとURLをコピーしました