web-dev-qa-db-ja.com

グーテンベルクにカスタムスタイルを追加する方法?

私のクラシックエディタでは、追加の"Format"ドロップダウンリストから選択できるいくつかのカスタムスタイルをロードしました。それらはeditor-style.cssに含まれています。

現在、グーテンベルクでは、そのドロップダウンは表示されなくなり、カスタムスタイルをテキストに適用できなくなりました。

カスタムスタイルをグーテンベルグエディタに追加する方法

2
Fabio Marzocca

エディタスタイルは、ブロックエディタではまったく異なる動作をします。これは、前のエディタのコンテンツが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ハンドブックの エディタスタイルに関するセクション をご覧ください。

1
Jacob Peattie