ブロックエディタにフロントエンドのCSSを部分的に適用させない方法

WordPressの有料テーマや一部の無料テーマ（Cocoonなど）では、エディターの見た目を実際のサイトの見た目と同じにしてくれるように、自動的にフロントエンドのCSSがエディター内部に適用されます。

これはこれで便利な機能なのですが、Wordpressエディターに適用してほしくないCSSが含まれていた場合に問題となります。

例えば、初期状態で非表示（visibility:hiddenやdisplay:none）としておいて、イベントをjavascriptで捕まえてDOM操作でclassを追加し、表示させるような動きになっているとします。そのようなCSSをエディタに適用した場合、その部分は非表示になって編集そのものが出来なくなります。

この記事では、フロントエンドのCSSをそのままエディタに使われると困るときの回避方法についてご紹介します。

この記事で分かること

方法1：editor-style.cssを用意して上書きする
方法2：not(.editor-styles-wrapper)をつける
1. 通常時
2. エディタ側
方法3：ダッシュボード用のCSSで上書きする
まとめ

方法1：editor-style.cssを用意して上書きする

エディター用の外部CSSファイル（editor-style.css）を用意して上書きすれば大丈夫です。

子テーマがあれば、子テーマの直下にeditro-style.cssを置いて必要なセレクタを上書きします。

子テーマが無ければ、親テーマの直下のeditro-style.cssが読み込まれます。テーマアップデートで消えるので通常やらないと思います。

add_action(
	'after_setup_theme',
	function() {
    add_theme_support( 'editor-styles' );
		add_editor_style( get_stylesheet_directory_uri().'/editor-style.css' );
	}
);

方法2：not(.editor-styles-wrapper)をつける

方法1が使えない場合は、小手先のテクニックで逃げます。

:not(.editor-styles-wrapper)じゃなくても良いのかもしれないけど、エディタに適用してほしくないCSSに:not(.editor-styles-wrapper)をつけると、エディタ側では無効になる。

通常時

:not(.editor-styles-wrapper)は常に非成立なので影響なし。

エディタ側

:not(.editor-styles-wrapper).editor-styles-wrapperと変換されるようで、こちらは常に成立しないので無効になる効果がある。

方法3：ダッシュボード用のCSSで上書きする

方法１も２も使えない場合の最終手段ですが、ダッシュボード用のCSSとして自分で追加してしまう方法もあります。

エディタに適用されるスタイルには、.editor-styles-wrapperが追加されるので、.editor-styles-wrapperをつけてあげればエディタ画面だけ有効になります。

上書きしたいセレクタは検証ツールで調べて、必要に応じてimportantをつけてあげましょう。

/**
 * 管理画面に追加のスタイルを追加する
 */
function custom_admin_style() {
	?><style>
	.editor-styles-wrapper h2{color:green;}
	</style><?php
}
add_action( 'admin_head', 'custom_admin_style' );