THE THORでブロックエディター (Gutenberg) の画像ブロックを使用した際に、キャプションが縦長になってしまう問題を修正するCSSです。
.content .wp-block-image figure.aligncenter{
display: table;
}
CSSの解説
画像ブロックを使うと必ずキャプションが縦長になる訳ではなく、この表示崩れには2つの条件があります。
- Gutenbergの画像ブロックを使用
- 画像を中央寄せする
THE THORの画像キャプションは通常display: blockなのですが、エディターで中央寄せした時だけdisplay: table-captionになります。
この table-caption は通常テーブル要素display: tableとセットで使うものですが、親要素の figure は中央寄せしてもdisplay: blockのままなので、このような表示崩れが起きるのだと思います。（多分）
ということで、中央寄せした時の親要素 figure をテーブル要素にすることで... 画像ブロック全体はtable要素、キャプションはtable-caption という正常なセットにしています。
デフォルトで画像ブロックを中央寄せにする
「エディターで中央寄せにしなければ問題ないんじゃ？」と思ったあなたは天才てれびくんです。CSSであらかじめ中央寄せしておくというのも、解決方法の1つです。
画像ブロックがデフォルトで中央寄せされていれば、エディターで中央寄せして.align-centerクラスが付与されることもなく、キャプションが崩れることもありません。
画像は真ん中派という人は、いちいち画像を中央寄せにする手間も省けるので、この機会に全ての画像ブロックを中央寄せにしておくのもいいかもしれません。（実際そういうWordPressテーマも多いし）
/***画像ブロックを全て中央寄せにする***/
.content .wp-block-image{
text-align: center;
}※エディター上で配置を選択すれば、そちらが優先されます。
キャプションの装飾CSS
THE THORのキャプションは通常の文字と同じサイズ・色なので、普通のテキストとの見分けがつきません。
以下のCSSを使って、もう少しキャプションらしいテキストにすることをおすすめします。
/*** キャプションの調整 ***/
.content .wp-block-image figcaption{
font-size: 0.8em; /*少し小さく*/
color: rgba(0,0,0,70%); /*薄めの黒*/
}