Fix - Block editor never loads the theme fonts and ignores the primary color

[rajatgautam755421]

Fixes the Free side of themegrill/accelerate-pro#47 (Pro fix: themegrill/accelerate-pro#131).

Reported by @iamprazol.

Cause: the editor's Roboto link was enqueued on a hook whose styles never reach the editor iframe, so no theme font loaded (a system font showed), and the Customizer primary color never reached the editor. The static title rule never matched (title showed 30px, front end 26px), lists/tables/buttons used weight 400 instead of 300, and form fields had no theme font/color.

Fix (same as the Pro PR and Spacious/Flash/Radiate):

• Editor styles and fonts on enqueue_block_assets (admin only), so they reach the iframe without the "added to the iframe incorrectly" warning. Handles unchanged; the stylesheet is now versioned.
• accelerate_block_editor_dynamic_css(): the primary color for links, classic quotes and submit buttons (the Quote block keeps green, like the front end); a page title uses the H1 size like the front end. Nothing is output at defaults for posts.
• style-editor-block.css: title selector, text weight, form fields.

Proof — yellow badges are live computed values (font · size · color), primary color #d63384:

Front end (reference)	Editor before (develop)	Editor after

How to test: set Customize → primary color, publish, open a post with a paragraph link, a classic-block quote and a Search block. Editor now matches the front end and Roboto/Roboto Slab load; on develop the link stays green and a system font shows.

Testing done: editor vs front end on a post and a page, default and custom primary color: 0 mismatches except the Code block font (static, unrelated, same as develop); develop had 7–8. Front end identical to develop. New @fresh spec block-editor/customizer-styles fails on develop, passes 2/2 here; full suite passes. It reuses tests/e2e/utils/wp.ts byte-identical to #95, so the two PRs merge cleanly. PHPCS: inc/functions.php 142→141 errors, 62→61 warnings; PHPCompatibility 7.4+ clean.

Changelog: Fix - Block editor now loads the theme fonts and shows the Customizer primary color.

🤖 Generated with Claude Code

[Copilot]

Copilot review overview

🟡 Changes recommended

Unresolved moderate issues remain in dynamic color handling and regression-test coverage.

Review effort: Lite
Findings: 2

Open (2)

• Editor primary-color rule omits Search button selector · New
• Fixture does not exercise custom color or required controls · New

What changed in this PR

Fixes block-editor font, typography, and Customizer color parity with the front end.

Changes:

• Moves editor assets to enqueue_block_assets with versioned CSS.
• Adds dynamic primary-color and page-title styles.
• Updates editor typography and form styling.
• Adds E2E coverage and QA mapping.

File	Summary
tests/​e2e/​utils/​wp.ts	Adds WordPress admin/API test helpers.
tests/​e2e/​specs/​block-editor/​customizer-styles.spec.ts	Adds editor/front-end style coverage; moderate gaps remain around custom colors, fonts, quotes, and submit controls.
style-editor-block.css	Aligns editor typography and form styling.
inc/​functions.php	Enqueues editor assets and dynamic CSS; moderate issues remain for button colors and case-insensitive default-color handling.
.themegrill-qa/​suite.json	Registers the block-editor QA area.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[deepench]

Tested this on a local site: the editor now gets the Roboto fonts and the primary colour, nothing loads on other admin pages or the front end, nice.

One thing in accelerate_block_editor_dynamic_css(): the colour only goes through wp_strip_all_tags, and the setting's sanitizer returns non-hex values as they are. So a value like red;} body{outline:6px solid blue} .x{ ends up as real CSS in the editor (the blue outline showed up when I tried it). Could you run it through sanitize_hex_color() and skip the rules when it's empty?

Also the spec never sets a non-default primary colour, so the colour rules aren't covered. Setting a colour in the spec and checking a link in the editor would cover it.

[rajatgautam755421]

Thanks @deepench, both fixed.

1. Color injection: valid. The editor CSS now only outputs sanitize_hex_color() values and skips the rules when it is empty (7af4b00). Checked: red;} body{outline:6px solid blue} .x{ now outputs nothing, #d63384 still works. The same hardening is in the Pro PR (themegrill/accelerate-pro#131): colors via sanitize_hex_color(), sizes via absint(), fonts only from the theme's own font list.
2. Spec coverage: the spec now saves a custom primary color through the Customizer (restored afterwards) and compares link, classic quote, submit and plain button in the editor with the front end, on a post and a page (4238015). It fails on develop and passes here.

[subin-shk]

LGTM 👍

[deepench]

LGTM 👍