From 1b1266f29ed2c759025ab4df736fabb3c7e55883 Mon Sep 17 00:00:00 2001 From: rg755421 Date: Wed, 30 Sep 2026 08:09:07 +0545 Subject: [PATCH 1/2] Fix - Editor Google Fonts request returns HTTP 400 and never reaches the block editor (themegrill/radiate-pro#63) Co-Authored-By: Claude Sonnet 5.5 --- .themegrill-qa/suite.json | 4 ++ functions.php | 19 +++++++++- .../specs/block-editor/editor-fonts.spec.ts | 37 +++++++++++++++++++ 3 files changed, 58 insertions(+), 2 deletions(-) create mode 100644 tests/e2e/specs/block-editor/editor-fonts.spec.ts 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..b719ea7 100644 --- a/functions.php +++ b/functions.php @@ -174,15 +174,30 @@ function radiate_scripts() { add_action( 'wp_enqueue_scripts', 'radiate_scripts' ); /** - * Enqueue Google fonts and editor styles. + * Enqueue editor styles. */ function radiate_block_editor_styles() { - wp_enqueue_style( 'radiate-editor-googlefonts', '//fonts.googleapis.com/css2?family=Roboto|Merriweather:400,300&display=swap' ); 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 ); +/** + * Load the Google fonts inside the block editor canvas. + * + * Styles enqueued on `enqueue_block_editor_assets` stay outside the editor iframe, + * so the fonts are loaded here instead. + */ +function radiate_block_editor_fonts() { + 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 ); +} + +add_action( 'enqueue_block_assets', 'radiate_block_editor_fonts' ); + /** * Implement the Custom Header feature. 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..5f98721 --- /dev/null +++ b/tests/e2e/specs/block-editor/editor-fonts.spec.ts @@ -0,0 +1,37 @@ +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. Reads the link + * itself, 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()); + + await page.goto("/wp-admin/post-new.php"); + await expect(page.locator('iframe[name="editor-canvas"]')).toBeVisible({ timeout: 60_000 }); + + const fonts = page + .frameLocator('iframe[name="editor-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"); +}); From 10296f8b26aa19666e5ac3eddd9c72de3ff55119 Mon Sep 17 00:00:00 2001 From: rg755421 Date: Wed, 30 Sep 2026 08:38:56 +0545 Subject: [PATCH 2/2] Fix - Load the block editor stylesheet through enqueue_block_assets so it reaches the iframe (themegrill/radiate-pro#63) Co-Authored-By: Claude Sonnet 5.5 --- functions.php | 21 ++++++------------ .../specs/block-editor/editor-fonts.spec.ts | 22 ++++++++++++++----- 2 files changed, 23 insertions(+), 20 deletions(-) diff --git a/functions.php b/functions.php index b719ea7..7d7cd99 100644 --- a/functions.php +++ b/functions.php @@ -174,29 +174,22 @@ function radiate_scripts() { add_action( 'wp_enqueue_scripts', 'radiate_scripts' ); /** - * Enqueue editor styles. - */ -function radiate_block_editor_styles() { - 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 ); - -/** - * Load the Google fonts inside the block editor canvas. + * Enqueue block editor styles and fonts. * - * Styles enqueued on `enqueue_block_editor_assets` stay outside the editor iframe, - * so the fonts are loaded here instead. + * 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_fonts() { +function radiate_block_editor_styles() { 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_assets', 'radiate_block_editor_fonts' ); +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 index 5f98721..b943c5b 100644 --- a/tests/e2e/specs/block-editor/editor-fonts.spec.ts +++ b/tests/e2e/specs/block-editor/editor-fonts.spec.ts @@ -11,9 +11,11 @@ test.use({ storageState: ADMIN_STATE }); * @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. Reads the link - * itself, so it needs no network access to Google; it does not assert which - * font is rendered. + * 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, @@ -21,17 +23,25 @@ test("the block editor canvas loads the theme's Google fonts with a valid CSS2 U 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 fonts = page - .frameLocator('iframe[name="editor-canvas"]') - .locator('link[href*="fonts.googleapis.com"]'); + 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([]); });