投稿内のブロックにのみCSSを適用してエディター上にも反映する【WordPress】

【2023.1.14追記】 いくつかの箇所を改善した方法を掲載しました。このページの方法よりも確実で管理もしやすくなっています。

投稿のエディターで独自のCSSを適用する目的

「見出し・リスト・テーブル」等のブロックの装飾をあらかじめ整えておくことで、手軽に見栄えの良い記事を作成したいと考えたからです。しかし「投稿」以外の編集では過剰な装飾は汎用性を損なうため使いにくくなってしまいます。

実現したいこと

• 「投稿のエディター」で配置するブロックに独自のスタイルを追加する
• 「投稿以外のエディター」には影響を与えない
• 追加したスタイルは編集中のエディターにも反映させる

こんなときに役立つかも？

• 初期状態でサイトのデザインに合わせたブロックを用意したい
• 記事編集の手間を減らしたい
• 操作に不慣れな投稿者でもある程度の見栄えを確保したい

---

投稿のエディターにのみCSSを適用する手順

クラス名で投稿のエディターを特定する

「投稿のエディター」は次のセレクターで指定できます。
これを利用すると追加するCSSを編集画面にも反映させることができます。

.is-root-container:not(.edit-site-block-editor__block-list):not(.edit-widgets-main-block-list)

:not()疑似クラスで「投稿以外のエディター」を除外しています。
できれば「投稿のエディター」を直接指定したかったのですが、現状この方法しか思いつきませんでした──。

投稿を表示するテンプレートの準備

single.php 等のテンプレートの実際に表示される箇所に任意のクラス名を追加します。
今回はentry-contentというクラス名を付け、このセレクターで投稿用の追加スタイルを書いていきます。

<div class="entry-content">
	<?php
	the_content();
	?>
</div>

このテンプレートで表示された投稿は、セレクター.entry-contentで指定したスタイルが適用されることになります。

投稿のエディターに追加するCSSを記述する

.entry-content 〇〇のようなセレクターで指定したスタイルはウェブサイトに反映され、
.is-root-container:not(.edit-site-block-editor__block-list):not(.edit-widgets-main-block-list) 〇〇のようなセレクターで指定したスタイルは編集中のエディターに反映されます。

この2つのセレクターを使って任意の要素やWPブロックに追加するスタイルを書きます。
例えば<h2>要素やテーブルブロックにスタイルを追加する場合は次のようになります。

.entry-content h2,
.is-root-container:not(.edit-site-block-editor__block-list):not(.edit-widgets-main-block-list) h2 {
  color: #333333;
}

.entry-content .wp-block-table,
.is-root-container:not(.edit-site-block-editor__block-list):not(.edit-widgets-main-block-list) .wp-block-table {
  background-color: #f5f6f7;
}

このように指定したスタイルは「投稿以外のエディター」に影響を与えることなく「投稿のエディター」にのみ適用されます。

---

Sassを使う場合は次のようにまとめて書くことができます。

.entry-content,
.is-root-container:not(.edit-site-block-editor__block-list):not(.edit-widgets-main-block-list) {
  h2 {
    color: #333333;
  }
  .wp-block-table {
    background-color: #f5f6f7;
  }
}

---

WPブロックにはwp-block-〇〇のような個別のクラス名が用意されています。
これを使ってブロック毎に細かくスタイルを指定できます。

さいごに

今回の方法は「なるべく簡単に投稿の見栄えを整える」ために取り入れてみました。
ブロックエディターの操作に不慣れなユーザーが投稿する場合にも有効なのではないでしょうか。

他にも「ブロックスタイルを追加」して外観を切り替えることもできますが、それはまた改めてまとめたいと思います。

---