CocoonテーマでGutenbergの画像ブロックにも枠線をつける

ぬにょす(挨拶)。

WordPressでGutenbergエディタを使っているのですが、画像に枠線をつけたくてCocoonの設定で有効にしてみたものの反映されなかったので。

外観のカスタマイズでCSSを追加しました。

/*ボーダー*/
.iwe-border figure img,
.iwe-border figure amp-img {
  border: 1px solid #ccc;
}

/*ボーダー（太線）*/
.iwe-border-bold figure img,
.iwe-border-bold figure amp-img {
  border: 4px solid #eee;
}

/*シャドー*/
.iwe-shadow figure img,
.iwe-shadow figure amp-img {
  box-shadow: 5px 5px 15px #ddd;
}

/*シャドーペーパー*/
.iwe-shadow-paper figure img,
.iwe-shadow-paper figure amp-img {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}
Code language: CSS (css)

Cocoon本体では<p>配下の<img>にだけスタイルを定義しているので、<figure>配下の<img>にも同じスタイルを定義した、ってだけです(笑)。