私のクラシックエディタでは、追加の"Format"
ドロップダウンリストから選択できるいくつかのカスタムスタイルをロードしました。それらはeditor-style.css
に含まれています。
現在、グーテンベルクでは、そのドロップダウンは表示されなくなり、カスタムスタイルをテキストに適用できなくなりました。
カスタムスタイルをグーテンベルグエディタに追加する方法
エディタスタイルは、ブロックエディタではまったく異なる動作をします。これは、前のエディタのコンテンツがiframeにロードされているため、残りの管理者からは分離されたスタイルシートを使用でき、エディタのフォントを変更するためにbody
セレクタを使用することなどができます。
一方、ブロックエディタのコンテンツは、iframeではではなく、他の管理者とスタイルを共有します。そのため、ボディフォントの色を変更したブロックエディタにエディタスタイルを読み込もうとした場合は、UI全体のフォントの色を変更します。
ありがたいことに、WordPressにはスタイルシートをエンキューして、それがiframeであるかのようにスタイルを適用する方法があります。あなたがする必要があるのは、エディタスタイルの登録サポートです。
add_theme_support( 'editor-styles' );
その後は、以前と同じようにエディタスタイルシートをエンキューし続けることができます。
add_editor_style( 'editor-style.css' );
しかし、WordPressはCSSルールを動的に修正して、エディタ内のコンテンツにのみ適用されるようになります。たとえば、body
要素をターゲットにしているCSSは、ターゲット.editor-styles-wrapper
に変更されます。
詳しくはGutenbergハンドブックの エディタスタイルに関するセクション をご覧ください。