WordPress 6.0 (add_editor_style) tidak memuatkan style.css dalam editor Gutenberg

Question

Saya sedang mengikuti kursus Udemy WordPress untuk mencipta tema blok WordPress tersuai. Saya berjaya mendaftarkan jenis blok dalam function.php dan boleh memilih blok saya dalam editor Gutenberg.

Tutorial mencadangkan menggunakan kaedah berikut untuk memuatkan gaya untuk elemen blok gutenberg saya supaya css juga dimuatkan pada bahagian hadapan.

function lr_theme_features() {

   // Enqueue editor styles
   // Borrowed from TwentyTwentyToTheme
   add_editor_style( 'style.css' );
   add_theme_support('editor-styles');

}

add_action('after_setup_theme', 'lr_theme_features');

Apa pun, tidak kira apa yang saya lakukan, Gutenberg tidak akan memuatkan fail style.css blok saya.

Imej daripada bahagian belakang Gutenberg

Ada petua? Apakah yang mungkin saya hilang atau bagaimana saya boleh nyahpepijat masalah itu?

Terima kasih banyak-banyak!

Answer 1

Saya juga menghadapi beberapa masalah dengan CSS pentadbir saya. Saya mendapati bahawa jika anda mengimport CSS dalam style.css pentadbir seperti ini, ia memecahkan pemuatan gaya:

@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

Anehnya, ia berfungsi tanpa petikan, seperti ini:

@import url(https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap);

Tetapi tidak pasti sama ada ini adalah amalan yang baik... Amalan terbaik ialah memuatkan perpustakaan luaran seperti ini dan bukannya menggunakan pernyataan import:

add_editor_style( 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

Semoga ia membantu orang lain!

Answer 2

Dalam tema berasaskan blok, wp-block-styles digunakan untuk memuatkan helaian gaya dalam editor dan bahagian hadapan. Tema TwentyTwentyTwo menggunakan teknologi yang sama memandangkan tema berasaskan blok adalah agak baharu, anda mungkin telah mengikuti tutorial tema (kini) yang sudah lapuk.

function lr_theme_features() {

   // Add support for block styles.
   add_theme_support( 'wp-block-styles' );

   // Enqueue editor styles.
   add_editor_style( 'style.css' );

}

add_action('after_setup_theme', 'lr_theme_features');

Jika anda masih tidak melihat gaya dimuatkan, pastikan nama kelas blok yang anda sasarkan sepadan dengan teg HTML.

PS. Sentiasa kosongkan cache penyemak imbas anda/segar semula keras untuk memastikan anda tidak melihat versi cache editor anda - ini adalah punca yang sangat biasa tetapi diabaikan banyak masalah.