WordPress 5.3更新後に画像キャプションのスタイルが消えたのでCSS追加対応

2019年11月13日に、WordPress 5.3へのアップデート通知が来ていましたので、早速実施しました。

アップデート後、ブロックエディタ 画像ブロックのキャプションのスタイルが消えて、本文と同じ文字の大きさになっていました。
画像の下に小さな文字でちょっとした説明を加えていたのですが、かなり見にくくなってしまいました。

WordPressテーマ「Cocoon」を使用していて同時期にアップデートしたので、こちらが原因かと思いましたが、調べてみるとWordPress本体からスタイルが削除されたみたいです。
とりあえず、CSSスタイル追加で対応しました。

なお、今回のバージョンは以下の通りです。

• WordPress 5.3
• Cocoon 2.0.0.3

バージョン5.3で消えた画像ブロックのキャプションのスタイル

WordPress 5.3での画像ブロックのキャプションは、このようになっていました。
文字サイズが本文と同じになってしまい、中央揃えもなくなっています。

とりあえずバックアップからバージョン5.3に上げる前の5.2.4の状態で環境を作って確認したのが、こちらです。
こちらの方が断然見やすいですね。

該当箇所のCSSスタイルを確認

Chromeのデベロッパーツールで該当箇所を確認しました。
HTMLはこのように出力されています。

<div class="wp-block-image">
<figure class="aligncenter">
<a href="https://itlogs.net/wp-content/uploads/excel-stop-text-cut-off-3.gif">
<img data-src="https://itlogs.net/wp-content/uploads/excel-stop-text-cut-off-3.gif" alt="Excel 文字切れ" class="wp-image-6631 lozad lozad-img" loading="lazy" src="https://itlogs.net/wp-content/uploads/excel-stop-text-cut-off-3.gif" data-loaded="true">
<noscript>
<img src="https://itlogs.net/wp-content/uploads/excel-stop-text-cut-off-3.gif" alt="Excel 文字切れ" class="wp-image-6631"/>
</noscript>
</a>
<figcaption>Gifアニメーション画像（約54KB）</figcaption>
</figure>
</div>

適用されているスタイルのクラスは、「.wp-block-image figcaption」だったので、WordPressのフォルダ丸ごとgrep検索してみると、以下のファイルがヒットしました。

\wp-includes\css\dist\block-library\style.css

バージョン5.2.4と5.3の該当箇所を比較しました。

【WordPress 5.2.4】
  .wp-block-image figcaption {
    margin-top: 0.5em;
    margin-bottom: 1em;
    color: #555d66;
    text-align: center;
    font-size: 13px; }

【WordPress 5.3】
  .wp-block-image figcaption {
    margin-top: 0.5em;
    margin-bottom: 1em; }

文字色、テキスト位置、フォントサイズが消えていますね。

CSSスタイル追加で元の表示となるように対応

原因が分かったので、ひとまずCSSスタイル追加でバージョン5.2.4の時と同じ表示になるようにしておきます。

• 外観 ⇒ カスタマイズ ⇒ 追加CSS

を開き、以下のコードを追加しました。

/* Block Image Caption */
.wp-block-image figcaption {
  color: #555d66;
  text-align: center;
  font-size: 13px;
}

ということで、対応完了です。

なんでスタイル消したんだろう。
もしくは意図しない削除だったのか…？
次のWordPressのアップデート後にソースコードを確認しておこうと思います。

最後に

今回は、WordPress 5.3へのアップデート後に消えた画像ブロックのキャプションのスタイルをCSS追加で元に戻す対応を行いました。
見にくいなと思う方に、この対応方法が参考になればと思います。

その他のWordPress 5.3アップデート後の対応に関する記事は、こちらです。

WordPress 5.3更新後にギャラリーブロックのリンク先URLを一括置換

WordPress 5.3へのアップデート後に、プラグイン「Search Regex」で正規表現を使用して、過去の記事のギャラリーブロックのリンク先URLを大サイズからフルサイズの画像URLへ一括置換しました。

itlogs.net