WordPress 6.0 (add_editor_style) lädt style.css nicht im Gutenberg-Editor

Question

Ich nehme am Udemy-WordPress-Kurs teil, um ein benutzerdefiniertes WordPress-Block-Theme zu erstellen. Ich habe den Blocktyp erfolgreich in function.php registriert und kann meinen Block im Gutenberg-Editor auswählen.

Das Tutorial schlug vor, die folgende Methode zu verwenden, um die Stile für mein Gutenberg-Blockelement zu laden, damit das CSS auch im Frontend geladen wird.

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

Egal was ich mache, Gutenberg lädt die style.css-Datei meines Blocks nicht.

Bild aus dem Gutenberg-Backend

Irgendwelche Tipps? Was könnte mir fehlen oder wie kann ich das Problem beheben?

Vielen Dank!

Answer 1

我的管理 CSS 也遇到了一些问题。 我发现如果你在管理 style.css 中像这样导入 CSS，它会破坏样式加载：

@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");

奇怪的是，它无需引号即可工作，如下所示：

@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);

但不确定这是否是一个好的做法...... 最好的做法是像这样加载外部库，而不是使用 import 语句：

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

希望对其他人有帮助！

Answer 2

在基于块的主题, wp-block-styles 用于在编辑器和前端加载样式表。 TwentyTwentyTwo 主题使用相同的技术；鉴于基于块的主题相对较新，您可能遵循了（现在）过时的主题教程。

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

如果您仍然看不到正在加载的样式，请检查您所定位的块的类名称是否与 HTML 标记匹配。

PS。始终清除浏览器缓存/硬刷新，以确保您没有看到编辑器的缓存版本 - 这是导致许多问题的一个非常常见但被忽视的原因。