CSSはフロントとエディタの見た目を同じにするために、専用のエディタプラグインを使用して、そこに全てのCSSをまとめて記述することがあります。
例えば特定のページだけCSSを反映させたい時は、フロントのbodyに書かれている記事IDのクラスpage-id-25をよく使います。
<div id="body_wrap" class="page-template-default page page-id-25">例えば記事ID25の固定ページの見出しの色を変えたい場合
下記のような記述をすることがあります。
.page-id-25 .wp-block-heading {
color: #1D5CB4;
}しかしこの場合、エディタではbodyも記事IDのクラスも追加されていないので、CSSの記述で記事IDのクラスをつけてしまうとフロントとエディタの見た目が変わってしまいます。
そこでエディタの<div class="is-root-container">に記事IDのクラスをつけて、フロントとエディタの見た目が同じになるように試みてみました。
カスタマイズの結果
例えば記事ID25の記事であればpage-id-25というクラスがエディタで追加されます。
<div class="is-root-container is-desktop-preview is-layout-flow page-id-25">目次
WordPressのフロントにもエディタにも共通して反映されるクラス
フロントにもエディタにも共通して反映されるクラスのおさらいです。
ブロックについているクラスはエディタでも反映される
例えばSWELLのフルワイドブロックについているswell-block-fullWideクラスはエディタ、フロントどちらも表示されます。
追加 CSS クラスに追加したクラスはエディタでも反映される
例えばSWELLのフルワイドブロックにmy-sectionという追加CSSを入れた場合もエディタ、フロントどちらも表示されます。
エディタに反映されないクラス
先にも書いた通り、bodyなどについたクラス等はエディタには反映されないです。
WordPressのエディタにページIDのクラスを動的に追加するスクリプト
カスタマイズ方法は簡単です、下記のコードをfunctions.phpに入れるだけです。
エディタに<div class="is-root-container page-id-25">のようなクラスが追加されます。