fix(onboarding): source step 3 typography from imported site

[selul]

Summary

Makes the step 3 Typography control behave like the Palette control: the list of font pairs is driven by importData.font_pairs (returned by the demo site's /wp-json/ti-demo-data/data endpoint) instead of tiobDash.fontParings, which was populated from the admin site's local Neve settings.

This is the consumer half of a two-PR change. The exporter PR that adds font_pairs to the REST response is https://github.com/Codeinwp/demo-data-exporter/pull/new/fix/export-font-pairs.

Why

Before this change, step 3 showed the admin site's Neve font pairs while the preview iframe resolved clicked slugs against the demo site's font pairs (via Demo Data Exporter's eventHandlerData.fonts). The two lists drift in content and in the -<index> suffix generated by get_slug_from_font_pair(...) . '-' . $index, so clicks often posted a slug the iframe could not find. getFontStyle() then returned '' and document.documentElement.style.cssText = paletteStyle + fontStyle wiped the typography CSS vars — the preview fell back to browser defaults instead of the imported site's fonts.

The Default/reset button was also broken: the component stored defaultBodyFont / defaultHeadingsFont via useState in the component body, but withDispatch destructured them from ownProps where they were always undefined. Clicking "Default" wrote neve_body_font_family: undefined, neve_headings_font_family: undefined to importData, so the iframe lookup for fonts.default returned nothing and the preview fonts disappeared entirely.

Changes

• onboarding/src/Components/CustomizeControls/TypographyControl.js
  • Read the font pair list via a getFontPairs(importData) helper that prefers importData.font_pairs (the demo site's list) and falls back to tiobDash.fontParings so older demos still render.
  • Derive default fonts with a getDefaultFonts(importDataDefault) helper. Both the component body (for the button tooltip) and the withDispatch click handler use the same resolver, pulling from importDataDefault.theme_mods.neve_body_font_family / neve_headings_font_family. Removes the stale useState + ownProps pattern.
  • handleFontClick now reads the selected pair from the resolved map (not tiobDash.fontParings) and only falls back to defaults when the slug genuinely isn't present.
• onboarding/src/Components/SiteSettings.js: pass importDataDefault into <TypographyControl />, mirroring the existing <LogoControl importDataDefault={...} /> wiring.

No change to the styleChange protocol or the iframe handler — slugs now align because both sides read from Dde_Palette_Switcher.

Test plan

• npm run build:onboarding compiles cleanly (verified locally).
• On a demo subsite that serves the new font_pairs from DDE: step 3 font strip matches the demo site's Neve font pairs.
• Click any pair: preview iframe typography updates to the selected pair (no empty CSS vars).
• Click "Default" / reset icon: preview reverts to the demo site's actual defaults; importData.theme_mods.neve_body_font_family / neve_headings_font_family are populated (not undefined).
• Complete step 5 import — final site typography matches the pair selected on step 3.
• Against a demo site without font_pairs in its REST response (older DDE): control gracefully falls back to tiobDash.fontParings (pre-PR behavior).

Made with Cursor

[pirate-bot]

Plugin build for c414fb2 is ready 🛎️!

• Download build

[pirate-bot]

🎉 This PR is included in version 1.2.28 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀