From c414fb20f55084d949d4cf2b03bb9aba58664872 Mon Sep 17 00:00:00 2001
From: selul <marius.cristea@vertistudio.com>
Date: Thu, 23 Apr 2026 17:13:18 +0300
Subject: [PATCH] fix(onboarding): source step 3 typography from imported site

Mirrors the Palette control on step 3 by driving the Typography list
from `importData.font_pairs` (returned by the demo site's
`/wp-json/ti-demo-data/data` endpoint) instead of `tiobDash.fontParings`,
which reflected the admin site's local Neve settings.

This keeps the admin-side slugs in sync with the preview iframe's
resolver, so clicked font pairs actually apply in the preview.

Also fixes the broken "Default"/reset button: default fonts are now
derived from `importDataDefault.theme_mods` inside `withDispatch`
(removing the `useState` + `ownProps` pattern that resolved to
`undefined` at click time).

Falls back to `tiobDash.fontParings` when the demo site does not yet
return `font_pairs`.

Made-with: Cursor
---
 .../CustomizeControls/TypographyControl.js    | 66 ++++++++++++-------
 onboarding/src/Components/SiteSettings.js     |  3 +
 2 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/onboarding/src/Components/CustomizeControls/TypographyControl.js b/onboarding/src/Components/CustomizeControls/TypographyControl.js
index c8f3d0ac..f682f7f6 100644
--- a/onboarding/src/Components/CustomizeControls/TypographyControl.js
+++ b/onboarding/src/Components/CustomizeControls/TypographyControl.js
@@ -5,24 +5,42 @@ import classnames from 'classnames';
 import SVG from '../../utils/svg';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
 
-const TypographyControl = ( { siteStyle, handleFontClick, importData } ) => {
-	const themeMods = importData?.theme_mods;
+const FALLBACK_FONT = 'Arial, Helvetica, sans-serif';
 
-	const [ defaultBodyFont ] = useState(
-		themeMods?.neve_body_font_family || 'Arial, Helvetica, sans-serif'
-	);
+const getFontPairs = ( importData ) => {
+	if ( importData && importData.font_pairs && Object.keys( importData.font_pairs ).length ) {
+		return importData.font_pairs;
+	}
+	if ( tiobDash && tiobDash.fontParings ) {
+		return tiobDash.fontParings;
+	}
+	return null;
+};
 
-	const [ defaultHeadingsFont ] = useState(
-		themeMods?.neve_headings_font_family || 'Arial, Helvetica, sans-serif'
-	);
+const getDefaultFonts = ( importDataDefault ) => {
+	const themeMods = importDataDefault?.theme_mods;
+	return {
+		body: themeMods?.neve_body_font_family || FALLBACK_FONT,
+		heading: themeMods?.neve_headings_font_family || FALLBACK_FONT,
+	};
+};
 
-	const { font } = siteStyle;
-	if ( ! tiobDash || ! tiobDash.fontParings ) {
-		return;
+const TypographyControl = ( {
+	siteStyle,
+	handleFontClick,
+	importData,
+	importDataDefault,
+} ) => {
+	const fontPairs = getFontPairs( importData );
+	if ( ! fontPairs ) {
+		return null;
 	}
 
+	const { body: defaultBodyFont, heading: defaultHeadingsFont } =
+		getDefaultFonts( importDataDefault );
+	const { font } = siteStyle;
+
 	return (
 		<div className="ob-ctrl">
 			<div className="ob-ctrl-head small-gap">
@@ -45,9 +63,8 @@ const TypographyControl = ( { siteStyle, handleFontClick, importData } ) => {
 					{ __( 'Default', 'templates-patterns-collection' ) }
 				</Button>
 
-				{ Object.keys( tiobDash.fontParings ).map( ( slug ) => {
-					const { headingFont, bodyFont } =
-						tiobDash.fontParings[ slug ];
+				{ Object.keys( fontPairs ).map( ( slug ) => {
+					const { headingFont, bodyFont } = fontPairs[ slug ];
 					const headingStyle = {
 						fontFamily: headingFont.font,
 					};
@@ -82,15 +99,12 @@ export default compose(
 	withDispatch(
 		(
 			dispatch,
-			{
-				importData,
-				siteStyle,
-				setSiteStyle,
-				defaultBodyFont,
-				defaultHeadingsFont,
-			}
+			{ importData, importDataDefault, siteStyle, setSiteStyle }
 		) => {
 			const { setImportData, setRefresh } = dispatch( 'ti-onboarding' );
+			const fontPairs = getFontPairs( importData );
+			const { body: defaultBodyFont, heading: defaultHeadingsFont } =
+				getDefaultFonts( importDataDefault );
 
 			return {
 				handleFontClick: ( fontKey ) => {
@@ -100,14 +114,16 @@ export default compose(
 					};
 					setSiteStyle( newStyle );
 
-					const { bodyFont, headingFont } =
-						fontKey !== 'default'
-							? tiobDash.fontParings[ fontKey ]
+					const pair =
+						fontKey !== 'default' && fontPairs && fontPairs[ fontKey ]
+							? fontPairs[ fontKey ]
 							: {
 									bodyFont: { font: defaultBodyFont },
 									headingFont: { font: defaultHeadingsFont },
 							  };
 
+					const { bodyFont, headingFont } = pair;
+
 					const newImportData = {
 						...importData,
 						theme_mods: {
diff --git a/onboarding/src/Components/SiteSettings.js b/onboarding/src/Components/SiteSettings.js
index d1281ad9..bd2d5527 100644
--- a/onboarding/src/Components/SiteSettings.js
+++ b/onboarding/src/Components/SiteSettings.js
@@ -189,6 +189,9 @@ export const SiteSettings = ( {
 										<TypographyControl
 											siteStyle={ siteStyle }
 											setSiteStyle={ setSiteStyle }
+											importDataDefault={
+												importDataDefault
+											}
 										/>
 									</>
 								) }