Tambahkan peraturan CSS tersuai pada pop timbul blok Gutenberg dalam Wordpress

Question

Berikut ialah beberapa blok Gutenberg yang saya tulis dalam editor Wordpress.

Apa yang saya mahu lakukan ialah mengubah sedikit kedudukan pop timbul blok editor Gutenberg.

Saya tidak boleh memilih blok perenggan sebelumnya kerana ia muncul sebelum blok sebelumnya.

Saya menemui peraturan yang betul untuk menyelesaikan masalah saya dalam mod pembangun seperti yang ditunjukkan di bawah

Jadi saya menambah peraturan css dalam fail editor-style.css:

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

Sudah tentu, saya menambah gaya editor dalam fungsi tema kanak-kanak.php.

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'); 
}

Tag <style> memang telah ditambahkan pada halaman:

Walau bagaimanapun, WordPress juga meletakkan awalan pemilih css peraturan yang saya tulis dengan .editor-styles-wrapper . Itulah sebabnya saya rasa ia tidak berfungsi dengan pop timbul.

Tidak seperti kebanyakan penyelesaian untuk blok Gutenberg tersuai, saya tidak dapat mencari cara untuk menambahkan peraturan CSS pada pop timbul itu sendiri. Bagaimanakah saya boleh mencapai matlamat ini?

Terima kasih terlebih dahulu.

Answer 1

Saya rasa add_editor_style() bukan seperti yang anda fikirkan. Berikut ialah contoh saya memuatkan fail CSS dan JS dalam editor bahagian belakang:

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

Baiklah, akhirnya saya tahu.

Saya menggunakan cangkuk after_setup_them sebelum ini untuk menambah gaya editor.

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
}

Tetapi apabila bercakap mengenai editor Gutenberg, lebih baik kami menggunakan cangkuk lain. enqueue_block_editor_assets Cangkuk diperkenalkan dalam WordPress 5.0.

Sekarang, inilah yang saya tulis:

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' );
}

Kini peraturan dalam editor-style.css 中，带有 .editor-styles-wrapper 的 css 规则适用于正文，任何没有 .editor-styles-wrapper saya terpakai pada pop timbul itu sendiri dan elemen lain di dalamnya.