Fix - Block editor ignores Customizer typography and colors by rajatgautam755421 · Pull Request #152 · themegrill/spacious

rajatgautam755421 · 2026-09-25T12:23:43Z

Changes proposed in this Pull Request:

Free-theme part of themegrill/spacious-pro#66. Pro PR: themegrill/spacious-pro#204.

The block editor never used the Customizer settings: it only loaded the static style-editor-block.css, and not even the theme's bundled Lato, so the canvas fell back to a system font.

What this changes (editor only):

spacious_block_editor_dynamic_css() builds editor CSS from the same Customizer settings the front end uses (spacious_content_font_typography, spacious_titles_font_typography, spacious_primary_color), with the same defaults and helpers, scoped to .editor-styles-wrapper. Defaults output nothing. Attached inline to the existing spacious-block-editor-styles handle, in the existing function and hook. Colors are skipped under the Dark skin.
spacious_block_editor_fonts() (on enqueue_block_assets, admin only) declares the bundled Lato faces from assets/fonts/ (no new Google request, same as the front end) and loads other Customizer fonts with the theme's own Spacious_Generate_Fonts::render_fonts().
style-editor-block.css: heading sizes used .editor-styles-wrapper .wp-block hN, which never matches; now .editor-styles-wrapper hN with the front-end sizes.

Effect on existing sites

Front end: no change (stylesheets and inline CSS identical to develop, default and custom settings).
Editor: shows the site's Lato or chosen fonts, the primary color and front-end heading sizes.
Not changed (static, not Customizer-related): the Quote block's left border is green in the editor but #EAEAEA on the free front end.

How to test the changes in this Pull Request:

Customize: set the content font (e.g. Merriweather), titles font (e.g. Pacifico) and primary color. Publish.
Open a post in the block editor: text, headings and links now match the front end.
With default settings, the editor shows Lato (bundled) instead of a system font.
The front end looks exactly as before.

Types of changes:

Bug fix (non-breaking change which fixes an issue)
Enhancement (modification of the currently available functionality)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you successfully ran tests with your changes locally? Verified with Playwright (details below). No automated test was added.
Have you updated the documentation accordingly?

Changelog entry

Fix - Block editor now shows the Customizer typography and colors.

Proof (same post, same Customizer settings). The badges are the live computed values read from each element (getComputedStyle: font family · size · color swatch + hex).

1. Front end (reference) — body Merriweather, headings Pacifico, primary #D63384:

2. Block editor BEFORE (develop) — default colors, and "Lato" is declared but never loaded (system font renders):

3. Block editor AFTER (this PR) — every badge equals the front end:

Verification (WordPress 7.1.2, theme 1.9.12)

Custom settings: 56/57 computed values match between editor and front end (paragraph, link, list, H1–H6, quotes); the one left is the static Quote-block border noted above. Merriweather and Pacifico load in the canvas.
Front end vs develop: identical stylesheets and inline CSS (3 pages × default and custom).
Post title: the static title rule never matched, so the title took the H1 size; it now matches the front-end title (22px/36px).
No PHP notices/warnings from theme files. PHPCS: no new violations. PHPCompatibility 7.4+: clean.

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

github-actions · 2026-09-25T12:24:01Z

QA suite — refused, no regression spec

This PR changes product source but adds no spec, so the suite was
refused before booting WordPress — running it just to report the same
thing at the end costs runner minutes for nothing. Run
/claudegrill:verify-fix locally and let write-spec add the guard
to this branch, then push again.

Source files changed with no matching spec

inc/functions.php
style-editor-block.css

Copilot

Copilot review overview

🟢 Approval recommended

No blocking issues were identified; the remaining test-coverage request is non-blocking.

Review effort: Lite
Findings: 1

Open (1)

Add Playwright coverage for editor typography CSS and font loading · New

What changed in this PR

Fixes block-editor typography, colors, font loading, and heading sizing to match Customizer and front-end settings.

Changes:

Adds scoped dynamic editor CSS and Customizer font loading.
Corrects heading selectors and dimensions.

File	Changes
`style-editor-block.css`	Corrects heading selectors and sizing.
`inc/functions.php`	Adds dynamic editor styles and font loading.

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

…le size Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…aphy and colors Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

rajatgautam755421 · 2026-09-25T12:48:22Z

@tg-autopilot review

Copilot

Copilot review overview

🔵 Needs a closer look

Two moderate findings remain regarding post-title typography and preserved title styling.

Review effort: Lite
Findings: None

Resolved since last review (1)

Add Playwright coverage for editor typography CSS and font loading

rajatgautam755421 · 2026-09-25T13:01:35Z

Re the latest review summary (no line findings): the post title now matches the front end. It uses the titles font from spacious_titles_font_typography and 22px/36px like .header-post-title-class (35a374d). Its color and weight come from the same heading rules as on the front end (Free has no separate title color setting), so nothing was dropped when the dead title selector was fixed. Verified editor = front end at defaults and with a custom titles font.

rajatgautam755421 · 2026-09-25T13:01:37Z

@tg-autopilot review

Copilot

Copilot review overview

🟡 Changes recommended

Resolve post-title typography/color parity and restrict font loading to block-editor screens.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 1

Open (1)

Editor title input excluded from titles font selector · New

+		$css .= spacious_parse_typography_css(
+			$font_default,
+			get_theme_mod( 'spacious_titles_font_typography', $font_default ),
+			$wrapper . ' h1, ' . $wrapper . ' h2, ' . $wrapper . ' h3, ' . $wrapper . ' h4, ' . $wrapper . ' h5, ' . $wrapper . ' h6'


Conflict in inc/functions.php: develop (#142) added SPACIOUS_THEME_VERSION to the spacious-block-editor-styles enqueue, while this branch added the dynamic editor CSS inline style. Kept both: the versioned enqueue call and this branch's inline CSS logic. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

subin-shk

LGTM 👍🏼

* Fix - CI dependency install fails with pnpm 11 on Node 20 runners * Fix - Copilot review: use pnpm 10 instead of 9, and the real build-script allowlist key pnpm 9 doesn't gate install/postinstall scripts at all, so downgrading to it silently dropped the build-script allowlist protection pnpm 11 had (verified directly: pnpm 11 blocks an unlisted package's postinstall by default, pnpm 9 runs every package's scripts unconditionally). pnpm 10.34.5 declares the same Node >=18.12 compatibility as 9, so it still fixes the original CI failure, but keeps the same default-deny behavior as 11. Also switched pnpm-workspace.yaml from the pnpm 11-only "allowBuilds" map (confirmed not recognized by pnpm 10) to the documented, version-portable "onlyBuiltDependencies" array, which works correctly on both. * Fix - WooCommerce product page layout shows Right Sidebar but renders full width (#139) * Fix - Responsive menu shows enabled but never applies until saved once (#138) * Fix - Responsive menu shows enabled but never applies until saved once * Fix - Copilot review findings on the responsive-menu e2e suite Scopes the changeset cleanup to the suite's own admin user, represents an absent theme_mods row instead of throwing on a fresh install, restricts menu reuse to the primary location, maps inc/functions.php into the header area, fixes the mobile-menu-toggle spec to open the submenu's own caret toggle before asserting its content is visible, and publishes reverted Customizer values in cleanup (not just setting them) so Playground runs actually revert. Also fixes: a missing ignoreHTTPSErrors option that blocked the suite from ever running against a local DDEV site, and several specs calling setControl() on a page that had already navigated away from the Customizer. * Fix - auth.setup guards against a cold-boot fill race on Playground Waits for both login fields to be visible and confirms the password value actually landed before submitting, instead of filling immediately after goto(). A cold Playground boot can serve wp-login.php before it has fully hydrated, silently losing a fill() with no error. * Fix - Version theme scripts and styles with the theme version (#142) * Fix - Version theme scripts and styles with the theme version The main stylesheet and most theme scripts were enqueued without a version, so WordPress appended its own core version and browsers or CDNs kept serving old copies after a theme update until WordPress itself was updated. Pass SPACIOUS_THEME_VERSION, as the Customizer and admin assets already do. Handles, dependencies and load order are unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Fix - Leave a child theme's stylesheet on its default version get_stylesheet_uri() is the child theme's own style.css when a child theme is active, so stamping it with the parent's version was wrong. Keep WordPress' default version there, exactly as before this change, and use the theme version only for Spacious' own stylesheet. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> * Fix - Slider assets load unconditionally on the blog index due to an operator-precedence bug (#145) * Fix - Submenu caret icon never flips direction when toggled (#149) The sub-toggle click handler looked for a child matching ".sub-toggle .fa", but inside the handler `this` already is the .sub-toggle element itself, not a container of one - so the selector never matched anything and toggleClass() silently ran on an empty set. The submenu itself opened and closed correctly (a separate call), only the caret's own direction (caret-right/caret-down) never updated. Fixed by matching the icon's actual direct child selector, ".fa". Verified live in both themes: before the fix, clicking the caret expanded the submenu but the icon class never changed; after, it flips fa-caret-right <-> fa-caret-down correctly in both directions. Also checked and ruled out a previously-suspected duplicate id="site-navigation" theory: header.php's two spacious_main_nav() call sites are wrapped in genuinely mutually exclusive conditions (spacious_header_display_type === 'four' vs !== 'four'), so only one nav ever renders - confirmed with 0 duplicates under both settings, live. Nothing to fix there. * Fix - Deprecated IE-conditional html5shiv enqueue firing a notice on every page load (WP 6.9+) (#151) Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> * Fix - navigation.js null errors on pages without the theme header (Widgets screen previews) (#147) Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> * Fix - Search block input renders taller than its Search button (#148) Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> * Fix - Meta box save routine reads $_POST without isset() checks or a value whitelist (#140) * Fix - Unbounded get_users() full-table scan in theme-switch cleanup (#144) * Fix - Missing capability check on free->pro migration trigger (#146) Adds current_user_can( 'edit_theme_options' ) alongside the existing nonce verification in the demo-import migration trigger, its notice, and its dismiss handler. The nonce alone only proved the request came from the current user's own session, not that they were allowed to run the action - any logged-in user, regardless of role, could force a site-wide theme_mods and options rewrite using stale legacy data, since the migration functions are hooked to after_setup_theme, which fires on the front end too. Verified live: a subscriber-role account, using a nonce genuinely valid for their own session, is now correctly rejected with "You do not have permission to perform this action." * Fix - Block borders set in the editor not showing on the front end (#150) Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> * Fix - Header cart count and total stale after AJAX add to cart (#143) * Fix - Header cart count and total stayed stale after AJAX add to cart The header cart block was rendered once at page load and never registered as a WooCommerce cart fragment, so it only refreshed on a full reload while the mini-cart updated. Move the block into a shared function used by both the initial render and a woocommerce_add_to_cart_fragments filter. The filter is registered with the default spacious_cart_icon(), so a child theme overriding it keeps its own markup, and it never overwrites a fragment already supplied for the same selector. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Update translation template after moving the header cart strings Regenerated with the makepot options from Gruntfile.js. Only the creation date and source line references change. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Fix - Update the header cart on the Cart and Checkout pages The WooCommerce cart widget, which normally loads cart fragments, hides itself on the Cart and Checkout pages, so the header cart never refreshed there. The Cart and Checkout blocks also change the cart through the Store API without firing the events cart fragments listen for. Load cart fragments whenever the header cart icon is on, and when the Cart or Checkout block's cart store changes its item count or subtotal, trigger a fragment refresh so the header is re-rendered by spacious_cart_icon_views(). Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> * Fix - Block editor ignores Customizer typography and colors (#152) * Fix - Block editor ignores Customizer typography and colors Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Fix - Editor post title used the H1 size instead of the front-end title size Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Add - E2E guard: block editor matches the front-end Customizer typography and colors Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Remove - manually added E2E spec; specs come from the verify-fix flow Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> * Match footer credit wording to Pro's corrected punctuation spacious_footer_copyright()'s default text was missing a colon after "Theme" and carried a trailing period Pro's own fix already dropped - "Theme Spacious by ThemeGrill. Powered by: WordPress." here vs Pro's "Theme: Spacious Pro by ThemeGrill. Powered by: WordPress". Added the colon and removed the trailing period so both editions read the same way. Verified live: front end now shows "Theme: Spacious by ThemeGrill. Powered by: WordPress" with no trailing period. PHPCS unchanged (166 errors / 66 warnings, identical before and after). * Version bump to release of v1.10.0 * Default theme options to an empty array in the major controls migration get_option( $themename ) returns false whenever the option doesn't exist (fresh installs), and the subsequent unset() calls on that false value log PHP 8.1+ "Automatic conversion of false to array" deprecation notices on every after_setup_theme bootstrap until the migration flag is set. Ported from spacious-pro release/v2.8.0 (commit 7601809f), which fixed the same pattern against its own hardcoded 'spacious' option lookup. Verified live: reproduced 2 deprecation notices at migration.php:63 with the old spacious option absent, confirmed 0 after, via a real front-end request with Playwright against the Spacious theme. --------- Co-authored-by: Rajat Gautam <83450756+rajatgautam755421@users.noreply.github.com> Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> Co-authored-by: Prajjwal Poudel <iamprazol@gmail.com>

Fix - Block editor ignores Customizer typography and colors

fd95922

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

rajatgautam755421 added the bug label Sep 25, 2026

rajatgautam755421 self-assigned this Sep 25, 2026

tg-autopilot requested a lite review from Copilot September 25, 2026 12:23

Copilot started reviewing on behalf of tg-autopilot September 25, 2026 12:24 View session

Copilot AI reviewed Sep 25, 2026

View reviewed changes

Comment thread inc/functions.php

rajatgautam755421 and others added 3 commits September 25, 2026 18:19

Fix - Editor post title used the H1 size instead of the front-end tit…

35a374d

…le size Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Add - E2E guard: block editor matches the front-end Customizer typogr…

de5481b

…aphy and colors Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Remove - manually added E2E spec; specs come from the verify-fix flow

aec332d

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tg-autopilot requested a lite review from Copilot September 25, 2026 12:48

Copilot started reviewing on behalf of tg-autopilot September 25, 2026 12:49 View session

Copilot AI reviewed Sep 25, 2026

View reviewed changes

tg-autopilot requested a lite review from Copilot September 25, 2026 13:01

Copilot started reviewing on behalf of tg-autopilot September 25, 2026 13:02 View session

Copilot AI reviewed Sep 25, 2026

View reviewed changes

Comment thread inc/functions.php

$css .= spacious_parse_typography_css(

$font_default,

get_theme_mod( 'spacious_titles_font_typography', $font_default ),

$wrapper . ' h1, ' . $wrapper . ' h2, ' . $wrapper . ' h3, ' . $wrapper . ' h4, ' . $wrapper . ' h5, ' . $wrapper . ' h6'

iamprazol requested a review from subin-shk September 28, 2026 06:31

subin-shk approved these changes Sep 28, 2026

View reviewed changes

iamprazol merged commit 35dfca8 into develop Sep 28, 2026
1 check passed

iamprazol deleted the fix/66-editor-customizer-styles branch September 28, 2026 07:44

iamprazol added the Approved label Sep 28, 2026

Navigation Menu

Fix - Block editor ignores Customizer typography and colors - #152

Fix - Block editor ignores Customizer typography and colors#152
iamprazol merged 5 commits into
developfrom
fix/66-editor-customizer-styles

rajatgautam755421 commented Sep 25, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 25, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

rajatgautam755421 commented Sep 25, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

rajatgautam755421 commented Sep 25, 2026

Uh oh!

rajatgautam755421 commented Sep 25, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

subin-shk left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

rajatgautam755421 commented Sep 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Sep 25, 2026

QA suite — refused, no regression spec

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟢 Approval recommended

Uh oh!

Uh oh!

rajatgautam755421 commented Sep 25, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🔵 Needs a closer look

Uh oh!

rajatgautam755421 commented Sep 25, 2026

Uh oh!

rajatgautam755421 commented Sep 25, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

subin-shk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

rajatgautam755421 commented Sep 25, 2026 •

edited

Loading