WordPress:editor-style.css反映について

Question

前提・実現したいこと

WordPressのグーテンベルグ：editor-style.cssの読み込みについての質問です。
WordPressでWebサイトをテーマから作ろうとしています。
（参考にしている書籍：https://www.socym.co.jp/book/1240）
functions.phpとeditor-style.cssなのですが、以下ののようにfunctions.phpに書いてもcssが反映されないので、困っています。
（普通のstyle.cssは反映されるようです。）
何か他に原因はあるのでしょうか？　よろしくお願い致します。

発生している問題・エラーメッセージ

editor-style.cssが反映されない。（検証ツールでも見ましたが、反映されないようです。）

該当のソースコード

<?php

function mytheme_setup() {

	// （Ｃ）のCSSを有効化
	add_theme_support( 'wp-block-styles' );

	// 縦横比を維持したレスポンシブを有効化
	add_theme_support( 'responsive-embeds' );
	
	// （Ｅ）のCSSを有効化＆エディタに読み込み
	add_theme_support( 'editor-styles' );
	add_editor_style( 'editor-style.css' );

	// ページのタイトルを有効化
	add_theme_support( 'title-tag' );

	// link、style、scriptのHTML5対応を有効化
	add_theme_support( 'html5', array( 
		'style', 
		'script' 
	) );

	// アイキャッチ画像を有効化
	add_theme_support( 'post-thumbnails' );

	// 全幅・幅広を有効化
	add_theme_support( 'align-wide' );

}
add_action( 'after_setup_theme', 'mytheme_setup' );

試したこと

記述ミスの確認、スーパーリロード、editor-style.cssをmythemeディレクトリの直下に置く。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

旧エディタがiframe中に記事を表示していたのと違って
Gutenbergは普通に管理画面中に同列で記事を表示しています

そのため記事編集のiframeにcssを読み込むような形で
editor-styleは機能しません

普通に記事編集の画面でwp_enqueue_styleで
cssを読み込めば適用されます

---

Gutenbergでeditor_styleが機能しないわけじゃないです

Gutenbergではeditor_styleのコードはファイルとしてじゃなく
jsでcssのコードを読み込むような形になってます
なので読み込んだスタイルシートの中にeditor-style.cssは現れません

cssは**.editor-styles-wrapper以下**に適用されるようなるため
bodyのクラスとか#editorとか.editor-styles-wrapperの祖先となるであろう要素を
セレクタに使っているとセレクタが無効になってしまいます

正直デバッグしにくい、使いにくいので
ブロックのスタイルを読み込む場合には
wp_enqueue_styleで普通に読み込む方がいいだろう
というのが個人的な見解です

Comments

[usako_y]

ありがとうございます! 試してみます。今回は書籍が間違っていたということでしょうか？（書籍にはeditor-styleもstyle.cssとは別に用意して実装する方法が書いてあったので...）wp_enque_styleで試してみます!

Answer 2

editor-style.cssのファイルを用意していますでしょうか？テーマフォルダの下に置く必要があると思います。

あまり詳しくないので、間違っているかもしれません。

Comments

[usako_y]

ありがとうございます、はい。editor-style.cssファイルを用意してテーマフォルダに置いているのですが、これが読み込まれないのです><