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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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' ); }Baiklah, akhirnya saya tahu.
Saya menggunakan cangkuk
after_setup_themsebelum 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_assetsCangkuk 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-wrappersaya terpakai pada pop timbul itu sendiri dan elemen lain di dalamnya.