WordPress 6.0 (add_editor_style) 不会在古腾堡编辑器中加载 style.css

Question

我正在学习 Udemy WordPress 课程来创建自定义 WordPress 块主题。我成功在 function.php 中注册了块类型，并且可以在古腾堡编辑器中选择我的块。

教程建议使用以下方法来加载我的 gutenberg 块元素的样式，这样 css 也会加载到前端。

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

无论如何，无论我做什么，古腾堡都不会加载我的块的 style.css 文件。

来自古腾堡后端的图像

有什么提示吗？我可能缺少什么或者如何调试问题？

非常感谢！

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

在基于块的主题< /a>, 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。始终清除浏览器缓存/硬刷新，以确保您没有看到编辑器的缓存版本 - 这是导致许多问题的一个非常常见但被忽视的原因。