Wordpress の Gutenberg ブロック ポップアップにカスタム CSS ルールを追加する

Question

ここでは、Wordpress エディターで作成した Gutenberg ブロックをいくつか示します。

私がやりたいのは、Gutenberg エディター ブロックのポップアップの位置を少し変更することです。

前の段落ブロックは前のブロックの前に表示されるため、選択できません。

以下に示すように、開発者モードで問題を解決するための正しいルールを見つけました

そこで、editor-style.css ファイルに CSS ルールを追加しました。

リーリー

もちろん、子テーマの function.php にエディター スタイルを追加しました。

リーリー

<style> タグは実際に ページに追加されています:

ただし、WordPress は、私が作成したルールの CSS セレクターの前にプレフィックス .editor-styles-wrapper も追加しました。そのため、ポップアップでは機能しないと思います。

カスタム Gutenberg ブロックの多くのソリューションとは異なり、ポップアップ自体に CSS ルールを追加する方法が見つかりませんでした。どうすればこの目標を達成できますか?

＃＃＃よろしくお願いします。

Answer 1

add_editor_style() はあなたの考えとは違うと思います。 以下は、バックエンド エディターに CSS ファイルと JS ファイルをロードする例です: リーリー

Answer 2

よし、やっとわかった。

私は以前、after_setup_them フックを使用してエディター スタイルを追加しました。

リーリー

しかし、Gutenberg エディタに関しては、別のフックを使用した方がよいでしょう。 enqueue_block_editor_assets フックは WordPress 5.0 で導入されました。

今、私は次のように書きます:

リーリー

今、私の editor-style.css では、.editor-styles-wrapper を含む CSS ルールが、.editor-styles のない本文に適用されます。 for -wrapper は、ポップアップ自体とその中の他の要素に適用されます。