diff --git a/.themegrill-qa/suite.json b/.themegrill-qa/suite.json index d4171d8..aeba242 100644 --- a/.themegrill-qa/suite.json +++ b/.themegrill-qa/suite.json @@ -59,6 +59,10 @@ "content-none.php", "content.php", "inc/template-tags.php" + ], + "block-editor": [ + "style-editor-block.css", + "functions.php" ] } } diff --git a/functions.php b/functions.php index 1d8f4a8..7d7cd99 100644 --- a/functions.php +++ b/functions.php @@ -174,14 +174,22 @@ function radiate_scripts() { add_action( 'wp_enqueue_scripts', 'radiate_scripts' ); /** - * Enqueue Google fonts and editor styles. + * Enqueue block editor styles and fonts. + * + * Hooked on `enqueue_block_assets` because styles enqueued on + * `enqueue_block_editor_assets` stay outside the block editor iframe, or only + * reach it through a compatibility path WordPress warns about. */ function radiate_block_editor_styles() { - wp_enqueue_style( 'radiate-editor-googlefonts', '//fonts.googleapis.com/css2?family=Roboto|Merriweather:400,300&display=swap' ); + if ( ! is_admin() ) { + return; + } + + wp_enqueue_style( 'radiate-editor-googlefonts', 'https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400&family=Roboto:wght@400&display=swap', array(), null ); wp_enqueue_style( 'radiate-block-editor-styles', get_template_directory_uri() . '/style-editor-block.css' ); } -add_action( 'enqueue_block_editor_assets', 'radiate_block_editor_styles', 1, 1 ); +add_action( 'enqueue_block_assets', 'radiate_block_editor_styles' ); /** diff --git a/tests/e2e/specs/block-editor/editor-fonts.spec.ts b/tests/e2e/specs/block-editor/editor-fonts.spec.ts new file mode 100644 index 0000000..b943c5b --- /dev/null +++ b/tests/e2e/specs/block-editor/editor-fonts.spec.ts @@ -0,0 +1,47 @@ +import { test, expect } from "../../fixtures"; +import { ADMIN_STATE, hasAdminCredentials } from "../../utils/login"; + +test.use({ storageState: ADMIN_STATE }); + +/** + * @area block-editor + * @tier fresh + * @guards radiate-pro#63 + * @source fix/63-editor-google-fonts-url 2026-09-30; functions.php + * @why The theme asked Google for its editor fonts with an invalid css2 URL + * (HTTP 400) and on a hook whose styles never reach the editor iframe, so + * the editor text fell back to generic fonts. Guards that the editor canvas + * carries the fonts stylesheet with valid css2 syntax and the theme's + * editor stylesheet, and that WordPress raises no "added to the iframe + * incorrectly" warning for a theme asset. Reads the links themselves, so it + * needs no network access to Google; it does not assert which font is + * rendered. + */ +test("the block editor canvas loads the theme's Google fonts with a valid CSS2 URL @fresh @block-editor", async ({ + page, +}) => { + test.skip(!hasAdminCredentials(), "needs TGQA_ADMIN_USER / TGQA_ADMIN_PASS"); + test.setTimeout(90_000); + page.on("dialog", (dialog) => dialog.accept()); + const iframeWarnings: string[] = []; + page.on("console", (message) => { + if (/radiate-.*added to the iframe incorrectly/.test(message.text())) { + iframeWarnings.push(message.text()); + } + }); + + await page.goto("/wp-admin/post-new.php"); + await expect(page.locator('iframe[name="editor-canvas"]')).toBeVisible({ timeout: 60_000 }); + + const canvas = page.frameLocator('iframe[name="editor-canvas"]'); + const fonts = canvas.locator('link[href*="fonts.googleapis.com"]'); + await expect(fonts.first()).toBeAttached({ timeout: 20_000 }); + + const href = (await fonts.first().getAttribute("href"))!; + expect(href).toMatch(/^https:\/\/fonts\.googleapis\.com\/css2\?family=[^|]+$/); + expect(href).toContain("Merriweather"); + expect(href).toContain("Roboto"); + + await expect(canvas.locator('link[href*="style-editor-block.css"]').first()).toBeAttached(); + expect(iframeWarnings).toEqual([]); +});