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

在基於區塊的主題, 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。始終清除瀏覽器快取/硬刷新，以確保您沒有看到編輯器的快取版本 - 這是導致許多問題的一個非常常見但被忽視的原因。