Customizer (live preview iframe + postMessage)

[tayebmokni]

Summary

Build the Customizer: a live-preview iframe panel that lets users tweak site identity, colors, typography, menus, homepage, additional CSS, and theme-declared custom sections without page reloads. Uses postMessage to push pending overrides into a <ThemeOverridesProvider> in the previewed page.

Design reference

• docs/03-theme-system.md §8 (Customizer)
• docs/03-theme-system.md §8.1 (What it controls)
• docs/03-theme-system.md §8.2 (How preview works)
• docs/03-theme-system.md §8.3 (Authoring custom Customizer sections)

Acceptance criteria

• Admin route renders left controls + right <iframe src="/_preview?...">
• postMessage protocol {type:'override', path, value} documented and enforced
• <ThemeOverridesProvider> injects overrides; theme runtime reads context first, then persisted values
• Sections: Site identity, Colors, Typography, Menus, Homepage, Additional CSS
• Save POSTs overrides → server validates against theme.json schema → persists to site_options.theme_customizations[themeId]
• Invalidates ISR tags after save
• Theme-registered custom sections (defineCustomizerSection) render their controls from the declared schema
• Iframe survives panel reorder and field tweaks without reload

Dependencies

#5

Complexity

XL