[Olein_jp]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】最新
【お使いのブラウザ】Google Chrome
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）

===

編集画面用CSSについてお聞きします。

add_action(
	'admin_init',
	function() {
		add_editor_style( '/../../plugins/happy-snow-monkey/editor-style.css' );
	}
);

このような形で編集画面用スタイルを用意して遊んでいたのですが、.is-root-containerというクラスが .editor-styles-wrapper の後に入ってスタイリングを邪魔されるのですが、昔からこんな感じでしたっけ？

こうなると、editor-style.cssには、.editor-styles-wrapperでは自動でラップしてくれるのですが、.is-root-containerは自動でつけてくれないので、

.is-root-container h2 {
  ...
}

と書かかなければならなくなりますよね？前からこんな感じでしたっけ…？

あと、admin_initだと反映されるのですが after_setup_themeだと反映されないのって何故なんでしょうか…？

皆さんはどうされていますか？

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

「.is-root-containerというクラスが .editor-styles-wrapper の後に入ってスタイリングを邪魔される」というのは具体的にどのような状況でしょうか？

Snow Monkey の WordPress 5.5 対応のときに、コアのスタイルを打ち消すためと、エディターの見た目・フロントの見た目をより一致させるために、いくつか .is-root-container を使ったスタイルを追加しています。もしかしたらその影響はあるかもしれません。

♥ 1

いいねをした人: 居ません

[Olein_jp]

今回のこちらの環境としては、editor-style.cssという編集画面用のCSSファイルに、例えば、

h2 {
border-left: none;
}

と記述したとすると、編集画面では.editor-styles-wrapperで自動的に囲ってくれるので、編集画面で読み込まれているCSSとしては、

.editor-styles-wrapper h2 {
border-left: none;
}

となります。

しかし、上でキタジマさんが言われているように

Snow Monkey の WordPress 5.5 対応のときに、コアのスタイルを打ち消すためと、エディターの見た目・フロントの見た目をより一致させるために、いくつか .is-root-container を使ったスタイルを追加しています。

の.is-root-container というクラスが以下のように影響をしてスタイルを上書きできないという状況です。

.editor-styles-wrapper .is-root-container > h2 {
  // テーマ側からのスタイル
}

解決方法としては、editor-style.cssに、.is-root-container を加えたクラスを付ければスタイルの上書きはできるので、これでやっちゃえばいいんですけどね。

あと、add_editor_styles()を行う際のフックですが、after_setup_themeでフックするとスタイルが書き出されるタイミングが遅いのか、テーマ側のスタイルを上書きできませんでした。admin_initだと同じCSSでも上書きすることができます。なので、after_setup_themeではなくadmin_initでフックするので問題ないですかねー？（別トピックにした方がいいですかね？）

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

h2（見出し）でいうと、本来フロントでは記事の直下、つまり入れ子になっていない h2 だけが装飾があたるようになっているのに、エディター上ではどの位置の見出しにも装飾があたるようになっていました。5.5 から .is-root-container が追加されたことでフロントと同じように直下だけという指定ができるようになったので、.is-root-container を使ってフロントとエディターでの表示（指定）を揃えたという流れです。

ということで、もし見出しブロックをオリジナルデザインにカスタマイズしたい場合は、ブラウザのデベロッパーツールで Snow Monkey のクラス指定を確認して、それにあわせて上書きするのが良いかなと思います。

なので、after_setup_themeではなくadmin_initでフックするので問題ないですかねー？

本来は after_setup_theme が正しいと思うんですけど、確認してみます！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

なので、after_setup_themeではなくadmin_initでフックするので問題ないですかねー？

こちら確認しました。Snow Monkey はエディター用の CSS を after_setup_theme で読んでいるのですが、admin_init でオリジナルの CSS を追加すると Snow Monkey の CSS より先に読み込まれるようなので、after_setup_theme（必要なら詳細度も調整）で読み込むのが安全なのではないかと思います（僕の環境では Snow Monkey の CSS より後に読み込まれました）。

♥ 1

いいねをした人: 居ません

[Olein_jp]

ご確認いただいてありがとうございます！

では、after_setup_themeで読み込む方法で行きたいと思います！

♥ 1

いいねをした人: 居ません

[投稿者]

投稿