Fügen Sie benutzerdefinierte CSS-Regeln zu Gutenberg-Block-Popups in Wordpress hinzu

Question

Hier sind einige Gutenberg-Blöcke, die ich im Wordpress-Editor geschrieben habe.

Ich möchte die Position des Popups des Gutenberg-Editorblocks leicht ändern.

Ich kann den vorherigen Absatzblock nicht auswählen, da er vor dem vorherigen Block erscheint.

Ich habe im Entwicklermodus eine richtige Regel gefunden, um das Problem für mich zu lösen, wie unten gezeigt

Also habe ich eine CSS-Regel in die Datei editor-style.css eingefügt:

.components-popover__content {
    position: relative !important;
    top: -4rem !important;
    left: 4.3rem !important;
 }

Natürlich habe ich die Editor-Stile in der function.php des Child-Themes hinzugefügt.

add_action( 'after_setup_theme', 'kyle_gutenberg_editor_css' );
function kyle_gutenberg_editor_css(){
    add_theme_support( 'editor-styles' ); 
    add_editor_style( 'editor-style.css'); 
}

Der <style>-Tag wurde tatsächlich zur Seite hinzugefügt:

Allerdings hat WordPress den CSS-Selektoren der von mir geschriebenen Regeln auch das Präfix .editor-styles-wrapper vorangestellt. Deshalb glaube ich nicht, dass es mit Popups funktioniert.

Im Gegensatz zu vielen Lösungen für benutzerdefinierte Gutenberg-Blöcke konnte ich keine Möglichkeit finden, CSS-Regeln zum Popup selbst hinzuzufügen. Wie kann ich dieses Ziel erreichen?

Vielen Dank im Voraus.

Answer 1

我认为 add_editor_style() 不是你想象的那样。 这是我在后端编辑器中加载 CSS 和 JS 文件的一个示例：

add_action( 'admin_enqueue_scripts', [ $this, 'my_admin_enqueue_scripts' ], 100 );


/**
 * Load the CSS & Javascript files for the admin
 */
function my_admin_enqueue_scripts() {
        $theme             = wp_get_theme();

        $file_with_path_js = get_template_directory() . '/includes/my_file.js';
        wp_enqueue_script( 'my-editor-scripts', $file_with_path_js, '', $theme->Version, true );

        $file_with_path_css = get_template_directory() . '/includes/my_file.css';
        wp_enqueue_style( 'my-editor-styles', $file_with_path_css, '', $theme->Version, 'all' );
}

Answer 2

好吧，我终于知道了。

我之前使用 after_setup_them 挂钩来添加编辑器样式。

add_action( 'after_setup_theme', 'kyle_gutenberg_editor_css' );
function kyle_gutenberg_editor_css(){
  add_theme_support( 'editor-styles' ); // if you don't add this line, your stylesheet won't be added
  add_editor_style( 'editor-style.css'); // tries to include style-editor.css directly from your theme folder
}

但是当涉及到古腾堡编辑器时，我们最好使用另一个钩子。 enqueue_block_editor_assets 钩子是在 WordPress 5.0 中引入的。

现在，我是这样写的：

add_action( 'enqueue_block_editor_assets', 'kyle_gutenberg_editor_css', 9999 );
function kyle_gutenberg_editor_css() {
   $css_file_modified_time = filemtime(get_stylesheet_directory() . '/editor-style.css');
   wp_enqueue_style( 'kyle-editor-styles', get_theme_file_uri( '/editor-style.css' ).'?time='.$css_file_modified_time, false, '' , 'all' );
}

现在在我的 editor-style.css 中，带有 .editor-styles-wrapper 的 css 规则适用于正文，任何没有 .editor-styles-wrapper 的规则适用于弹出窗口本身和其中的其他元素。