WordPress 6.0 (add_editor_style) が Gutenberg エディターで style.css を読み込まない

Question

カスタム WordPress ブロックテーマを作成するために、Udemy WordPress コースを受講しています。 function.php にブロック タイプが正常に登録され、Gutenberg エディターでブロックを選択できるようになりました。

チュートリアルでは、CSS もフロントエンドに読み込まれるように、次の方法を使用して Gutenberg ブロック要素のスタイルを読み込むことを提案しています。

リーリー

とにかく、何をしても、Gutenberg はブロックの style.css ファイルをロードしません。

Gutenberg バックエンドからの画像

＃＃＃任意のヒント？何が不足している可能性がありますか? 問題をデバッグするにはどうすればよいですか?

＃＃＃どうもありがとうございます！

Answer 1

管理者の CSS にもいくつか問題があります。 次のように admin style.css に CSS をインポートすると、スタイルの読み込みが中断されることがわかりました:

リーリー

奇妙なことに、次のように引用符なしで機能します:

リーリー

しかし、これが良い習慣であるかどうかはわかりません... ベスト プラクティスは、import ステートメントを使用する代わりに、次のように外部ライブラリをロードすることです。 リーリー

他の人にも役立つことを願っています!

Answer 2

ブロックベースのテーマでは、wp-block-styles を使用してエディターとフロントエンドにスタイルシートを読み込みます。 TwentyTwentyTwo テーマは同じテクノロジーを使用しています; ブロックベースのテーマが比較的新しいことを考えると、(現在は) 古いテーマのチュートリアルに従っている可能性があります。 リーリー

それでもスタイルの読み込みが表示されない場合は、対象のブロックのクラス名が HTML タグと一致していることを確認してください。

PS.常に

ブラウザのキャッシュをクリア/ハードリフレッシュして、キャッシュされたバージョンのエディターが表示されないようにしてください。これは非常に一般的ですが、多くの問題の見落とされている原因です。