From 66e6cdc6e5d8a3cdeb23b35bfe4f980c651ca4c8 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Mon, 10 Oct 2022 18:29:54 +0530
Subject: [PATCH 01/20] Added Basic Outline of the page

---
 .../Drawer/DrawerPanel/DesignTypography.js    | 383 +++++++++++++++++-
 .../components/Drawer/stylesheet.scss         |  62 +++
 .../pages/Steps/DesignTypography/index.js     |  98 ++++-
 .../Steps/DesignTypography/stylesheet.scss    |  54 +++
 src/OnboardingSPA/styles/app.scss             |   1 +
 5 files changed, 576 insertions(+), 22 deletions(-)
 create mode 100644 src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index a85b0ccf9..a67f7dbe3 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -1,17 +1,382 @@
 import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useState, useEffect } from '@wordpress/element';
+
+import { store as nfdOnboardingStore } from '../../../store';
+import { getGlobalStyles } from '../../../utils/api/themes';
+import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 
 const DesignTypography = () => {
+
+	const [isLoaded, setIsLoaded] = useState(false);
+	const [globalStyles, setGlobalStyles] = useState();
+	const [selectedFonts, setSelectedFonts] = useState();
+	const [isAccordionClosed, setIsAccordionClosed] = useState(true);
+
+	const { storedPreviewSettings, currentData } = useSelect(
+		(select) => {
+			return {
+				storedPreviewSettings:
+					select(nfdOnboardingStore).getPreviewSettings(),
+				currentData:
+					select(nfdOnboardingStore).getCurrentOnboardingData(),
+			};
+		},
+		[]
+	);
+
+	const { updatePreviewSettings, setCurrentOnboardingData } =
+		useDispatch(nfdOnboardingStore);
+
+	const fontPalettes = 
+	{
+		"modern-approachable": {
+			"label": "Modern & approachable",
+			"matches": "yith-wonder/theme-json",
+			"styles": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--mulish)"
+				},
+				"blocks": {
+					"core/heading": {
+						"typography": {
+							"fontFamily": "var(--wp--preset--font-family--poppins)"
+						}
+					}
+				}
+			}
+		},
+		"strong-sleek": {
+			"label": "Strong & sleek",
+			"matches": "yith-wonder/styles/01-blue-shades",
+			"styles": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--raleway)"
+				},
+				"blocks": {
+					"core/heading": {
+						"typography": {
+							"fontFamily": "var(--wp--preset--font-family--oswald)"
+						}
+					}
+				}
+			}
+		},
+		"stately-elevated": {
+			"label": "Stately & elevated",
+			"matches": "yith-wonder/styles/02-pink-shades",
+			"styles": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--source-sans-pro)"
+				},
+				"blocks": {
+					"core/heading": {
+						"typography": {
+							"fontFamily": "var(--wp--preset--font-family--playfair)"
+						}
+					}
+				}
+			}
+		},
+		"typewriter-crisp-midcentury": {
+			"label": "Typewriter & crisp midcentury",
+			"matches": "yith-wonder/styles/03-orange-shades",
+			"styles": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--jost)"
+				},
+				"blocks": {
+					"core/heading": {
+						"typography": {
+							"fontFamily": "var(--wp--preset--font-family--solway)"
+						}
+					}
+				}
+			}
+		},
+		"refined-traditional-newsletter": {
+			"label": "Refined traditional newsletter",
+			"matches": "yith-wonder/styles/04-black-shades",
+			"styles": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--jost)"
+				},
+				"blocks": {
+					"core/heading": {
+						"typography": {
+							"fontFamily": "var(--wp--preset--font-family--merriweather)"
+						}
+					}
+				}
+			}
+		},
+		"bold-stamp-slab": {
+			"label": "Bold stamp & slab",
+			"matches": "yith-wonder/styles/05-red-shades",
+			"styles": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--roboto-slab)"
+				},
+				"blocks": {
+					"core/heading": {
+						"typography": {
+							"fontFamily": "var(--wp--preset--font-family--changa-one)"
+						}
+					}
+				}
+			}
+		},
+		"fast-simple": {
+			"label": "Fast & Simple",
+			"matches": "newfold/onboarding-01",
+			"styles": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--system)"
+				},
+				"blocks": {
+					"core/heading": {
+						"typography": {
+							"fontFamily": "var(--wp--preset--font-family--system)"
+						}
+					}
+				}
+			}
+		},
+		"timeless-traditional": {
+			"label": "Timeless & Traditional",
+			"matches": "newfold/onboarding-02",
+			"styles": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--serif)"
+				},
+				"blocks": {
+					"core/heading": {
+						"typography": {
+							"fontFamily": "var(--wp--preset--font-family--serif)"
+						}
+					}
+				}
+			}
+		},
+		"sleek-sophisticated": {
+			"label": "Sleek & Sophisticated",
+			"matches": "newfold/onboarding-03",
+			"styles": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--dm-sans)"
+				},
+				"blocks": {
+					"core/heading": {
+						"typography": {
+							"fontFamily": "var(--wp--preset--font-family--dm-sans)"
+						}
+					}
+				}
+			}
+		},
+		"clear-crisp": {
+			"label": "Clear & Crisp",
+			"matches": "newfold/onboarding",
+			"wip-font": "Inter",
+			"sleek-sophisticated": {
+				"label": "Sleek & Sophisticated",
+				"matches": "newfold/onboarding-03",
+				"styles": {
+					"typography": {
+						"fontFamily": "var(--wp--preset--font-family--inter)"
+					},
+					"blocks": {
+						"core/heading": {
+							"typography": {
+								"fontFamily": "var(--wp--preset--font-family--inter)"
+							}
+						}
+					}
+				}
+			}
+		},
+		"retro-classy": {
+			"label": "Retro & Classy",
+			"matches": "newfold/onboarding",
+			"styles": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--league-spartan)"
+				},
+				"blocks": {
+					"core/heading": {
+						"typography": {
+							"fontFamily": "var(--wp--preset--font-family--league-spartan)"
+						}
+					}
+				}
+			}
+		},
+		"defined-solid": {
+			"label": "Defined & Solid",
+			"matches": "newfold/onboarding",
+			"styles": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--roboto-slab)"
+				},
+				"blocks": {
+					"core/heading": {
+						"typography": {
+							"fontFamily": "var(--wp--preset--font-family--roboto-slab)"
+						}
+					}
+				}
+			}
+		}
+	}
+
+	async function setThemeColorPalette(colorStyle, selectedColorsTemp = selectedFonts, globalStylesTemp = globalStyles) {
+		const isCustomStyle = colorStyle === 'custom';
+		let primaryColorTemp = selectedColorsTemp?.color[0].color ?? null;
+		let secondaryColorTemp = selectedColorsTemp?.color[1].color ?? null;
+		let tertiaryColorTemp = selectedColorsTemp?.color[2].color ?? null;
+		let backgroundColorTemp = selectedColorsTemp?.color[3].color ?? null;
+
+		let selectedGlobalStyle = globalStylesTemp;
+		let selectedThemeColorPalette = selectedGlobalStyle?.settings?.color?.palette?.theme;
+
+		if (colorStyle && selectedThemeColorPalette) {
+			for (let idx = 0; idx < selectedThemeColorPalette.length; idx++) {
+				switch (selectedThemeColorPalette[idx]?.slug) {
+					case 'primary':
+						if (isCustomStyle && primaryColorTemp)
+							selectedThemeColorPalette[idx].color = primaryColorTemp;
+						else
+							selectedThemeColorPalette[idx].color = colorPalettes[colorStyle][2];
+						break;
+					case 'secondary':
+						if (isCustomStyle && secondaryColorTemp)
+							selectedThemeColorPalette[idx].color = secondaryColorTemp;
+						else
+							selectedThemeColorPalette[idx].color = colorPalettes[colorStyle][1];
+						break;
+					case 'tertiary':
+						if (isCustomStyle && tertiaryColorTemp)
+							selectedThemeColorPalette[idx].color = tertiaryColorTemp;
+						else
+							selectedThemeColorPalette[idx].color = colorPalettes[colorStyle][0];
+						break;
+					case 'background':
+						if (isCustomStyle && backgroundColorTemp)
+							selectedThemeColorPalette[idx].color = backgroundColorTemp;
+						else
+							selectedThemeColorPalette[idx].color = '#ffffff';
+						break;
+				}
+			}
+
+			selectedGlobalStyle.settings.color.palette.theme = selectedThemeColorPalette;
+			setGlobalStyles(selectedGlobalStyle);
+			updatePreviewSettings(
+				useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
+			);
+
+			return selectedGlobalStyle;
+		}
+	}
+
+	const getColorStylesAndPatterns = async () => {
+		const globalStyles = await getGlobalStyles();
+		let selectedGlobalStyle;
+		if (currentData?.data?.theme?.variation) {
+			selectedGlobalStyle = globalStyles.body.filter(
+				(globalStyle) =>
+					globalStyle.title === currentData.data.theme.variation
+			)[0];
+		} else {
+			selectedGlobalStyle = globalStyles.body[0];
+		}
+		setGlobalStyles(selectedGlobalStyle);
+
+		let selectedColors;
+		if (!currentData?.data?.palette[0]?.hasOwnProperty('supports')) {
+			currentData.data.palette[0] = {
+				"slug": "",
+				"name": "",
+				"color": [
+					{ "slug": "primary", "name": "Primary", "color": "" },
+					{ "slug": "secondary", "name": "Secondary", "color": "" },
+					{ "slug": "tertiary", "name": "Tertiary", "color": "" },
+					{ "slug": "background", "name": "Background", "color": "" },
+				],
+				"supports": ["yith-wonder"]
+			};
+			selectedColors = currentData.data.palette[0];
+			setCurrentOnboardingData(currentData);
+		}
+		else {
+			selectedColors = currentData.data.palette[0];
+		}
+		setSelectedFonts(selectedColors);
+		setThemeColorPalette(currentData?.data?.palette[0]['slug'], selectedColors, selectedGlobalStyle);
+		setIsLoaded(true);
+
+	};
+
+	useEffect(() => {
+		if (!isLoaded) getColorStylesAndPatterns();
+	}, [isLoaded]);
+
+	const handleClick = (colorStyle) => {
+		const selectedColorsTemp = {
+			"slug": colorStyle,
+			"name": colorStyle?.charAt(0).toUpperCase() + colorStyle?.slice(1),
+			"color": [
+				{ "slug": "primary", "name": "Primary", "color": colorPalettes[colorStyle][2] },
+				{ "slug": "secondary", "name": "Secondary", "color": colorPalettes[colorStyle][1] },
+				{ "slug": "tertiary", "name": "Tertiary", "color": colorPalettes[colorStyle][0] },
+				{ "slug": "background", "name": "Background", "color": "" },
+			],
+			"supports": ["yith-wonder"]
+		};
+
+		setSelectedFonts(selectedColorsTemp);
+		currentData.data.palette[0] = selectedColorsTemp;
+		setCurrentOnboardingData(currentData);
+	};
+
+	function buildPalettes() {
+		let paletteRenderedList = [];
+		for (const fontStyle in fontPalettes) {
+			paletteRenderedList.push(
+				<div className={`font-palette ${fontStyle == selectedFonts?.label ? 'font-palette-selected' : ''} `}
+					onClick={(e) => handleClick(fontStyle)}>
+					<div className='font-palette__icon'> Aa </div>
+					<div className='font-palette__name'>
+						{fontPalettes[fontStyle]?.label}
+					</div>
+				</div>
+			);
+		}
+
+		return paletteRenderedList;
+	}
+
+	function buildCustomPalette() {
+
+
+		return (
+			<div className='custom-palette'>
+				<div className='custom-palette__top'
+					onClick={(e) => setIsAccordionClosed(!isAccordionClosed)}>
+					<div className='custom-palette__top-text'>SELECT CUSTOM FONTS</div>
+					{isAccordionClosed && <div className='custom-palette__top-icon'>+</div>}
+					{!isAccordionClosed && <div className='custom-palette__top-icon'>-</div>}
+				</div>
+			</div>
+		);
+	}
+
 	return (
-		<div style={{ padding: '0 16px' }}>
-			<h2>{__('Pick Fonts & Text Sizes', 'wp-module-onboarding')}</h2>
-			<p>
-				{__(
-					'If user has opted for custom design, panel will show type treatments to affect preview pane.',
-					'wp-module-onboarding'
-				)}
-			</p>
+		<div style={{ padding: '0 4px' }}>
+			<h2>{__('Color Palettes', 'wp-module-onboarding')}</h2>
+			{buildPalettes()}
+			{buildCustomPalette()}
 		</div>
 	);
 };
-
 export default DesignTypography;
diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss
index 97e7fd3af..f5193747d 100644
--- a/src/OnboardingSPA/components/Drawer/stylesheet.scss
+++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss
@@ -323,3 +323,65 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
         }
     }
 }
+
+// Design Color Palette Step
+
+.font-palette {
+
+    width: 88%;
+    height: 30px;
+    display: flex;
+    margin: 8px 4px;
+    cursor: pointer;
+    position: relative;
+    padding: 10px 16px;
+    align-items: center;
+    background-color: white;
+
+    &-selected {
+        background-color: $main-border-main;
+    }
+
+    &__icon {
+        color: black;
+        font-weight: 700;
+        margin-right: 16px;
+    }
+
+    &__name {
+        color: black;
+        font-size: 12px;
+        font-weight: 700;
+        line-height: 16px;
+    }
+}
+
+.custom-palette {
+    width: 88%;
+    margin: 30px 2px;
+    padding: 20px 16px;
+    background: $main-border-main;
+
+    &__top {
+        display: flex;
+        cursor: pointer;
+        align-items: center;
+        justify-content: space-between;
+
+        &-text {
+            font-size: 14px;
+        }
+        &-icon {
+            font-size: 14px;
+        }
+    }
+
+    &_acc_opened {
+        display: block;
+    }
+
+    &_acc_closed {
+        display: none;
+    }
+   
+}
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
index 251226ce5..d96fdda49 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
@@ -1,25 +1,97 @@
+import { __ } from '@wordpress/i18n';
+import { useLocation } from 'react-router-dom';
+import { useViewportMatch } from '@wordpress/compose';
+import { useState, useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+import { getPatterns } from '../../../utils/api/patterns';
+import { getGlobalStyles } from '../../../utils/api/themes';
+import { store as nfdOnboardingStore } from '../../../store';
+import { LivePreview } from '../../../components/LivePreview';
 import CommonLayout from '../../../components/Layouts/Common';
-import StepOverview from '../../../components/StepOverview';
 import { VIEW_DESIGN_TYPOGRAPHY } from '../../../../constants';
-import { store as nfdOnboardingStore } from '../../../store';
-import { useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
 
 const StepDesignTypography = () => {
-	const { setDrawerActiveView, setIsDrawerOpened, setIsSidebarOpened } =
-		useDispatch( nfdOnboardingStore );
+	const location = useLocation();
+	const [isLoaded, setIsLoaded] = useState(false);
+	const [pattern, setPattern] = useState();
+
+	const isLargeViewport = useViewportMatch('medium');
+	const {
+		currentStep,
+		currentData,
+		storedPreviewSettings,
+	} = useSelect((select) => {
+		return {
+			currentStep: select(nfdOnboardingStore).getStepFromPath(
+				location.pathname
+			),
+			currentData:
+				select(nfdOnboardingStore).getCurrentOnboardingData(),
+			storedPreviewSettings:
+				select(nfdOnboardingStore).getPreviewSettings(),
+		};
+	}, []);
+
+	const {
+		setDrawerActiveView,
+		setIsDrawerOpened,
+		setIsSidebarOpened,
+		setIsDrawerSuppressed,
+		updatePreviewSettings,
+	} = useDispatch(nfdOnboardingStore);
 
-	useEffect( () => {
-		setIsSidebarOpened( false );
-		setIsDrawerOpened( true );
-		setDrawerActiveView( VIEW_DESIGN_TYPOGRAPHY );
-	}, [] );
+	useEffect(() => {
+		if (isLargeViewport) {
+			setIsDrawerOpened(true);
+		}
+		setIsSidebarOpened(false);
+		setIsDrawerSuppressed(false);
+		setDrawerActiveView(VIEW_DESIGN_TYPOGRAPHY);
+	}, []);
+
+	const getStylesAndPatterns = async () => {
+		const pattern = await getPatterns(currentStep.patternId, true);
+		const globalStyles = await getGlobalStyles();
+		let selectedGlobalStyle;
+		if (currentData.data.theme.variation) {
+			selectedGlobalStyle = globalStyles.body.filter(
+				(globalStyle) =>
+					globalStyle.title === currentData.data.theme.variation
+			)[0];
+		} else {
+			selectedGlobalStyle = globalStyles.body[0];
+		}
+		setPattern(pattern?.body);
+		setIsLoaded(true);
+	};
+
+
+	useEffect(() => {
+		if (!isLoaded) getStylesAndPatterns();
+	}, [isLoaded]);
 
 	return (
-		<CommonLayout isCentered>
-			<StepOverview />
+		<CommonLayout className="theme-colors-preview">
+			<div className="theme-colors-preview__title-bar">
+				<div className="theme-colors-preview__title-bar__browser">
+					<span className="theme-colors-preview__title-bar__browser__dot"></span>
+					<span className="theme-colors-preview__title-bar__browser__dot"></span>
+					<span className="theme-colors-preview__title-bar__browser__dot"></span>
+				</div>
+			</div>
+			<div className="theme-colors-preview__live-preview-container">
+				{pattern && (
+					<LivePreview
+						blockGrammer={pattern}
+						styling={'custom'}
+						viewportWidth={1300}
+					/>
+				)}
+			</div>
 		</CommonLayout>
 	);
 };
 
+
 export default StepDesignTypography;
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
new file mode 100644
index 000000000..88698628a
--- /dev/null
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
@@ -0,0 +1,54 @@
+.theme-colors-preview {
+    flex: 1;
+    width: 100%;
+    margin: 16px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+
+    &__title-bar {
+        width: 70%;
+        height: 15px;
+        display: flex;
+        align-items: center;
+        background-color: #ccc;
+        justify-content: space-between;
+        border: 1px solid transparent;
+
+        &__browser {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &__dot {
+                background-color: #989ea7;
+                width: 8px;
+                margin: 3px;
+                height: 8px;
+                border-radius: 50%;
+                display: inline-block;
+            }
+        }
+    }
+
+    &__live-preview-container {
+        width: 70%;
+        min-height: 90vh;
+        overflow: hidden;
+        position: relative;
+        align-items: center;
+        border: 1px solid #e3dfdf;
+        margin-bottom: 30px;
+
+        .live-preview {
+
+            &__container {
+
+                &-custom {
+                    width: 100%;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index b6400a856..f6a1110fc 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -44,6 +44,7 @@
 @import "../pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss";
 @import "../pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss";
 @import "../pages/Steps/DesignThemeStyles/stylesheet.scss";
+@import "../pages/Steps/DesignTypography/stylesheet";
 
 .nfd-onboarding-container {
 	display: flex;

From aaa253d45513067b7cc6136b10b677420ff02eb8 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Wed, 12 Oct 2022 16:10:17 +0530
Subject: [PATCH 02/20] Cleaned File

---
 .../Drawer/DrawerPanel/DesignTypography.js    | 98 +------------------
 1 file changed, 5 insertions(+), 93 deletions(-)

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index a67f7dbe3..a49f7adc1 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -10,7 +10,6 @@ const DesignTypography = () => {
 
 	const [isLoaded, setIsLoaded] = useState(false);
 	const [globalStyles, setGlobalStyles] = useState();
-	const [selectedFonts, setSelectedFonts] = useState();
 	const [isAccordionClosed, setIsAccordionClosed] = useState(true);
 
 	const { storedPreviewSettings, currentData } = useSelect(
@@ -229,56 +228,6 @@ const DesignTypography = () => {
 		}
 	}
 
-	async function setThemeColorPalette(colorStyle, selectedColorsTemp = selectedFonts, globalStylesTemp = globalStyles) {
-		const isCustomStyle = colorStyle === 'custom';
-		let primaryColorTemp = selectedColorsTemp?.color[0].color ?? null;
-		let secondaryColorTemp = selectedColorsTemp?.color[1].color ?? null;
-		let tertiaryColorTemp = selectedColorsTemp?.color[2].color ?? null;
-		let backgroundColorTemp = selectedColorsTemp?.color[3].color ?? null;
-
-		let selectedGlobalStyle = globalStylesTemp;
-		let selectedThemeColorPalette = selectedGlobalStyle?.settings?.color?.palette?.theme;
-
-		if (colorStyle && selectedThemeColorPalette) {
-			for (let idx = 0; idx < selectedThemeColorPalette.length; idx++) {
-				switch (selectedThemeColorPalette[idx]?.slug) {
-					case 'primary':
-						if (isCustomStyle && primaryColorTemp)
-							selectedThemeColorPalette[idx].color = primaryColorTemp;
-						else
-							selectedThemeColorPalette[idx].color = colorPalettes[colorStyle][2];
-						break;
-					case 'secondary':
-						if (isCustomStyle && secondaryColorTemp)
-							selectedThemeColorPalette[idx].color = secondaryColorTemp;
-						else
-							selectedThemeColorPalette[idx].color = colorPalettes[colorStyle][1];
-						break;
-					case 'tertiary':
-						if (isCustomStyle && tertiaryColorTemp)
-							selectedThemeColorPalette[idx].color = tertiaryColorTemp;
-						else
-							selectedThemeColorPalette[idx].color = colorPalettes[colorStyle][0];
-						break;
-					case 'background':
-						if (isCustomStyle && backgroundColorTemp)
-							selectedThemeColorPalette[idx].color = backgroundColorTemp;
-						else
-							selectedThemeColorPalette[idx].color = '#ffffff';
-						break;
-				}
-			}
-
-			selectedGlobalStyle.settings.color.palette.theme = selectedThemeColorPalette;
-			setGlobalStyles(selectedGlobalStyle);
-			updatePreviewSettings(
-				useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
-			);
-
-			return selectedGlobalStyle;
-		}
-	}
-
 	const getColorStylesAndPatterns = async () => {
 		const globalStyles = await getGlobalStyles();
 		let selectedGlobalStyle;
@@ -291,59 +240,24 @@ const DesignTypography = () => {
 			selectedGlobalStyle = globalStyles.body[0];
 		}
 		setGlobalStyles(selectedGlobalStyle);
-
-		let selectedColors;
-		if (!currentData?.data?.palette[0]?.hasOwnProperty('supports')) {
-			currentData.data.palette[0] = {
-				"slug": "",
-				"name": "",
-				"color": [
-					{ "slug": "primary", "name": "Primary", "color": "" },
-					{ "slug": "secondary", "name": "Secondary", "color": "" },
-					{ "slug": "tertiary", "name": "Tertiary", "color": "" },
-					{ "slug": "background", "name": "Background", "color": "" },
-				],
-				"supports": ["yith-wonder"]
-			};
-			selectedColors = currentData.data.palette[0];
-			setCurrentOnboardingData(currentData);
-		}
-		else {
-			selectedColors = currentData.data.palette[0];
-		}
-		setSelectedFonts(selectedColors);
-		setThemeColorPalette(currentData?.data?.palette[0]['slug'], selectedColors, selectedGlobalStyle);
+		updatePreviewSettings(
+			useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
+		);
 		setIsLoaded(true);
-
 	};
 
 	useEffect(() => {
 		if (!isLoaded) getColorStylesAndPatterns();
 	}, [isLoaded]);
 
-	const handleClick = (colorStyle) => {
-		const selectedColorsTemp = {
-			"slug": colorStyle,
-			"name": colorStyle?.charAt(0).toUpperCase() + colorStyle?.slice(1),
-			"color": [
-				{ "slug": "primary", "name": "Primary", "color": colorPalettes[colorStyle][2] },
-				{ "slug": "secondary", "name": "Secondary", "color": colorPalettes[colorStyle][1] },
-				{ "slug": "tertiary", "name": "Tertiary", "color": colorPalettes[colorStyle][0] },
-				{ "slug": "background", "name": "Background", "color": "" },
-			],
-			"supports": ["yith-wonder"]
-		};
-
-		setSelectedFonts(selectedColorsTemp);
-		currentData.data.palette[0] = selectedColorsTemp;
-		setCurrentOnboardingData(currentData);
+	const handleClick = (fontStyle) => {
 	};
 
 	function buildPalettes() {
 		let paletteRenderedList = [];
 		for (const fontStyle in fontPalettes) {
 			paletteRenderedList.push(
-				<div className={`font-palette ${fontStyle == selectedFonts?.label ? 'font-palette-selected' : ''} `}
+				<div className={`font-palette ${ false ? 'font-palette-selected' : ''} `}
 					onClick={(e) => handleClick(fontStyle)}>
 					<div className='font-palette__icon'> Aa </div>
 					<div className='font-palette__name'>
@@ -357,8 +271,6 @@ const DesignTypography = () => {
 	}
 
 	function buildCustomPalette() {
-
-
 		return (
 			<div className='custom-palette'>
 				<div className='custom-palette__top'

From 68c845e9fde03ca6d47f914649fd5607a0ccc688 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 13 Oct 2022 16:43:00 +0530
Subject: [PATCH 03/20] Added Some Features

---
 .../Drawer/DrawerPanel/DesignTypography.js    | 49 +++++++++++--------
 .../components/Drawer/stylesheet.scss         |  4 ++
 .../pages/Steps/DesignTypography/index.js     | 25 ++--------
 3 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index a49f7adc1..bfe4664f1 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -9,6 +9,7 @@ import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-s
 const DesignTypography = () => {
 
 	const [isLoaded, setIsLoaded] = useState(false);
+	const [selectedFont, setSelectedFont] = useState();
 	const [globalStyles, setGlobalStyles] = useState();
 	const [isAccordionClosed, setIsAccordionClosed] = useState(true);
 
@@ -175,28 +176,23 @@ const DesignTypography = () => {
 		},
 		"clear-crisp": {
 			"label": "Clear & Crisp",
-			"matches": "newfold/onboarding",
-			"wip-font": "Inter",
-			"sleek-sophisticated": {
-				"label": "Sleek & Sophisticated",
-				"matches": "newfold/onboarding-03",
-				"styles": {
-					"typography": {
-						"fontFamily": "var(--wp--preset--font-family--inter)"
-					},
-					"blocks": {
-						"core/heading": {
-							"typography": {
-								"fontFamily": "var(--wp--preset--font-family--inter)"
-							}
+			"matches": "newfold/onboarding-04",
+			"styles": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--inter)"
+				},
+				"blocks": {
+					"core/heading": {
+						"typography": {
+							"fontFamily": "var(--wp--preset--font-family--inter)"
 						}
 					}
-				}
+			}
 			}
 		},
 		"retro-classy": {
 			"label": "Retro & Classy",
-			"matches": "newfold/onboarding",
+			"matches": "newfold/onboarding-05",
 			"styles": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--league-spartan)"
@@ -212,7 +208,7 @@ const DesignTypography = () => {
 		},
 		"defined-solid": {
 			"label": "Defined & Solid",
-			"matches": "newfold/onboarding",
+			"matches": "newfold/onboarding-06",
 			"styles": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--roboto-slab)"
@@ -228,7 +224,7 @@ const DesignTypography = () => {
 		}
 	}
 
-	const getColorStylesAndPatterns = async () => {
+	const getFontStylesAndPatterns = async () => {
 		const globalStyles = await getGlobalStyles();
 		let selectedGlobalStyle;
 		if (currentData?.data?.theme?.variation) {
@@ -247,17 +243,28 @@ const DesignTypography = () => {
 	};
 
 	useEffect(() => {
-		if (!isLoaded) getColorStylesAndPatterns();
+		if (!isLoaded) getFontStylesAndPatterns();
 	}, [isLoaded]);
+	
+	const handleClick = async (fontStyle) => {
 
-	const handleClick = (fontStyle) => {
+		setSelectedFont(fontStyle);
+
+		let globalStylesCopy = globalStyles;
+		globalStylesCopy.styles = {
+			...fontPalettes[fontStyle].styles
+		}
+		
+		setGlobalStyles(globalStylesCopy);
+		const prevUpdate = await useGlobalStylesOutput(globalStylesCopy, storedPreviewSettings);
+		updatePreviewSettings(prevUpdate);
 	};
 
 	function buildPalettes() {
 		let paletteRenderedList = [];
 		for (const fontStyle in fontPalettes) {
 			paletteRenderedList.push(
-				<div className={`font-palette ${ false ? 'font-palette-selected' : ''} `}
+				<div className={`font-palette ${selectedFont == fontStyle ? 'font-palette-selected' : ''} `}
 					onClick={(e) => handleClick(fontStyle)}>
 					<div className='font-palette__icon'> Aa </div>
 					<div className='font-palette__name'>
diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss
index f5193747d..f2d9de308 100644
--- a/src/OnboardingSPA/components/Drawer/stylesheet.scss
+++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss
@@ -338,6 +338,10 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
     align-items: center;
     background-color: white;
 
+    &:hover {
+        background-color: var(--nfd-onboarding-drawer-icon-fill);
+    }
+
     &-selected {
         background-color: $main-border-main;
     }
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
index d96fdda49..6b790a01b 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
@@ -4,8 +4,6 @@ import { useViewportMatch } from '@wordpress/compose';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import { getPatterns } from '../../../utils/api/patterns';
-import { getGlobalStyles } from '../../../utils/api/themes';
 import { store as nfdOnboardingStore } from '../../../store';
 import { LivePreview } from '../../../components/LivePreview';
 import CommonLayout from '../../../components/Layouts/Common';
@@ -19,17 +17,11 @@ const StepDesignTypography = () => {
 	const isLargeViewport = useViewportMatch('medium');
 	const {
 		currentStep,
-		currentData,
-		storedPreviewSettings,
 	} = useSelect((select) => {
 		return {
 			currentStep: select(nfdOnboardingStore).getStepFromPath(
 				location.pathname
-			),
-			currentData:
-				select(nfdOnboardingStore).getCurrentOnboardingData(),
-			storedPreviewSettings:
-				select(nfdOnboardingStore).getPreviewSettings(),
+			)
 		};
 	}, []);
 
@@ -50,25 +42,15 @@ const StepDesignTypography = () => {
 		setDrawerActiveView(VIEW_DESIGN_TYPOGRAPHY);
 	}, []);
 
-	const getStylesAndPatterns = async () => {
+	const getPatterns = async () => {
 		const pattern = await getPatterns(currentStep.patternId, true);
-		const globalStyles = await getGlobalStyles();
-		let selectedGlobalStyle;
-		if (currentData.data.theme.variation) {
-			selectedGlobalStyle = globalStyles.body.filter(
-				(globalStyle) =>
-					globalStyle.title === currentData.data.theme.variation
-			)[0];
-		} else {
-			selectedGlobalStyle = globalStyles.body[0];
-		}
 		setPattern(pattern?.body);
 		setIsLoaded(true);
 	};
 
 
 	useEffect(() => {
-		if (!isLoaded) getStylesAndPatterns();
+		if (!isLoaded) getPatterns();
 	}, [isLoaded]);
 
 	return (
@@ -86,6 +68,7 @@ const StepDesignTypography = () => {
 						blockGrammer={pattern}
 						styling={'custom'}
 						viewportWidth={1300}
+						skeletonLoadingTime={false}
 					/>
 				)}
 			</div>

From 7e19c412b5c347544dc647d4384489cff035a9cc Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 13 Oct 2022 16:47:01 +0530
Subject: [PATCH 04/20] Fixed same named two functions

---
 src/OnboardingSPA/pages/Steps/DesignTypography/index.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
index 6b790a01b..b02d23b64 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
@@ -4,6 +4,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
+import { getPatterns } from '../../../utils/api/patterns';
 import { store as nfdOnboardingStore } from '../../../store';
 import { LivePreview } from '../../../components/LivePreview';
 import CommonLayout from '../../../components/Layouts/Common';
@@ -30,7 +31,6 @@ const StepDesignTypography = () => {
 		setIsDrawerOpened,
 		setIsSidebarOpened,
 		setIsDrawerSuppressed,
-		updatePreviewSettings,
 	} = useDispatch(nfdOnboardingStore);
 
 	useEffect(() => {
@@ -42,15 +42,16 @@ const StepDesignTypography = () => {
 		setDrawerActiveView(VIEW_DESIGN_TYPOGRAPHY);
 	}, []);
 
-	const getPatterns = async () => {
-		const pattern = await getPatterns(currentStep.patternId, true);
+	const getFontPatterns = () => {
+		console.log('Rann Once');
+		const pattern = getPatterns(currentStep.patternId, true);
 		setPattern(pattern?.body);
 		setIsLoaded(true);
 	};
 
 
 	useEffect(() => {
-		if (!isLoaded) getPatterns();
+		if (!isLoaded) getFontPatterns();
 	}, [isLoaded]);
 
 	return (

From a61d3f75abf7d5b10a0b5d50be0ac8ec5ea11e39 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 13 Oct 2022 16:55:02 +0530
Subject: [PATCH 05/20] Update index.js

---
 .../pages/Steps/DesignTypography/index.js     | 41 ++++++++++++++++---
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
index b02d23b64..2c65440a5 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
@@ -5,32 +5,43 @@ import { useState, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 import { getPatterns } from '../../../utils/api/patterns';
+import { getGlobalStyles } from '../../../utils/api/themes';
 import { store as nfdOnboardingStore } from '../../../store';
 import { LivePreview } from '../../../components/LivePreview';
 import CommonLayout from '../../../components/Layouts/Common';
 import { VIEW_DESIGN_TYPOGRAPHY } from '../../../../constants';
+import { DesignStateHandler } from '../../../components/StateHandlers';
+import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 
 const StepDesignTypography = () => {
 	const location = useLocation();
-	const [isLoaded, setIsLoaded] = useState(false);
 	const [pattern, setPattern] = useState();
+	const [isLoaded, setIsLoaded] = useState(false);
 
 	const isLargeViewport = useViewportMatch('medium');
 	const {
 		currentStep,
+		currentData,
+		storedPreviewSettings,
 	} = useSelect((select) => {
 		return {
 			currentStep: select(nfdOnboardingStore).getStepFromPath(
 				location.pathname
-			)
+			),
+			currentData:
+				select(nfdOnboardingStore).getCurrentOnboardingData(),
+			storedPreviewSettings:
+				select(nfdOnboardingStore).getPreviewSettings(),
 		};
 	}, []);
 
 	const {
+		updateThemeStatus,
 		setDrawerActiveView,
 		setIsDrawerOpened,
 		setIsSidebarOpened,
 		setIsDrawerSuppressed,
+		updatePreviewSettings,
 	} = useDispatch(nfdOnboardingStore);
 
 	useEffect(() => {
@@ -42,10 +53,28 @@ const StepDesignTypography = () => {
 		setDrawerActiveView(VIEW_DESIGN_TYPOGRAPHY);
 	}, []);
 
-	const getFontPatterns = () => {
-		console.log('Rann Once');
-		const pattern = getPatterns(currentStep.patternId, true);
-		setPattern(pattern?.body);
+	const getFontPatterns = async () =>  {
+		const patternsResponse = await getPatterns(currentStep.patternId, true);
+		if (patternsResponse?.error) {
+			return updateThemeStatus(THEME_STATUS_NOT_ACTIVE);
+		}
+		const globalStylesResponse = await getGlobalStyles();
+		if (globalStylesResponse?.error) {
+			return updateThemeStatus(THEME_STATUS_NOT_ACTIVE);
+		}
+		let selectedGlobalStyle;
+		if (currentData.data.theme.variation) {
+			selectedGlobalStyle = globalStylesResponse.body.filter(
+				(globalStyle) =>
+					globalStyle.title === currentData.data.theme.variation
+			)[0];
+		} else {
+			selectedGlobalStyle = globalStylesResponse.body[0];
+		}
+		updatePreviewSettings(
+			useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
+		);
+		setPattern(patternsResponse?.body);
 		setIsLoaded(true);
 	};
 

From d09da99fad88cc47016af58a149fb4ab3669f859 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 14 Oct 2022 10:54:35 +0530
Subject: [PATCH 06/20] Progress

---
 .../Drawer/DrawerPanel/DesignTypography.js    |  17 +-
 .../Drawer/DrawerPanel/font-family.js         | 773 ++++++++++++++++++
 .../pages/Steps/DesignTypography/index.js     |  17 +-
 .../Steps/DesignTypography/stylesheet.scss    |   3 +-
 4 files changed, 791 insertions(+), 19 deletions(-)
 create mode 100644 src/OnboardingSPA/components/Drawer/DrawerPanel/font-family.js

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index bfe4664f1..f38a38a59 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -5,6 +5,7 @@ import { useState, useEffect } from '@wordpress/element';
 import { store as nfdOnboardingStore } from '../../../store';
 import { getGlobalStyles } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
+import { FontFamilyEdit } from './font-family';
 
 const DesignTypography = () => {
 
@@ -250,14 +251,13 @@ const DesignTypography = () => {
 
 		setSelectedFont(fontStyle);
 
-		let globalStylesCopy = globalStyles;
-		globalStylesCopy.styles = {
-			...fontPalettes[fontStyle].styles
-		}
+		// let globalStylesCopy = globalStyles;
+		// globalStylesCopy.styles.typography.fontFamily = fontPalettes[fontStyle].styles.typography.fontFamily;
 		
-		setGlobalStyles(globalStylesCopy);
-		const prevUpdate = await useGlobalStylesOutput(globalStylesCopy, storedPreviewSettings);
-		updatePreviewSettings(prevUpdate);
+		// setGlobalStyles(globalStylesCopy);
+		// updatePreviewSettings(
+		// 	useGlobalStylesOutput(globalStylesCopy, storedPreviewSettings)
+		// );
 	};
 
 	function buildPalettes() {
@@ -293,6 +293,9 @@ const DesignTypography = () => {
 	return (
 		<div style={{ padding: '0 4px' }}>
 			<h2>{__('Color Palettes', 'wp-module-onboarding')}</h2>
+			{/* <FontFamilyEdit
+				fontFamily={'monospace'}>
+			</FontFamilyEdit> */}
 			{buildPalettes()}
 			{buildCustomPalette()}
 		</div>
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/font-family.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/font-family.js
new file mode 100644
index 000000000..e6892a1b7
--- /dev/null
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/font-family.js
@@ -0,0 +1,773 @@
+/**
+ * External dependencies
+ */
+import { find } from 'lodash';
+import {
+    __experimentalFontFamilyControl as FontFamilyControl,
+} from '@wordpress/block-editor';
+
+const fontFamilies = [
+    {
+        "name": "System",
+        "slug": "system",
+        "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif"
+    },
+    {
+        "name": "Serif",
+        "slug": "serif",
+        "fontFamily": "\"Times New Roman\",\"New York\",Times,\"Noto Serif\",serif"
+    },
+    {
+        "name": "Monospace",
+        "slug": "monospace",
+        "fontFamily": "Consolas,Menlo,Monaco,\"SF Mono\",\"DejaVu Sans Mono\",\"Roboto Mono\",\"Courier New\",Courier,monospace"
+    },
+    {
+        "fontFamily": "Mulish",
+        "name": "Mulish, sans-serif",
+        "slug": "mulish",
+        "fontFace": [
+            {
+                "fontFamily": "Mulish",
+                "fontWeight": "200 900",
+                "fontStyle": "normal",
+                "fontStretch": "normal",
+                "src": [
+                    "file:./assets/fonts/Mulish-VariableFont_wght.ttf"
+                ]
+            },
+            {
+                "fontFamily": "Mulish",
+                "fontWeight": "200 900",
+                "fontStyle": "italic",
+                "fontStretch": "normal",
+                "src": [
+                    "file:./assets/fonts/Mulish-Italic-VariableFont_wght.ttf"
+                ]
+            }
+        ]
+    },
+    {
+        "fontFamily": "Raleway",
+        "name": "Raleway, sans-serif",
+        "slug": "raleway",
+        "fontFace": [
+            {
+                "fontFamily": "Raleway",
+                "fontWeight": "100 900",
+                "fontStretch": "normal",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/Raleway-VariableFont_wght.ttf"
+                ]
+            },
+            {
+                "fontFamily": "Raleway",
+                "fontWeight": "100 900",
+                "fontStretch": "normal",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/Raleway-Italic-VariableFont_wght.ttf"
+                ]
+            }
+        ]
+    },
+    {
+        "fontFamily": "Roboto Slab",
+        "name": "Roboto Slab, serif",
+        "slug": "roboto-slab",
+        "fontFace": [
+            {
+                "fontFamily": "Roboto Slab",
+                "fontWeight": "100 900",
+                "fontStretch": "normal",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/RobotoSlab-VariableFont_wght.ttf"
+                ]
+            }
+        ]
+    },
+    {
+        "fontFamily": "Jost",
+        "name": "Jost, sans-serif",
+        "slug": "jost",
+        "fontFace": [
+            {
+                "fontFamily": "Jost",
+                "fontWeight": "100 900",
+                "fontStretch": "normal",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/Jost-VariableFont_wght.ttf"
+                ]
+            },
+            {
+                "fontFamily": "Jost",
+                "fontWeight": "100 900",
+                "fontStretch": "normal",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/Jost-Italic-VariableFont_wght.ttf"
+                ]
+            }
+        ]
+    },
+    {
+        "fontFamily": "Montserrat",
+        "name": "Montserrat, sans-serif",
+        "slug": "montserrat",
+        "fontFace": [
+            {
+                "fontFamily": "Montserrat",
+                "fontWeight": "100 900",
+                "fontStretch": "normal",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/Montserrat-VariableFont_wght.ttf"
+                ]
+            },
+            {
+                "fontFamily": "Montserrat",
+                "fontWeight": "100 900",
+                "fontStretch": "normal",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/Montserrat-Italic-VariableFont_wght.ttf"
+                ]
+            }
+        ]
+    },
+    {
+        "fontFamily": "Nunito",
+        "name": "Nunito, sans-serif",
+        "slug": "nunito",
+        "fontFace": [
+            {
+                "fontFamily": "Nunito",
+                "fontWeight": "200 900",
+                "fontStretch": "normal",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/Nunito-VariableFont_wght.ttf"
+                ]
+            },
+            {
+                "fontFamily": "Nunito",
+                "fontWeight": "200 900",
+                "fontStretch": "normal",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/Nunito-Italic-VariableFont_wght.ttf"
+                ]
+            }
+        ]
+    },
+    {
+        "fontFamily": "Solway",
+        "name": "Solway, serif",
+        "slug": "solway",
+        "fontFace": [
+            {
+                "fontFamily": "Solway",
+                "fontWeight": "300",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/solway-v15-latin-300.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Solway",
+                "fontWeight": "400",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/solway-v15-latin-regular.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Solway",
+                "fontWeight": "500",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/solway-v15-latin-500.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Solway",
+                "fontWeight": "700",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/solway-v15-latin-700.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Solway",
+                "fontWeight": "800",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/solway-v15-latin-800.woff2"
+                ]
+            }
+        ]
+    },
+    {
+        "fontFamily": "Changa One",
+        "name": "Changa One, display",
+        "slug": "changa-one",
+        "fontFace": [
+            {
+                "fontFamily": "Changa One",
+                "fontWeight": "400",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/changa-one-v18-latin-regular.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Changa One",
+                "fontWeight": "400",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/changa-one-v18-latin-italic.woff2"
+                ]
+            }
+        ]
+    },
+    {
+        "fontFamily": "Source Sans Pro",
+        "name": "Source Sans Pro, sans-serif",
+        "slug": "source-sans-pro",
+        "fontFace": [
+            {
+                "fontFamily": "Source Sans Pro",
+                "fontWeight": "200",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/source-sans-pro-v21-latin-200.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Source Sans Pro",
+                "fontWeight": "200",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/source-sans-pro-v21-latin-200italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Source Sans Pro",
+                "fontWeight": "300",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/source-sans-pro-v21-latin-300.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Source Sans Pro",
+                "fontWeight": "300",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/source-sans-pro-v21-latin-300italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Source Sans Pro",
+                "fontWeight": "400",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/source-sans-pro-v21-latin-regular.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Source Sans Pro",
+                "fontWeight": "400",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/source-sans-pro-v21-latin-italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Source Sans Pro",
+                "fontWeight": "600",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/source-sans-pro-v21-latin-600.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Source Sans Pro",
+                "fontWeight": "600",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/source-sans-pro-v21-latin-600italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Source Sans Pro",
+                "fontWeight": "700",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/source-sans-pro-v21-latin-700.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Source Sans Pro",
+                "fontWeight": "700",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/source-sans-pro-v21-latin-700italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Source Sans Pro",
+                "fontWeight": "900",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/source-sans-pro-v21-latin-900.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Source Sans Pro",
+                "fontWeight": "900",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/source-sans-pro-v21-latin-900italic.woff2"
+                ]
+            }
+        ]
+    },
+    {
+        "fontFamily": "Merriweather",
+        "name": "Merriweather, serif",
+        "slug": "merriweather",
+        "fontFace": [
+            {
+                "fontFamily": "Merriweather",
+                "fontWeight": "300",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/merriweather-v30-latin-300.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Merriweather",
+                "fontWeight": "300",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/merriweather-v30-latin-300italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Merriweather",
+                "fontWeight": "400",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/merriweather-v30-latin-regular.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Merriweather",
+                "fontWeight": "400",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/merriweather-v30-latin-italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Merriweather",
+                "fontWeight": "700",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/merriweather-v30-latin-700.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Merriweather",
+                "fontWeight": "700",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/merriweather-v30-latin-700italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Merriweather",
+                "fontWeight": "900",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/merriweather-v30-latin-900.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Merriweather",
+                "fontWeight": "900",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/merriweather-v30-latin-900italic.woff2"
+                ]
+            }
+        ]
+    },
+    {
+        "fontFamily": "Poppins",
+        "name": "Poppins",
+        "slug": "poppins",
+        "fontFace": [
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "100",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-100.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "100",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-100italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "200",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-200.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "200",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-200italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "300",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-300.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "300",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-300italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "400",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-regular.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "400",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "500",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-500.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "500",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-500italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "600",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-600.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "600",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-600italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "700",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-700.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "700",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-700italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "800",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-800.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "800",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-800italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "900",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-900.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Poppins",
+                "fontWeight": "900",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/poppins-v20-latin-900italic.woff2"
+                ]
+            }
+        ]
+    },
+    {
+        "fontFamily": "Satisfy",
+        "name": "Satisfy",
+        "slug": "satisfy",
+        "fontFace": [
+            {
+                "fontFamily": "Satisfy",
+                "fontWeight": "400",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/satisfy-v17-latin-regular.woff2"
+                ]
+            }
+        ]
+    },
+    {
+        "fontFamily": "Forum",
+        "name": "Forum",
+        "slug": "forum",
+        "fontFace": [
+            {
+                "fontFamily": "Forum",
+                "fontWeight": "400",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/forum-v16-latin-regular.woff2"
+                ]
+            }
+        ]
+    },
+    {
+        "fontFamily": "Oswald",
+        "name": "Oswald",
+        "slug": "oswald",
+        "fontFace": [
+            {
+                "fontFamily": "Oswald",
+                "fontWeight": "200",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/oswald-v48-latin-200.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Oswald",
+                "fontWeight": "300",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/oswald-v48-latin-300.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Oswald",
+                "fontWeight": "400",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/oswald-v48-latin-regular.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Oswald",
+                "fontWeight": "500",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/oswald-v48-latin-500.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Oswald",
+                "fontWeight": "600",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/oswald-v48-latin-600.woff2"
+                ]
+            }
+        ]
+    },
+    {
+        "fontFamily": "Playfair Display",
+        "name": "Playfair Display",
+        "slug": "playfair",
+        "fontFace": [
+            {
+                "fontFamily": "Playfair Display",
+                "fontWeight": "400",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/playfair-display-v29-latin-regular.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Playfair Display",
+                "fontWeight": "400",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/playfair-display-v29-latin-italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Playfair Display",
+                "fontWeight": "500",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/playfair-display-v29-latin-500.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Playfair Display",
+                "fontWeight": "500",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/playfair-display-v29-latin-500italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Playfair Display",
+                "fontWeight": "600",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/playfair-display-v29-latin-600.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Playfair Display",
+                "fontWeight": "600",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/playfair-display-v29-latin-600italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Playfair Display",
+                "fontWeight": "700",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/playfair-display-v29-latin-700.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Playfair Display",
+                "fontWeight": "700",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/playfair-display-v29-latin-700italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Playfair Display",
+                "fontWeight": "800",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/playfair-display-v29-latin-800.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Playfair Display",
+                "fontWeight": "800",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/playfair-display-v29-latin-800italic.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Playfair Display",
+                "fontWeight": "900",
+                "fontStyle": "normal",
+                "src": [
+                    "file:./assets/fonts/playfair-display-v29-latin-900.woff2"
+                ]
+            },
+            {
+                "fontFamily": "Playfair Display",
+                "fontWeight": "900",
+                "fontStyle": "italic",
+                "src": [
+                    "file:./assets/fonts/playfair-display-v29-latin-900italic.woff2"
+                ]
+            }
+        ]
+    }
+]
+
+export function FontFamilyEdit({
+    setAttributes,
+    fontFamily ,
+}) {
+
+    const value = find(
+        fontFamilies,
+        ({ slug }) => fontFamily === slug
+    )?.fontFamily;
+
+    function onChange(newValue) {
+        const predefinedFontFamily = find(
+            fontFamilies,
+            ({ fontFamily: f }) => f === newValue
+        );
+        setAttributes({
+            fontFamily: predefinedFontFamily?.slug,
+        });
+    }
+
+    return (
+        <FontFamilyControl
+            className="block-editor-hooks-font-family-control"
+            fontFamilies={fontFamilies}
+            value={value}
+            onChange={onChange}
+            size="__unstable-large"
+            __nextHasNoMarginBottom
+        />
+    );
+}
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
index 2c65440a5..efffabfbf 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
@@ -71,9 +71,6 @@ const StepDesignTypography = () => {
 		} else {
 			selectedGlobalStyle = globalStylesResponse.body[0];
 		}
-		updatePreviewSettings(
-			useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
-		);
 		setPattern(patternsResponse?.body);
 		setIsLoaded(true);
 	};
@@ -84,15 +81,15 @@ const StepDesignTypography = () => {
 	}, [isLoaded]);
 
 	return (
-		<CommonLayout className="theme-colors-preview">
-			<div className="theme-colors-preview__title-bar">
-				<div className="theme-colors-preview__title-bar__browser">
-					<span className="theme-colors-preview__title-bar__browser__dot"></span>
-					<span className="theme-colors-preview__title-bar__browser__dot"></span>
-					<span className="theme-colors-preview__title-bar__browser__dot"></span>
+		<CommonLayout className="theme-fonts-preview">
+			<div className="theme-fonts-preview__title-bar">
+				<div className="theme-fonts-preview__title-bar__browser">
+					<span className="theme-fonts-preview__title-bar__browser__dot"></span>
+					<span className="theme-fonts-preview__title-bar__browser__dot"></span>
+					<span className="theme-fonts-preview__title-bar__browser__dot"></span>
 				</div>
 			</div>
-			<div className="theme-colors-preview__live-preview-container">
+			<div className="theme-fonts-preview__live-preview-container">
 				{pattern && (
 					<LivePreview
 						blockGrammer={pattern}
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
index 88698628a..ec8cd2d2b 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
@@ -1,6 +1,5 @@
-.theme-colors-preview {
+.theme-fonts-preview {
     flex: 1;
-    width: 100%;
     margin: 16px;
     display: flex;
     align-items: center;

From 3f95a573c49aed45cd04f7072dcd25d64170411a Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 14 Oct 2022 16:12:18 +0530
Subject: [PATCH 07/20] Added Re-rendering

---
 .../Drawer/DrawerPanel/DesignTypography.js         | 14 ++++++++------
 .../pages/Steps/DesignTypography/index.js          | 12 ++++++++++++
 .../pages/Steps/DesignTypography/stylesheet.scss   |  4 ++++
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index f38a38a59..334030c89 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -251,13 +251,15 @@ const DesignTypography = () => {
 
 		setSelectedFont(fontStyle);
 
-		// let globalStylesCopy = globalStyles;
-		// globalStylesCopy.styles.typography.fontFamily = fontPalettes[fontStyle].styles.typography.fontFamily;
+		let globalStylesCopy = globalStyles;
+		globalStylesCopy.styles.typography.fontFamily = fontPalettes[fontStyle].styles.typography.fontFamily;
+		globalStylesCopy.styles.blocks['core/heading'].typography.fontFamily = 
+			fontPalettes[fontStyle].styles.blocks['core/heading'].typography.fontFamily;
 		
-		// setGlobalStyles(globalStylesCopy);
-		// updatePreviewSettings(
-		// 	useGlobalStylesOutput(globalStylesCopy, storedPreviewSettings)
-		// );
+		setGlobalStyles(globalStylesCopy);
+		updatePreviewSettings(
+			useGlobalStylesOutput(globalStylesCopy, storedPreviewSettings)
+		);
 	};
 
 	function buildPalettes() {
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
index efffabfbf..bf7ceeff8 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
@@ -17,6 +17,8 @@ const StepDesignTypography = () => {
 	const location = useLocation();
 	const [pattern, setPattern] = useState();
 	const [isLoaded, setIsLoaded] = useState(false);
+	const [time, setTime] = useState(Date.now());
+
 
 	const isLargeViewport = useViewportMatch('medium');
 	const {
@@ -44,6 +46,13 @@ const StepDesignTypography = () => {
 		updatePreviewSettings,
 	} = useDispatch(nfdOnboardingStore);
 
+	useEffect(() => {
+		const interval = setInterval(() => setTime(Date.now()), 1000);
+		return () => {
+			clearInterval(interval);
+		};
+	}, []);
+
 	useEffect(() => {
 		if (isLargeViewport) {
 			setIsDrawerOpened(true);
@@ -99,6 +108,9 @@ const StepDesignTypography = () => {
 					/>
 				)}
 			</div>
+			<div className='theme-fonts-preview-hidden'>
+				{time}
+			</div>
 		</CommonLayout>
 	);
 };
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
index ec8cd2d2b..11a4f9708 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
@@ -50,4 +50,8 @@
             }
         }
     }
+
+    &-hidden {
+        display: none;
+    }
 }
\ No newline at end of file

From 2629e64f94419df8075d9d72ea1d9575c62fa94c Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 14 Oct 2022 18:07:38 +0530
Subject: [PATCH 08/20] Added API

---
 includes/Data/Flows.php                       |   4 +-
 includes/RestApi/RestApi.php                  |   1 +
 .../RestApi/Themes/ThemeFontsController.php   | 267 ++++++++++++++++++
 .../Drawer/DrawerPanel/DesignTypography.js    | 227 ++-------------
 src/OnboardingSPA/utils/api/themes.js         |  10 +-
 5 files changed, 301 insertions(+), 208 deletions(-)
 create mode 100644 includes/RestApi/Themes/ThemeFontsController.php

diff --git a/includes/Data/Flows.php b/includes/Data/Flows.php
index 3d3885431..95df8ef97 100644
--- a/includes/Data/Flows.php
+++ b/includes/Data/Flows.php
@@ -75,8 +75,8 @@ final class Flows {
 			),
 
 			'typography'      => array(
-				'fontFamilies' => array(),
-				'fontSizes'    => array(),
+				'slug' => '',
+				'data' => array()
 			),
 
 			// This string will identify the Header Pattern
diff --git a/includes/RestApi/RestApi.php b/includes/RestApi/RestApi.php
index 19a2b8f9e..c40bfdaac 100644
--- a/includes/RestApi/RestApi.php
+++ b/includes/RestApi/RestApi.php
@@ -19,6 +19,7 @@ final class RestApi {
 		'NewfoldLabs\\WP\\Module\\Onboarding\\RestApi\\EventsController',
 		'NewfoldLabs\\WP\\Module\\Onboarding\\RestApi\\PagesController',
 		'NewfoldLabs\WP\\Module\\Onboarding\\RestApi\\Themes\\ThemeInstallerController',
+		'NewfoldLabs\WP\\Module\\Onboarding\\RestApi\\Themes\\ThemeFontsController',
 	);
 
 	public function __construct() {
diff --git a/includes/RestApi/Themes/ThemeFontsController.php b/includes/RestApi/Themes/ThemeFontsController.php
new file mode 100644
index 000000000..0b25654c2
--- /dev/null
+++ b/includes/RestApi/Themes/ThemeFontsController.php
@@ -0,0 +1,267 @@
+<?php
+
+namespace NewfoldLabs\WP\Module\Onboarding\RestApi\Themes;
+
+use NewfoldLabs\WP\Module\Onboarding\Permissions;
+
+/**
+ * Class ThemeFontsController
+ */
+class ThemeFontsController extends \WP_REST_Controller
+{
+
+    /**
+     * The namespace of this controller's route.
+     *
+     * @var string
+     */
+    protected $namespace = 'newfold-onboarding/v1';
+
+    /**
+     * The base of this controller's route.
+     *
+     * @var string
+     */
+    protected $rest_base = '/themes';
+
+
+    /**
+     * The extended base of this controller's route.
+     *
+     * @var string
+     */
+    protected $rest_extended_base = '/fonts';
+
+    /**
+     * This contains the different font variations for the theme.
+     *
+     * @var string
+     */
+    protected static $theme_fonts = array(
+        'yith-wonder' => array(
+            "modern-approachable"=> array(
+                "label"=> "Modern & approachable",
+                "matches"=> "yith-wonder/theme-json",
+                "styles"=> array(
+                    "typography"=> array(
+                        "fontFamily"=> "var(--wp--preset--font-family--mulish)"
+                    ),
+                    "blocks"=> array(
+                        "core/heading"=> array(
+                            "typography"=> array(
+                                "fontFamily"=> "var(--wp--preset--font-family--poppins)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "strong-sleek"=> array(
+                "label"=> "Strong & sleek",
+                "matches"=> "yith-wonder/styles/01-blue-shades",
+                "styles"=> array(
+                    "typography"=> array(
+                        "fontFamily"=> "var(--wp--preset--font-family--raleway)"
+                    ),
+                    "blocks"=> array(
+                        "core/heading"=> array(
+                            "typography"=> array(
+                                "fontFamily"=> "var(--wp--preset--font-family--oswald)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "stately-elevated"=> array(
+                "label"=> "Stately & elevated",
+                "matches"=> "yith-wonder/styles/02-pink-shades",
+                "styles"=> array(
+                    "typography"=> array(
+                        "fontFamily"=> "var(--wp--preset--font-family--source-sans-pro)"
+                    ),
+                    "blocks"=> array(
+                        "core/heading"=> array(
+                            "typography"=> array(
+                                "fontFamily"=> "var(--wp--preset--font-family--playfair)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "typewriter-crisp-midcentury"=> array(
+                "label"=> "Typewriter & crisp midcentury",
+                "matches"=> "yith-wonder/styles/03-orange-shades",
+                "styles"=> array(
+                    "typography"=> array(
+                        "fontFamily"=> "var(--wp--preset--font-family--jost)"
+                    ),
+                    "blocks"=> array(
+                        "core/heading"=> array(
+                            "typography"=> array(
+                                "fontFamily"=> "var(--wp--preset--font-family--solway)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "refined-traditional-newsletter"=> array(
+                "label"=> "Refined traditional newsletter",
+                "matches"=> "yith-wonder/styles/04-black-shades",
+                "styles"=> array(
+                    "typography"=> array(
+                        "fontFamily"=> "var(--wp--preset--font-family--jost)"
+                    ),
+                    "blocks"=> array(
+                        "core/heading"=> array(
+                            "typography"=> array(
+                                "fontFamily"=> "var(--wp--preset--font-family--merriweather)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "bold-stamp-slab"=> array(
+                "label"=> "Bold stamp & slab",
+                "matches"=> "yith-wonder/styles/05-red-shades",
+                "styles"=> array(
+                    "typography"=> array(
+                        "fontFamily"=> "var(--wp--preset--font-family--roboto-slab)"
+                    ),
+                    "blocks"=> array(
+                        "core/heading"=> array(
+                            "typography"=> array(
+                                "fontFamily"=> "var(--wp--preset--font-family--changa-one)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "fast-simple"=> array(
+                "label"=> "Fast & Simple",
+                "matches"=> "newfold/onboarding-01",
+                "styles"=> array(
+                    "typography"=> array(
+                        "fontFamily"=> "var(--wp--preset--font-family--system)"
+                    ),
+                    "blocks"=> array(
+                        "core/heading"=> array(
+                            "typography"=> array(
+                                "fontFamily"=> "var(--wp--preset--font-family--system)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "timeless-traditional"=> array(
+                "label"=> "Timeless & Traditional",
+                "matches"=> "newfold/onboarding-02",
+                "styles"=> array(
+                    "typography"=> array(
+                        "fontFamily"=> "var(--wp--preset--font-family--serif)"
+                    ),
+                    "blocks"=> array(
+                        "core/heading"=> array(
+                            "typography"=> array(
+                                "fontFamily"=> "var(--wp--preset--font-family--serif)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "sleek-sophisticated"=> array(
+                "label"=> "Sleek & Sophisticated",
+                "matches"=> "newfold/onboarding-03",
+                "styles"=> array(
+                    "typography"=> array(
+                        "fontFamily"=> "var(--wp--preset--font-family--dm-sans)"
+                    ),
+                    "blocks"=> array(
+                        "core/heading"=> array(
+                            "typography"=> array(
+                                "fontFamily"=> "var(--wp--preset--font-family--dm-sans)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "clear-crisp"=> array(
+                "label"=> "Clear & Crisp",
+                "matches"=> "newfold/onboarding-04",
+                "styles"=> array(
+                    "typography"=> array(
+                        "fontFamily"=> "var(--wp--preset--font-family--inter)"
+                    ),
+                    "blocks"=> array(
+                        "core/heading"=> array(
+                            "typography"=> array(
+                                "fontFamily"=> "var(--wp--preset--font-family--inter)"
+                            )
+                        )
+                )
+                )
+            ),
+            "retro-classy"=> array(
+                "label"=> "Retro & Classy",
+                "matches"=> "newfold/onboarding-05",
+                "styles"=> array(
+                    "typography"=> array(
+                        "fontFamily"=> "var(--wp--preset--font-family--league-spartan)"
+                    ),
+                    "blocks"=> array(
+                        "core/heading"=> array(
+                            "typography"=> array(
+                                "fontFamily"=> "var(--wp--preset--font-family--league-spartan)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "defined-solid"=> array(
+                "label"=> "Defined & Solid",
+                "matches"=> "newfold/onboarding-06",
+                "styles"=> array(
+                    "typography"=> array(
+                        "fontFamily"=> "var(--wp--preset--font-family--roboto-slab)"
+                    ),
+                    "blocks"=> array(
+                        "core/heading"=> array(
+                            "typography"=> array(
+                                "fontFamily"=> "var(--wp--preset--font-family--roboto-slab)"
+                            )
+                        )
+                    )
+                )
+            )
+        )
+    );
+
+    /**
+     * Registers routes for ThemeColorsController
+     */
+    public function register_routes()
+    {
+        \register_rest_route(
+            $this->namespace,
+            $this->rest_base . $this->rest_extended_base,
+            array(
+                array(
+                    'methods'  => \WP_REST_Server::READABLE,
+                    'callback' => array($this, 'get_theme_fonts'),
+                    'permission_callback' => array(Permissions::class, 'rest_is_authorized_admin'),
+                ),
+            )
+        );
+    }
+
+    /**
+     * Retrieves the active theme font variations.
+     *
+     * @return array|\WP_Error
+     */
+    public function get_theme_fonts()
+    {
+        $active_theme = (\wp_get_theme())->get('TextDomain');
+        $pattern_slugs = self::$theme_fonts[$active_theme];
+
+        return $pattern_slugs;
+    }
+}
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index 334030c89..6f471ceb9 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -3,15 +3,17 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 
 import { store as nfdOnboardingStore } from '../../../store';
-import { getGlobalStyles } from '../../../utils/api/themes';
+import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 import { FontFamilyEdit } from './font-family';
+import { G } from '@wordpress/components';
 
 const DesignTypography = () => {
 
 	const [isLoaded, setIsLoaded] = useState(false);
 	const [selectedFont, setSelectedFont] = useState();
 	const [globalStyles, setGlobalStyles] = useState();
+	const [fontPalettes, setFontPalettes] = useState();
 	const [isAccordionClosed, setIsAccordionClosed] = useState(true);
 
 	const { storedPreviewSettings, currentData } = useSelect(
@@ -29,204 +31,11 @@ const DesignTypography = () => {
 	const { updatePreviewSettings, setCurrentOnboardingData } =
 		useDispatch(nfdOnboardingStore);
 
-	const fontPalettes = 
-	{
-		"modern-approachable": {
-			"label": "Modern & approachable",
-			"matches": "yith-wonder/theme-json",
-			"styles": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--mulish)"
-				},
-				"blocks": {
-					"core/heading": {
-						"typography": {
-							"fontFamily": "var(--wp--preset--font-family--poppins)"
-						}
-					}
-				}
-			}
-		},
-		"strong-sleek": {
-			"label": "Strong & sleek",
-			"matches": "yith-wonder/styles/01-blue-shades",
-			"styles": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--raleway)"
-				},
-				"blocks": {
-					"core/heading": {
-						"typography": {
-							"fontFamily": "var(--wp--preset--font-family--oswald)"
-						}
-					}
-				}
-			}
-		},
-		"stately-elevated": {
-			"label": "Stately & elevated",
-			"matches": "yith-wonder/styles/02-pink-shades",
-			"styles": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--source-sans-pro)"
-				},
-				"blocks": {
-					"core/heading": {
-						"typography": {
-							"fontFamily": "var(--wp--preset--font-family--playfair)"
-						}
-					}
-				}
-			}
-		},
-		"typewriter-crisp-midcentury": {
-			"label": "Typewriter & crisp midcentury",
-			"matches": "yith-wonder/styles/03-orange-shades",
-			"styles": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--jost)"
-				},
-				"blocks": {
-					"core/heading": {
-						"typography": {
-							"fontFamily": "var(--wp--preset--font-family--solway)"
-						}
-					}
-				}
-			}
-		},
-		"refined-traditional-newsletter": {
-			"label": "Refined traditional newsletter",
-			"matches": "yith-wonder/styles/04-black-shades",
-			"styles": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--jost)"
-				},
-				"blocks": {
-					"core/heading": {
-						"typography": {
-							"fontFamily": "var(--wp--preset--font-family--merriweather)"
-						}
-					}
-				}
-			}
-		},
-		"bold-stamp-slab": {
-			"label": "Bold stamp & slab",
-			"matches": "yith-wonder/styles/05-red-shades",
-			"styles": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--roboto-slab)"
-				},
-				"blocks": {
-					"core/heading": {
-						"typography": {
-							"fontFamily": "var(--wp--preset--font-family--changa-one)"
-						}
-					}
-				}
-			}
-		},
-		"fast-simple": {
-			"label": "Fast & Simple",
-			"matches": "newfold/onboarding-01",
-			"styles": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--system)"
-				},
-				"blocks": {
-					"core/heading": {
-						"typography": {
-							"fontFamily": "var(--wp--preset--font-family--system)"
-						}
-					}
-				}
-			}
-		},
-		"timeless-traditional": {
-			"label": "Timeless & Traditional",
-			"matches": "newfold/onboarding-02",
-			"styles": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--serif)"
-				},
-				"blocks": {
-					"core/heading": {
-						"typography": {
-							"fontFamily": "var(--wp--preset--font-family--serif)"
-						}
-					}
-				}
-			}
-		},
-		"sleek-sophisticated": {
-			"label": "Sleek & Sophisticated",
-			"matches": "newfold/onboarding-03",
-			"styles": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--dm-sans)"
-				},
-				"blocks": {
-					"core/heading": {
-						"typography": {
-							"fontFamily": "var(--wp--preset--font-family--dm-sans)"
-						}
-					}
-				}
-			}
-		},
-		"clear-crisp": {
-			"label": "Clear & Crisp",
-			"matches": "newfold/onboarding-04",
-			"styles": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--inter)"
-				},
-				"blocks": {
-					"core/heading": {
-						"typography": {
-							"fontFamily": "var(--wp--preset--font-family--inter)"
-						}
-					}
-			}
-			}
-		},
-		"retro-classy": {
-			"label": "Retro & Classy",
-			"matches": "newfold/onboarding-05",
-			"styles": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--league-spartan)"
-				},
-				"blocks": {
-					"core/heading": {
-						"typography": {
-							"fontFamily": "var(--wp--preset--font-family--league-spartan)"
-						}
-					}
-				}
-			}
-		},
-		"defined-solid": {
-			"label": "Defined & Solid",
-			"matches": "newfold/onboarding-06",
-			"styles": {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--roboto-slab)"
-				},
-				"blocks": {
-					"core/heading": {
-						"typography": {
-							"fontFamily": "var(--wp--preset--font-family--roboto-slab)"
-						}
-					}
-				}
-			}
-		}
-	}
-
 	const getFontStylesAndPatterns = async () => {
+		const fontPalettes = await getThemeFonts();
 		const globalStyles = await getGlobalStyles();
+		setFontPalettes(fontPalettes?.body);
+
 		let selectedGlobalStyle;
 		if (currentData?.data?.theme?.variation) {
 			selectedGlobalStyle = globalStyles.body.filter(
@@ -237,9 +46,14 @@ const DesignTypography = () => {
 			selectedGlobalStyle = globalStyles.body[0];
 		}
 		setGlobalStyles(selectedGlobalStyle);
-		updatePreviewSettings(
-			useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
-		);
+
+		if(currentData?.data?.typography?.slug !== ''){
+			handleClick(currentData?.data?.typography?.slug, selectedGlobalStyle, fontPalettes?.body);
+		}else{
+			updatePreviewSettings(
+				useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
+			);
+		}
 		setIsLoaded(true);
 	};
 
@@ -247,16 +61,19 @@ const DesignTypography = () => {
 		if (!isLoaded) getFontStylesAndPatterns();
 	}, [isLoaded]);
 	
-	const handleClick = async (fontStyle) => {
-
+	const handleClick = async (fontStyle, selectedGlobalStyle = globalStyles, fontPalettesCopy = fontPalettes) => {
 		setSelectedFont(fontStyle);
 
-		let globalStylesCopy = globalStyles;
-		globalStylesCopy.styles.typography.fontFamily = fontPalettes[fontStyle].styles.typography.fontFamily;
+		let globalStylesCopy = selectedGlobalStyle;
+		globalStylesCopy.styles.typography.fontFamily = fontPalettesCopy[fontStyle]?.styles?.typography?.fontFamily;
 		globalStylesCopy.styles.blocks['core/heading'].typography.fontFamily = 
-			fontPalettes[fontStyle].styles.blocks['core/heading'].typography.fontFamily;
+			fontPalettesCopy[fontStyle]?.styles.blocks['core/heading'].typography.fontFamily;
 		
 		setGlobalStyles(globalStylesCopy);
+		currentData.data.typography.slug = fontStyle;
+		currentData.data.typography.data = fontPalettesCopy[fontStyle];
+		setCurrentOnboardingData(currentData);
+
 		updatePreviewSettings(
 			useGlobalStylesOutput(globalStylesCopy, storedPreviewSettings)
 		);
diff --git a/src/OnboardingSPA/utils/api/themes.js b/src/OnboardingSPA/utils/api/themes.js
index 4f21d60c1..a557c6678 100644
--- a/src/OnboardingSPA/utils/api/themes.js
+++ b/src/OnboardingSPA/utils/api/themes.js
@@ -34,4 +34,12 @@ const getThemeStatus = async ( theme ) => {
 	);
 };
 
-export { init, getGlobalStyles, getThemeStatus };
+const getThemeFonts = async () => {
+	return await resolve(
+		apiFetch({
+			url: onboardingRestURL('themes/fonts'),
+		})
+	);
+};
+
+export { init, getGlobalStyles, getThemeStatus, getThemeFonts };

From 04e35cf63d57f92f9c3ff0536a47d845759e0fac Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Mon, 17 Oct 2022 11:05:46 +0530
Subject: [PATCH 09/20] Fixed Re-rendering

---
 .../Drawer/DrawerPanel/DesignTypography.js    |  27 +-
 .../Drawer/DrawerPanel/font-family.js         | 773 ------------------
 .../components/Drawer/stylesheet.scss         |   6 +-
 src/OnboardingSPA/data/routes/default-flow.js |   1 +
 .../pages/Steps/DesignTypography/index.js     |  15 +-
 .../Steps/DesignTypography/stylesheet.scss    |   3 -
 6 files changed, 24 insertions(+), 801 deletions(-)
 delete mode 100644 src/OnboardingSPA/components/Drawer/DrawerPanel/font-family.js

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index 6f471ceb9..3b546b320 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -5,11 +5,10 @@ import { useState, useEffect } from '@wordpress/element';
 import { store as nfdOnboardingStore } from '../../../store';
 import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
-import { FontFamilyEdit } from './font-family';
-import { G } from '@wordpress/components';
 
 const DesignTypography = () => {
 
+	const [rerender, doRerender] = useState(0);
 	const [isLoaded, setIsLoaded] = useState(false);
 	const [selectedFont, setSelectedFont] = useState();
 	const [globalStyles, setGlobalStyles] = useState();
@@ -28,6 +27,13 @@ const DesignTypography = () => {
 		[]
 	);
 
+	// useEffect(() => {
+	// 	const interval = setInterval(() => setTime(Date.now()), 1000);
+	// 	return () => {
+	// 		clearInterval(interval);
+	// 	};
+	// }, []);
+
 	const { updatePreviewSettings, setCurrentOnboardingData } =
 		useDispatch(nfdOnboardingStore);
 
@@ -77,6 +83,7 @@ const DesignTypography = () => {
 		updatePreviewSettings(
 			useGlobalStylesOutput(globalStylesCopy, storedPreviewSettings)
 		);
+		doRerender(1);
 	};
 
 	function buildPalettes() {
@@ -98,12 +105,12 @@ const DesignTypography = () => {
 
 	function buildCustomPalette() {
 		return (
-			<div className='custom-palette'>
-				<div className='custom-palette__top'
+			<div className='custom-font-palette'>
+				<div className='custom-font-palette__top'
 					onClick={(e) => setIsAccordionClosed(!isAccordionClosed)}>
-					<div className='custom-palette__top-text'>SELECT CUSTOM FONTS</div>
-					{isAccordionClosed && <div className='custom-palette__top-icon'>+</div>}
-					{!isAccordionClosed && <div className='custom-palette__top-icon'>-</div>}
+					<div className='custom-font-palette__top-text'>SELECT CUSTOM FONTS</div>
+					{isAccordionClosed && <div className='custom-font-palette__top-icon'>+</div>}
+					{!isAccordionClosed && <div className='custom-font-palette__top-icon'>-</div>}
 				</div>
 			</div>
 		);
@@ -112,11 +119,11 @@ const DesignTypography = () => {
 	return (
 		<div style={{ padding: '0 4px' }}>
 			<h2>{__('Color Palettes', 'wp-module-onboarding')}</h2>
-			{/* <FontFamilyEdit
-				fontFamily={'monospace'}>
-			</FontFamilyEdit> */}
 			{buildPalettes()}
 			{buildCustomPalette()}
+			<div className='custom-font-palette--hidden'>
+				{rerender}
+			</div>
 		</div>
 	);
 };
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/font-family.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/font-family.js
deleted file mode 100644
index e6892a1b7..000000000
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/font-family.js
+++ /dev/null
@@ -1,773 +0,0 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-import {
-    __experimentalFontFamilyControl as FontFamilyControl,
-} from '@wordpress/block-editor';
-
-const fontFamilies = [
-    {
-        "name": "System",
-        "slug": "system",
-        "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif"
-    },
-    {
-        "name": "Serif",
-        "slug": "serif",
-        "fontFamily": "\"Times New Roman\",\"New York\",Times,\"Noto Serif\",serif"
-    },
-    {
-        "name": "Monospace",
-        "slug": "monospace",
-        "fontFamily": "Consolas,Menlo,Monaco,\"SF Mono\",\"DejaVu Sans Mono\",\"Roboto Mono\",\"Courier New\",Courier,monospace"
-    },
-    {
-        "fontFamily": "Mulish",
-        "name": "Mulish, sans-serif",
-        "slug": "mulish",
-        "fontFace": [
-            {
-                "fontFamily": "Mulish",
-                "fontWeight": "200 900",
-                "fontStyle": "normal",
-                "fontStretch": "normal",
-                "src": [
-                    "file:./assets/fonts/Mulish-VariableFont_wght.ttf"
-                ]
-            },
-            {
-                "fontFamily": "Mulish",
-                "fontWeight": "200 900",
-                "fontStyle": "italic",
-                "fontStretch": "normal",
-                "src": [
-                    "file:./assets/fonts/Mulish-Italic-VariableFont_wght.ttf"
-                ]
-            }
-        ]
-    },
-    {
-        "fontFamily": "Raleway",
-        "name": "Raleway, sans-serif",
-        "slug": "raleway",
-        "fontFace": [
-            {
-                "fontFamily": "Raleway",
-                "fontWeight": "100 900",
-                "fontStretch": "normal",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/Raleway-VariableFont_wght.ttf"
-                ]
-            },
-            {
-                "fontFamily": "Raleway",
-                "fontWeight": "100 900",
-                "fontStretch": "normal",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/Raleway-Italic-VariableFont_wght.ttf"
-                ]
-            }
-        ]
-    },
-    {
-        "fontFamily": "Roboto Slab",
-        "name": "Roboto Slab, serif",
-        "slug": "roboto-slab",
-        "fontFace": [
-            {
-                "fontFamily": "Roboto Slab",
-                "fontWeight": "100 900",
-                "fontStretch": "normal",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/RobotoSlab-VariableFont_wght.ttf"
-                ]
-            }
-        ]
-    },
-    {
-        "fontFamily": "Jost",
-        "name": "Jost, sans-serif",
-        "slug": "jost",
-        "fontFace": [
-            {
-                "fontFamily": "Jost",
-                "fontWeight": "100 900",
-                "fontStretch": "normal",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/Jost-VariableFont_wght.ttf"
-                ]
-            },
-            {
-                "fontFamily": "Jost",
-                "fontWeight": "100 900",
-                "fontStretch": "normal",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/Jost-Italic-VariableFont_wght.ttf"
-                ]
-            }
-        ]
-    },
-    {
-        "fontFamily": "Montserrat",
-        "name": "Montserrat, sans-serif",
-        "slug": "montserrat",
-        "fontFace": [
-            {
-                "fontFamily": "Montserrat",
-                "fontWeight": "100 900",
-                "fontStretch": "normal",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/Montserrat-VariableFont_wght.ttf"
-                ]
-            },
-            {
-                "fontFamily": "Montserrat",
-                "fontWeight": "100 900",
-                "fontStretch": "normal",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/Montserrat-Italic-VariableFont_wght.ttf"
-                ]
-            }
-        ]
-    },
-    {
-        "fontFamily": "Nunito",
-        "name": "Nunito, sans-serif",
-        "slug": "nunito",
-        "fontFace": [
-            {
-                "fontFamily": "Nunito",
-                "fontWeight": "200 900",
-                "fontStretch": "normal",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/Nunito-VariableFont_wght.ttf"
-                ]
-            },
-            {
-                "fontFamily": "Nunito",
-                "fontWeight": "200 900",
-                "fontStretch": "normal",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/Nunito-Italic-VariableFont_wght.ttf"
-                ]
-            }
-        ]
-    },
-    {
-        "fontFamily": "Solway",
-        "name": "Solway, serif",
-        "slug": "solway",
-        "fontFace": [
-            {
-                "fontFamily": "Solway",
-                "fontWeight": "300",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/solway-v15-latin-300.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Solway",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/solway-v15-latin-regular.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Solway",
-                "fontWeight": "500",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/solway-v15-latin-500.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Solway",
-                "fontWeight": "700",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/solway-v15-latin-700.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Solway",
-                "fontWeight": "800",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/solway-v15-latin-800.woff2"
-                ]
-            }
-        ]
-    },
-    {
-        "fontFamily": "Changa One",
-        "name": "Changa One, display",
-        "slug": "changa-one",
-        "fontFace": [
-            {
-                "fontFamily": "Changa One",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/changa-one-v18-latin-regular.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Changa One",
-                "fontWeight": "400",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/changa-one-v18-latin-italic.woff2"
-                ]
-            }
-        ]
-    },
-    {
-        "fontFamily": "Source Sans Pro",
-        "name": "Source Sans Pro, sans-serif",
-        "slug": "source-sans-pro",
-        "fontFace": [
-            {
-                "fontFamily": "Source Sans Pro",
-                "fontWeight": "200",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/source-sans-pro-v21-latin-200.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Source Sans Pro",
-                "fontWeight": "200",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/source-sans-pro-v21-latin-200italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Source Sans Pro",
-                "fontWeight": "300",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/source-sans-pro-v21-latin-300.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Source Sans Pro",
-                "fontWeight": "300",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/source-sans-pro-v21-latin-300italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Source Sans Pro",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/source-sans-pro-v21-latin-regular.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Source Sans Pro",
-                "fontWeight": "400",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/source-sans-pro-v21-latin-italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Source Sans Pro",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/source-sans-pro-v21-latin-600.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Source Sans Pro",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/source-sans-pro-v21-latin-600italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Source Sans Pro",
-                "fontWeight": "700",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/source-sans-pro-v21-latin-700.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Source Sans Pro",
-                "fontWeight": "700",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/source-sans-pro-v21-latin-700italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Source Sans Pro",
-                "fontWeight": "900",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/source-sans-pro-v21-latin-900.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Source Sans Pro",
-                "fontWeight": "900",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/source-sans-pro-v21-latin-900italic.woff2"
-                ]
-            }
-        ]
-    },
-    {
-        "fontFamily": "Merriweather",
-        "name": "Merriweather, serif",
-        "slug": "merriweather",
-        "fontFace": [
-            {
-                "fontFamily": "Merriweather",
-                "fontWeight": "300",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/merriweather-v30-latin-300.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Merriweather",
-                "fontWeight": "300",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/merriweather-v30-latin-300italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Merriweather",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/merriweather-v30-latin-regular.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Merriweather",
-                "fontWeight": "400",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/merriweather-v30-latin-italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Merriweather",
-                "fontWeight": "700",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/merriweather-v30-latin-700.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Merriweather",
-                "fontWeight": "700",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/merriweather-v30-latin-700italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Merriweather",
-                "fontWeight": "900",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/merriweather-v30-latin-900.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Merriweather",
-                "fontWeight": "900",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/merriweather-v30-latin-900italic.woff2"
-                ]
-            }
-        ]
-    },
-    {
-        "fontFamily": "Poppins",
-        "name": "Poppins",
-        "slug": "poppins",
-        "fontFace": [
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "100",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-100.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "100",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-100italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "200",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-200.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "200",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-200italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "300",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-300.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "300",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-300italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-regular.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "400",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "500",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-500.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "500",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-500italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-600.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-600italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "700",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-700.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "700",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-700italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "800",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-800.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "800",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-800italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "900",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-900.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Poppins",
-                "fontWeight": "900",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/poppins-v20-latin-900italic.woff2"
-                ]
-            }
-        ]
-    },
-    {
-        "fontFamily": "Satisfy",
-        "name": "Satisfy",
-        "slug": "satisfy",
-        "fontFace": [
-            {
-                "fontFamily": "Satisfy",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/satisfy-v17-latin-regular.woff2"
-                ]
-            }
-        ]
-    },
-    {
-        "fontFamily": "Forum",
-        "name": "Forum",
-        "slug": "forum",
-        "fontFace": [
-            {
-                "fontFamily": "Forum",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/forum-v16-latin-regular.woff2"
-                ]
-            }
-        ]
-    },
-    {
-        "fontFamily": "Oswald",
-        "name": "Oswald",
-        "slug": "oswald",
-        "fontFace": [
-            {
-                "fontFamily": "Oswald",
-                "fontWeight": "200",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/oswald-v48-latin-200.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Oswald",
-                "fontWeight": "300",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/oswald-v48-latin-300.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Oswald",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/oswald-v48-latin-regular.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Oswald",
-                "fontWeight": "500",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/oswald-v48-latin-500.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Oswald",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/oswald-v48-latin-600.woff2"
-                ]
-            }
-        ]
-    },
-    {
-        "fontFamily": "Playfair Display",
-        "name": "Playfair Display",
-        "slug": "playfair",
-        "fontFace": [
-            {
-                "fontFamily": "Playfair Display",
-                "fontWeight": "400",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/playfair-display-v29-latin-regular.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Playfair Display",
-                "fontWeight": "400",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/playfair-display-v29-latin-italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Playfair Display",
-                "fontWeight": "500",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/playfair-display-v29-latin-500.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Playfair Display",
-                "fontWeight": "500",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/playfair-display-v29-latin-500italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Playfair Display",
-                "fontWeight": "600",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/playfair-display-v29-latin-600.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Playfair Display",
-                "fontWeight": "600",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/playfair-display-v29-latin-600italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Playfair Display",
-                "fontWeight": "700",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/playfair-display-v29-latin-700.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Playfair Display",
-                "fontWeight": "700",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/playfair-display-v29-latin-700italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Playfair Display",
-                "fontWeight": "800",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/playfair-display-v29-latin-800.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Playfair Display",
-                "fontWeight": "800",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/playfair-display-v29-latin-800italic.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Playfair Display",
-                "fontWeight": "900",
-                "fontStyle": "normal",
-                "src": [
-                    "file:./assets/fonts/playfair-display-v29-latin-900.woff2"
-                ]
-            },
-            {
-                "fontFamily": "Playfair Display",
-                "fontWeight": "900",
-                "fontStyle": "italic",
-                "src": [
-                    "file:./assets/fonts/playfair-display-v29-latin-900italic.woff2"
-                ]
-            }
-        ]
-    }
-]
-
-export function FontFamilyEdit({
-    setAttributes,
-    fontFamily ,
-}) {
-
-    const value = find(
-        fontFamilies,
-        ({ slug }) => fontFamily === slug
-    )?.fontFamily;
-
-    function onChange(newValue) {
-        const predefinedFontFamily = find(
-            fontFamilies,
-            ({ fontFamily: f }) => f === newValue
-        );
-        setAttributes({
-            fontFamily: predefinedFontFamily?.slug,
-        });
-    }
-
-    return (
-        <FontFamilyControl
-            className="block-editor-hooks-font-family-control"
-            fontFamilies={fontFamilies}
-            value={value}
-            onChange={onChange}
-            size="__unstable-large"
-            __nextHasNoMarginBottom
-        />
-    );
-}
diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss
index f2d9de308..745cf79f1 100644
--- a/src/OnboardingSPA/components/Drawer/stylesheet.scss
+++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss
@@ -360,12 +360,16 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
     }
 }
 
-.custom-palette {
+.custom-font-palette {
     width: 88%;
     margin: 30px 2px;
     padding: 20px 16px;
     background: $main-border-main;
 
+    &--hidden {
+        display: none;
+    }
+
     &__top {
         display: flex;
         cursor: pointer;
diff --git a/src/OnboardingSPA/data/routes/default-flow.js b/src/OnboardingSPA/data/routes/default-flow.js
index c76b58ac3..bbe8afb97 100644
--- a/src/OnboardingSPA/data/routes/default-flow.js
+++ b/src/OnboardingSPA/data/routes/default-flow.js
@@ -471,6 +471,7 @@ export const conditionalSteps = {
 		Icon: typography,
 		priority: 200,
 		VIEW: VIEW_DESIGN_TYPOGRAPHY,
+		patternId: 'theme-styles',
 	},
 };
 
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
index bf7ceeff8..bba35c423 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
@@ -9,15 +9,12 @@ import { getGlobalStyles } from '../../../utils/api/themes';
 import { store as nfdOnboardingStore } from '../../../store';
 import { LivePreview } from '../../../components/LivePreview';
 import CommonLayout from '../../../components/Layouts/Common';
-import { VIEW_DESIGN_TYPOGRAPHY } from '../../../../constants';
-import { DesignStateHandler } from '../../../components/StateHandlers';
-import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
+import { THEME_STATUS_NOT_ACTIVE, VIEW_DESIGN_TYPOGRAPHY } from '../../../../constants';
 
 const StepDesignTypography = () => {
 	const location = useLocation();
 	const [pattern, setPattern] = useState();
 	const [isLoaded, setIsLoaded] = useState(false);
-	const [time, setTime] = useState(Date.now());
 
 
 	const isLargeViewport = useViewportMatch('medium');
@@ -46,13 +43,6 @@ const StepDesignTypography = () => {
 		updatePreviewSettings,
 	} = useDispatch(nfdOnboardingStore);
 
-	useEffect(() => {
-		const interval = setInterval(() => setTime(Date.now()), 1000);
-		return () => {
-			clearInterval(interval);
-		};
-	}, []);
-
 	useEffect(() => {
 		if (isLargeViewport) {
 			setIsDrawerOpened(true);
@@ -108,9 +98,6 @@ const StepDesignTypography = () => {
 					/>
 				)}
 			</div>
-			<div className='theme-fonts-preview-hidden'>
-				{time}
-			</div>
 		</CommonLayout>
 	);
 };
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
index 11a4f9708..42383ddac 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
@@ -51,7 +51,4 @@
         }
     }
 
-    &-hidden {
-        display: none;
-    }
 }
\ No newline at end of file

From b8e341e37cfaf1888aacd403d27b4061d2683783 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 18 Oct 2022 10:53:43 +0530
Subject: [PATCH 10/20] Added CSS Classes

---
 .../Drawer/DrawerPanel/DesignTypography.js    | 21 +++++++++----------
 .../components/Drawer/stylesheet.scss         |  6 +++++-
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index 3b546b320..2467ce98f 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -1,9 +1,11 @@
 import { __ } from '@wordpress/i18n';
+import { FlexItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 
 import { store as nfdOnboardingStore } from '../../../store';
 import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes';
+import { toStyles } from '../../../utils/global-styles/use-global-styles-output';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 
 const DesignTypography = () => {
@@ -27,13 +29,6 @@ const DesignTypography = () => {
 		[]
 	);
 
-	// useEffect(() => {
-	// 	const interval = setInterval(() => setTime(Date.now()), 1000);
-	// 	return () => {
-	// 		clearInterval(interval);
-	// 	};
-	// }, []);
-
 	const { updatePreviewSettings, setCurrentOnboardingData } =
 		useDispatch(nfdOnboardingStore);
 
@@ -117,10 +112,14 @@ const DesignTypography = () => {
 	}
 
 	return (
-		<div style={{ padding: '0 4px' }}>
-			<h2>{__('Color Palettes', 'wp-module-onboarding')}</h2>
-			{buildPalettes()}
-			{buildCustomPalette()}
+		<div className='theme-fonts--drawer'>
+			<h2>{__('Font Palettes', 'wp-module-onboarding')}</h2>
+			<FlexItem
+				className="edit-site-global-styles-screen-typography__indicator"
+				style={{ fontFamily: 'Mulish' ?? 'serif' }}
+			>{__('Aac')}</FlexItem>
+			{fontPalettes && buildPalettes()}
+			{fontPalettes && buildCustomPalette()}
 			<div className='custom-font-palette--hidden'>
 				{rerender}
 			</div>
diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss
index 745cf79f1..e6a9482fc 100644
--- a/src/OnboardingSPA/components/Drawer/stylesheet.scss
+++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss
@@ -324,7 +324,11 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
     }
 }
 
-// Design Color Palette Step
+// Design Font Palette Step
+
+.theme-colors--drawer {
+    padding: 0 4px;
+}
 
 .font-palette {
 

From d34935e736bb0dec35288c2859c1cf2eaf2fe048 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 18 Oct 2022 10:57:31 +0530
Subject: [PATCH 11/20] Refactored REST API

---
 includes/Data/Fonts.php                       | 229 ++++++++++++++++++
 .../RestApi/Themes/ThemeFontsController.php   | 209 +---------------
 2 files changed, 232 insertions(+), 206 deletions(-)
 create mode 100644 includes/Data/Fonts.php

diff --git a/includes/Data/Fonts.php b/includes/Data/Fonts.php
new file mode 100644
index 000000000..081d2f3ab
--- /dev/null
+++ b/includes/Data/Fonts.php
@@ -0,0 +1,229 @@
+<?php
+
+namespace NewfoldLabs\WP\Module\Onboarding\Data;
+
+final class Fonts
+{
+    /**
+     * This contains the different font variations for the theme.
+     *
+     * @var string
+     */
+    protected static $theme_fonts = array(
+        'yith-wonder' => array(
+            "modern-approachable" => array(
+                "label" => "Modern & approachable",
+                "matches" => "yith-wonder/theme-json",
+                "styles" => array(
+                    "typography" => array(
+                        "fontFamily" => "var(--wp--preset--font-family--mulish)"
+                    ),
+                    "blocks" => array(
+                        "core/heading" => array(
+                            "typography" => array(
+                                "fontFamily" => "var(--wp--preset--font-family--poppins)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "strong-sleek" => array(
+                "label" => "Strong & sleek",
+                "matches" => "yith-wonder/styles/01-blue-shades",
+                "styles" => array(
+                    "typography" => array(
+                        "fontFamily" => "var(--wp--preset--font-family--raleway)"
+                    ),
+                    "blocks" => array(
+                        "core/heading" => array(
+                            "typography" => array(
+                                "fontFamily" => "var(--wp--preset--font-family--oswald)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "stately-elevated" => array(
+                "label" => "Stately & elevated",
+                "matches" => "yith-wonder/styles/02-pink-shades",
+                "styles" => array(
+                    "typography" => array(
+                        "fontFamily" => "var(--wp--preset--font-family--source-sans-pro)"
+                    ),
+                    "blocks" => array(
+                        "core/heading" => array(
+                            "typography" => array(
+                                "fontFamily" => "var(--wp--preset--font-family--playfair)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "typewriter-crisp-midcentury" => array(
+                "label" => "Typewriter & crisp midcentury",
+                "matches" => "yith-wonder/styles/03-orange-shades",
+                "styles" => array(
+                    "typography" => array(
+                        "fontFamily" => "var(--wp--preset--font-family--jost)"
+                    ),
+                    "blocks" => array(
+                        "core/heading" => array(
+                            "typography" => array(
+                                "fontFamily" => "var(--wp--preset--font-family--solway)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "refined-traditional-newsletter" => array(
+                "label" => "Refined traditional newsletter",
+                "matches" => "yith-wonder/styles/04-black-shades",
+                "styles" => array(
+                    "typography" => array(
+                        "fontFamily" => "var(--wp--preset--font-family--jost)"
+                    ),
+                    "blocks" => array(
+                        "core/heading" => array(
+                            "typography" => array(
+                                "fontFamily" => "var(--wp--preset--font-family--merriweather)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "bold-stamp-slab" => array(
+                "label" => "Bold stamp & slab",
+                "matches" => "yith-wonder/styles/05-red-shades",
+                "styles" => array(
+                    "typography" => array(
+                        "fontFamily" => "var(--wp--preset--font-family--roboto-slab)"
+                    ),
+                    "blocks" => array(
+                        "core/heading" => array(
+                            "typography" => array(
+                                "fontFamily" => "var(--wp--preset--font-family--changa-one)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "fast-simple" => array(
+                "label" => "Fast & Simple",
+                "matches" => "newfold/onboarding-01",
+                "styles" => array(
+                    "typography" => array(
+                        "fontFamily" => "var(--wp--preset--font-family--system)"
+                    ),
+                    "blocks" => array(
+                        "core/heading" => array(
+                            "typography" => array(
+                                "fontFamily" => "var(--wp--preset--font-family--system)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "timeless-traditional" => array(
+                "label" => "Timeless & Traditional",
+                "matches" => "newfold/onboarding-02",
+                "styles" => array(
+                    "typography" => array(
+                        "fontFamily" => "var(--wp--preset--font-family--serif)"
+                    ),
+                    "blocks" => array(
+                        "core/heading" => array(
+                            "typography" => array(
+                                "fontFamily" => "var(--wp--preset--font-family--serif)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "sleek-sophisticated" => array(
+                "label" => "Sleek & Sophisticated",
+                "matches" => "newfold/onboarding-03",
+                "styles" => array(
+                    "typography" => array(
+                        "fontFamily" => "var(--wp--preset--font-family--dm-sans)"
+                    ),
+                    "blocks" => array(
+                        "core/heading" => array(
+                            "typography" => array(
+                                "fontFamily" => "var(--wp--preset--font-family--dm-sans)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "clear-crisp" => array(
+                "label" => "Clear & Crisp",
+                "matches" => "newfold/onboarding-04",
+                "styles" => array(
+                    "typography" => array(
+                        "fontFamily" => "var(--wp--preset--font-family--inter)"
+                    ),
+                    "blocks" => array(
+                        "core/heading" => array(
+                            "typography" => array(
+                                "fontFamily" => "var(--wp--preset--font-family--inter)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "retro-classy" => array(
+                "label" => "Retro & Classy",
+                "matches" => "newfold/onboarding-05",
+                "styles" => array(
+                    "typography" => array(
+                        "fontFamily" => "var(--wp--preset--font-family--league-spartan)"
+                    ),
+                    "blocks" => array(
+                        "core/heading" => array(
+                            "typography" => array(
+                                "fontFamily" => "var(--wp--preset--font-family--league-spartan)"
+                            )
+                        )
+                    )
+                )
+            ),
+            "defined-solid" => array(
+                "label" => "Defined & Solid",
+                "matches" => "newfold/onboarding-06",
+                "styles" => array(
+                    "typography" => array(
+                        "fontFamily" => "var(--wp--preset--font-family--roboto-slab)"
+                    ),
+                    "blocks" => array(
+                        "core/heading" => array(
+                            "typography" => array(
+                                "fontFamily" => "var(--wp--preset--font-family--roboto-slab)"
+                            )
+                        )
+                    )
+                )
+            )
+        )
+    );
+
+    /**
+     * Retrieves the active theme font variations.
+     *
+     * @return array|\WP_Error
+     */
+    public static function get_fonts_from_theme()
+    {
+        $active_theme = (\wp_get_theme())->get('TextDomain');
+        $pattern_slugs = self::$theme_fonts[$active_theme];
+
+        if (!isset($pattern_slugs)) {
+            return new \WP_Error(
+                'Theme Fonts not found',
+                'No WordPress Fonts are available for this theme.',
+                array('status' => 404)
+            );
+        }
+
+        return $pattern_slugs;
+    }
+}
diff --git a/includes/RestApi/Themes/ThemeFontsController.php b/includes/RestApi/Themes/ThemeFontsController.php
index 0b25654c2..2d7d7f344 100644
--- a/includes/RestApi/Themes/ThemeFontsController.php
+++ b/includes/RestApi/Themes/ThemeFontsController.php
@@ -2,6 +2,7 @@
 
 namespace NewfoldLabs\WP\Module\Onboarding\RestApi\Themes;
 
+use NewfoldLabs\WP\Module\Onboarding\Data\Fonts;
 use NewfoldLabs\WP\Module\Onboarding\Permissions;
 
 /**
@@ -32,208 +33,6 @@ class ThemeFontsController extends \WP_REST_Controller
      */
     protected $rest_extended_base = '/fonts';
 
-    /**
-     * This contains the different font variations for the theme.
-     *
-     * @var string
-     */
-    protected static $theme_fonts = array(
-        'yith-wonder' => array(
-            "modern-approachable"=> array(
-                "label"=> "Modern & approachable",
-                "matches"=> "yith-wonder/theme-json",
-                "styles"=> array(
-                    "typography"=> array(
-                        "fontFamily"=> "var(--wp--preset--font-family--mulish)"
-                    ),
-                    "blocks"=> array(
-                        "core/heading"=> array(
-                            "typography"=> array(
-                                "fontFamily"=> "var(--wp--preset--font-family--poppins)"
-                            )
-                        )
-                    )
-                )
-            ),
-            "strong-sleek"=> array(
-                "label"=> "Strong & sleek",
-                "matches"=> "yith-wonder/styles/01-blue-shades",
-                "styles"=> array(
-                    "typography"=> array(
-                        "fontFamily"=> "var(--wp--preset--font-family--raleway)"
-                    ),
-                    "blocks"=> array(
-                        "core/heading"=> array(
-                            "typography"=> array(
-                                "fontFamily"=> "var(--wp--preset--font-family--oswald)"
-                            )
-                        )
-                    )
-                )
-            ),
-            "stately-elevated"=> array(
-                "label"=> "Stately & elevated",
-                "matches"=> "yith-wonder/styles/02-pink-shades",
-                "styles"=> array(
-                    "typography"=> array(
-                        "fontFamily"=> "var(--wp--preset--font-family--source-sans-pro)"
-                    ),
-                    "blocks"=> array(
-                        "core/heading"=> array(
-                            "typography"=> array(
-                                "fontFamily"=> "var(--wp--preset--font-family--playfair)"
-                            )
-                        )
-                    )
-                )
-            ),
-            "typewriter-crisp-midcentury"=> array(
-                "label"=> "Typewriter & crisp midcentury",
-                "matches"=> "yith-wonder/styles/03-orange-shades",
-                "styles"=> array(
-                    "typography"=> array(
-                        "fontFamily"=> "var(--wp--preset--font-family--jost)"
-                    ),
-                    "blocks"=> array(
-                        "core/heading"=> array(
-                            "typography"=> array(
-                                "fontFamily"=> "var(--wp--preset--font-family--solway)"
-                            )
-                        )
-                    )
-                )
-            ),
-            "refined-traditional-newsletter"=> array(
-                "label"=> "Refined traditional newsletter",
-                "matches"=> "yith-wonder/styles/04-black-shades",
-                "styles"=> array(
-                    "typography"=> array(
-                        "fontFamily"=> "var(--wp--preset--font-family--jost)"
-                    ),
-                    "blocks"=> array(
-                        "core/heading"=> array(
-                            "typography"=> array(
-                                "fontFamily"=> "var(--wp--preset--font-family--merriweather)"
-                            )
-                        )
-                    )
-                )
-            ),
-            "bold-stamp-slab"=> array(
-                "label"=> "Bold stamp & slab",
-                "matches"=> "yith-wonder/styles/05-red-shades",
-                "styles"=> array(
-                    "typography"=> array(
-                        "fontFamily"=> "var(--wp--preset--font-family--roboto-slab)"
-                    ),
-                    "blocks"=> array(
-                        "core/heading"=> array(
-                            "typography"=> array(
-                                "fontFamily"=> "var(--wp--preset--font-family--changa-one)"
-                            )
-                        )
-                    )
-                )
-            ),
-            "fast-simple"=> array(
-                "label"=> "Fast & Simple",
-                "matches"=> "newfold/onboarding-01",
-                "styles"=> array(
-                    "typography"=> array(
-                        "fontFamily"=> "var(--wp--preset--font-family--system)"
-                    ),
-                    "blocks"=> array(
-                        "core/heading"=> array(
-                            "typography"=> array(
-                                "fontFamily"=> "var(--wp--preset--font-family--system)"
-                            )
-                        )
-                    )
-                )
-            ),
-            "timeless-traditional"=> array(
-                "label"=> "Timeless & Traditional",
-                "matches"=> "newfold/onboarding-02",
-                "styles"=> array(
-                    "typography"=> array(
-                        "fontFamily"=> "var(--wp--preset--font-family--serif)"
-                    ),
-                    "blocks"=> array(
-                        "core/heading"=> array(
-                            "typography"=> array(
-                                "fontFamily"=> "var(--wp--preset--font-family--serif)"
-                            )
-                        )
-                    )
-                )
-            ),
-            "sleek-sophisticated"=> array(
-                "label"=> "Sleek & Sophisticated",
-                "matches"=> "newfold/onboarding-03",
-                "styles"=> array(
-                    "typography"=> array(
-                        "fontFamily"=> "var(--wp--preset--font-family--dm-sans)"
-                    ),
-                    "blocks"=> array(
-                        "core/heading"=> array(
-                            "typography"=> array(
-                                "fontFamily"=> "var(--wp--preset--font-family--dm-sans)"
-                            )
-                        )
-                    )
-                )
-            ),
-            "clear-crisp"=> array(
-                "label"=> "Clear & Crisp",
-                "matches"=> "newfold/onboarding-04",
-                "styles"=> array(
-                    "typography"=> array(
-                        "fontFamily"=> "var(--wp--preset--font-family--inter)"
-                    ),
-                    "blocks"=> array(
-                        "core/heading"=> array(
-                            "typography"=> array(
-                                "fontFamily"=> "var(--wp--preset--font-family--inter)"
-                            )
-                        )
-                )
-                )
-            ),
-            "retro-classy"=> array(
-                "label"=> "Retro & Classy",
-                "matches"=> "newfold/onboarding-05",
-                "styles"=> array(
-                    "typography"=> array(
-                        "fontFamily"=> "var(--wp--preset--font-family--league-spartan)"
-                    ),
-                    "blocks"=> array(
-                        "core/heading"=> array(
-                            "typography"=> array(
-                                "fontFamily"=> "var(--wp--preset--font-family--league-spartan)"
-                            )
-                        )
-                    )
-                )
-            ),
-            "defined-solid"=> array(
-                "label"=> "Defined & Solid",
-                "matches"=> "newfold/onboarding-06",
-                "styles"=> array(
-                    "typography"=> array(
-                        "fontFamily"=> "var(--wp--preset--font-family--roboto-slab)"
-                    ),
-                    "blocks"=> array(
-                        "core/heading"=> array(
-                            "typography"=> array(
-                                "fontFamily"=> "var(--wp--preset--font-family--roboto-slab)"
-                            )
-                        )
-                    )
-                )
-            )
-        )
-    );
-
     /**
      * Registers routes for ThemeColorsController
      */
@@ -259,9 +58,7 @@ public function register_routes()
      */
     public function get_theme_fonts()
     {
-        $active_theme = (\wp_get_theme())->get('TextDomain');
-        $pattern_slugs = self::$theme_fonts[$active_theme];
-
-        return $pattern_slugs;
+        $theme_font_palettes = Fonts::get_fonts_from_theme();
+        return $theme_font_palettes;
     }
 }

From 3e8ae7fc1dd305c9dcd64a8dcdeacabbc4157af3 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 18 Oct 2022 17:47:09 +0530
Subject: [PATCH 12/20] Added Typography in Drawer

---
 .../Drawer/DrawerPanel/DesignTypography.js    | 33 +++++++++++++------
 .../components/Drawer/stylesheet.scss         |  3 +-
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index 2467ce98f..01a2e8948 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -1,15 +1,15 @@
 import { __ } from '@wordpress/i18n';
 import { FlexItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 
 import { store as nfdOnboardingStore } from '../../../store';
 import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes';
-import { toStyles } from '../../../utils/global-styles/use-global-styles-output';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 
 const DesignTypography = () => {
 
+	const drawerFontOptions = useRef();
 	const [rerender, doRerender] = useState(0);
 	const [isLoaded, setIsLoaded] = useState(false);
 	const [selectedFont, setSelectedFont] = useState();
@@ -55,6 +55,11 @@ const DesignTypography = () => {
 				useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
 			);
 		}
+		let stylesCustom = selectedGlobalStyle?.settings?.styles[0]?.css;
+		if (stylesCustom) {
+			const regex = /--wp--preset--font-family.*;/;
+			drawerFontOptions.current.setAttribute('style', stylesCustom.match(regex));
+		}
 		setIsLoaded(true);
 	};
 
@@ -64,7 +69,6 @@ const DesignTypography = () => {
 	
 	const handleClick = async (fontStyle, selectedGlobalStyle = globalStyles, fontPalettesCopy = fontPalettes) => {
 		setSelectedFont(fontStyle);
-
 		let globalStylesCopy = selectedGlobalStyle;
 		globalStylesCopy.styles.typography.fontFamily = fontPalettesCopy[fontStyle]?.styles?.typography?.fontFamily;
 		globalStylesCopy.styles.blocks['core/heading'].typography.fontFamily = 
@@ -84,12 +88,25 @@ const DesignTypography = () => {
 	function buildPalettes() {
 		let paletteRenderedList = [];
 		for (const fontStyle in fontPalettes) {
+			const splitLabel = fontPalettes[fontStyle]?.label.split("&", 2);
+
 			paletteRenderedList.push(
 				<div className={`font-palette ${selectedFont == fontStyle ? 'font-palette-selected' : ''} `}
 					onClick={(e) => handleClick(fontStyle)}>
-					<div className='font-palette__icon'> Aa </div>
+					<div className='font-palette__icon'
+						style={{ fontFamily: fontPalettes[fontStyle]?.styles?.typography?.fontFamily }}>
+						Aa 
+					</div>
 					<div className='font-palette__name'>
-						{fontPalettes[fontStyle]?.label}
+						<span
+							style={{ fontFamily: fontPalettes[fontStyle]?.styles.blocks['core/heading'].typography.fontFamily }}>
+							{splitLabel[0]}
+						</span>
+						{splitLabel[1] ? '&' : ''}
+						<span
+							style={{ fontFamily: fontPalettes[fontStyle]?.styles?.typography?.fontFamily }}>
+							{splitLabel[1] ?? ''}
+						</span>
 					</div>
 				</div>
 			);
@@ -112,12 +129,8 @@ const DesignTypography = () => {
 	}
 
 	return (
-		<div className='theme-fonts--drawer'>
+		<div ref={drawerFontOptions} className='theme-fonts--drawer'>
 			<h2>{__('Font Palettes', 'wp-module-onboarding')}</h2>
-			<FlexItem
-				className="edit-site-global-styles-screen-typography__indicator"
-				style={{ fontFamily: 'Mulish' ?? 'serif' }}
-			>{__('Aac')}</FlexItem>
 			{fontPalettes && buildPalettes()}
 			{fontPalettes && buildCustomPalette()}
 			<div className='custom-font-palette--hidden'>
diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss
index e6a9482fc..83998ba27 100644
--- a/src/OnboardingSPA/components/Drawer/stylesheet.scss
+++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss
@@ -326,8 +326,9 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 
 // Design Font Palette Step
 
-.theme-colors--drawer {
+.theme-fonts--drawer {
     padding: 0 4px;
+    border: none !important;
 }
 
 .font-palette {

From 379c7ebbc91235a9f09e111b2dd25529b36ac90a Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 18 Oct 2022 17:48:54 +0530
Subject: [PATCH 13/20] Update DesignTypography.js

---
 .../components/Drawer/DrawerPanel/DesignTypography.js          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index 01a2e8948..1b07153a5 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -89,7 +89,8 @@ const DesignTypography = () => {
 		let paletteRenderedList = [];
 		for (const fontStyle in fontPalettes) {
 			const splitLabel = fontPalettes[fontStyle]?.label.split("&", 2);
-
+			if(splitLabel.length == 0)
+				continue;
 			paletteRenderedList.push(
 				<div className={`font-palette ${selectedFont == fontStyle ? 'font-palette-selected' : ''} `}
 					onClick={(e) => handleClick(fontStyle)}>

From 4fa60e7463456c024a4f5b5895f4296ec448ee65 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 21 Oct 2022 17:11:35 +0530
Subject: [PATCH 14/20] Added Reset Button

---
 .../Drawer/DrawerPanel/DesignTypography.js    | 29 +++++++++++++++++++
 .../components/Drawer/stylesheet.scss         | 17 +++++++++++
 2 files changed, 46 insertions(+)

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index 1b07153a5..df0c975f2 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -85,6 +85,30 @@ const DesignTypography = () => {
 		doRerender(1);
 	};
 
+
+	async function resetFonts() {
+		setSelectedFont('');
+		const globalStyles = await getGlobalStyles();
+		let selectedGlobalStyle;
+		if (currentData?.data?.theme?.variation) {
+			selectedGlobalStyle = globalStyles.body.filter(
+				(globalStyle) =>
+					globalStyle.title === currentData.data.theme.variation
+			)[0];
+		} else {
+			selectedGlobalStyle = globalStyles.body[0];
+		}
+		setGlobalStyles(selectedGlobalStyle);
+		updatePreviewSettings(
+			useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
+		);
+
+		currentData.data.typography.slug = '';
+		currentData.data.typography.data = [];
+		setCurrentOnboardingData(currentData);
+		doRerender(1);
+	}
+
 	function buildPalettes() {
 		let paletteRenderedList = [];
 		for (const fontStyle in fontPalettes) {
@@ -132,6 +156,11 @@ const DesignTypography = () => {
 	return (
 		<div ref={drawerFontOptions} className='theme-fonts--drawer'>
 			<h2>{__('Font Palettes', 'wp-module-onboarding')}</h2>
+			{/* { selectedFont && 
+				<div className='theme-fonts--drawer--reset' onClick={resetFonts}>
+					<div>Reset Button</div>
+				</div>
+			} */}
 			{fontPalettes && buildPalettes()}
 			{fontPalettes && buildCustomPalette()}
 			<div className='custom-font-palette--hidden'>
diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss
index 83998ba27..75ff1df0a 100644
--- a/src/OnboardingSPA/components/Drawer/stylesheet.scss
+++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss
@@ -329,6 +329,23 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 .theme-fonts--drawer {
     padding: 0 4px;
     border: none !important;
+
+    &--reset {
+        width: 40%;
+        height: 30px;
+        display: flex;
+        color: black;
+        cursor: pointer;
+        margin-left: 4px;
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+        background-color: white;
+
+        &:hover {
+            background-color: var(--nfd-onboarding-drawer-icon-fill);
+        }
+    }
 }
 
 .font-palette {

From 708f60f7c5033a6c69fc1885b6e8b07d9104c087 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 21 Oct 2022 17:15:12 +0530
Subject: [PATCH 15/20] Few Comments

---
 .../components/Drawer/DrawerPanel/DesignTypography.js       | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index df0c975f2..d3e8b8d2e 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -1,5 +1,4 @@
 import { __ } from '@wordpress/i18n';
-import { FlexItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect, useRef } from '@wordpress/element';
 
@@ -57,6 +56,7 @@ const DesignTypography = () => {
 		}
 		let stylesCustom = selectedGlobalStyle?.settings?.styles[0]?.css;
 		if (stylesCustom) {
+			// Loads in all CSS variables related to fontFamily
 			const regex = /--wp--preset--font-family.*;/;
 			drawerFontOptions.current.setAttribute('style', stylesCustom.match(regex));
 		}
@@ -69,12 +69,14 @@ const DesignTypography = () => {
 	
 	const handleClick = async (fontStyle, selectedGlobalStyle = globalStyles, fontPalettesCopy = fontPalettes) => {
 		setSelectedFont(fontStyle);
+		// Changes the Global Styles to Recompute css properties
 		let globalStylesCopy = selectedGlobalStyle;
 		globalStylesCopy.styles.typography.fontFamily = fontPalettesCopy[fontStyle]?.styles?.typography?.fontFamily;
 		globalStylesCopy.styles.blocks['core/heading'].typography.fontFamily = 
 			fontPalettesCopy[fontStyle]?.styles.blocks['core/heading'].typography.fontFamily;
-		
 		setGlobalStyles(globalStylesCopy);
+
+		// Saves the data to the Store
 		currentData.data.typography.slug = fontStyle;
 		currentData.data.typography.data = fontPalettesCopy[fontStyle];
 		setCurrentOnboardingData(currentData);

From ffea65c81ea7c01bdbb4ec2a50a4b9fa86aab52e Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 21 Oct 2022 17:16:13 +0530
Subject: [PATCH 16/20] Ran phpcbf

---
 includes/Data/Fonts.php                       | 414 +++++++++---------
 .../RestApi/Themes/ThemeFontsController.php   |  90 ++--
 2 files changed, 252 insertions(+), 252 deletions(-)

diff --git a/includes/Data/Fonts.php b/includes/Data/Fonts.php
index 081d2f3ab..d559e8f66 100644
--- a/includes/Data/Fonts.php
+++ b/includes/Data/Fonts.php
@@ -4,226 +4,226 @@
 
 final class Fonts
 {
-    /**
-     * This contains the different font variations for the theme.
-     *
-     * @var string
-     */
-    protected static $theme_fonts = array(
-        'yith-wonder' => array(
-            "modern-approachable" => array(
-                "label" => "Modern & approachable",
-                "matches" => "yith-wonder/theme-json",
-                "styles" => array(
-                    "typography" => array(
-                        "fontFamily" => "var(--wp--preset--font-family--mulish)"
-                    ),
-                    "blocks" => array(
-                        "core/heading" => array(
-                            "typography" => array(
-                                "fontFamily" => "var(--wp--preset--font-family--poppins)"
-                            )
-                        )
+     /**
+      * This contains the different font variations for the theme.
+      *
+      * @var string
+      */
+     protected static $theme_fonts = array(
+          'yith-wonder' => array(
+               "modern-approachable" => array(
+                    "label" => "Modern & approachable",
+                    "matches" => "yith-wonder/theme-json",
+                    "styles" => array(
+                         "typography" => array(
+                              "fontFamily" => "var(--wp--preset--font-family--mulish)"
+                         ),
+                         "blocks" => array(
+                              "core/heading" => array(
+                                   "typography" => array(
+                                        "fontFamily" => "var(--wp--preset--font-family--poppins)"
+                                   )
+                              )
+                         )
                     )
-                )
-            ),
-            "strong-sleek" => array(
-                "label" => "Strong & sleek",
-                "matches" => "yith-wonder/styles/01-blue-shades",
-                "styles" => array(
-                    "typography" => array(
-                        "fontFamily" => "var(--wp--preset--font-family--raleway)"
-                    ),
-                    "blocks" => array(
-                        "core/heading" => array(
-                            "typography" => array(
-                                "fontFamily" => "var(--wp--preset--font-family--oswald)"
-                            )
-                        )
+               ),
+               "strong-sleek" => array(
+                    "label" => "Strong & sleek",
+                    "matches" => "yith-wonder/styles/01-blue-shades",
+                    "styles" => array(
+                         "typography" => array(
+                              "fontFamily" => "var(--wp--preset--font-family--raleway)"
+                         ),
+                         "blocks" => array(
+                              "core/heading" => array(
+                                   "typography" => array(
+                                        "fontFamily" => "var(--wp--preset--font-family--oswald)"
+                                   )
+                              )
+                         )
                     )
-                )
-            ),
-            "stately-elevated" => array(
-                "label" => "Stately & elevated",
-                "matches" => "yith-wonder/styles/02-pink-shades",
-                "styles" => array(
-                    "typography" => array(
-                        "fontFamily" => "var(--wp--preset--font-family--source-sans-pro)"
-                    ),
-                    "blocks" => array(
-                        "core/heading" => array(
-                            "typography" => array(
-                                "fontFamily" => "var(--wp--preset--font-family--playfair)"
-                            )
-                        )
+               ),
+               "stately-elevated" => array(
+                    "label" => "Stately & elevated",
+                    "matches" => "yith-wonder/styles/02-pink-shades",
+                    "styles" => array(
+                         "typography" => array(
+                              "fontFamily" => "var(--wp--preset--font-family--source-sans-pro)"
+                         ),
+                         "blocks" => array(
+                              "core/heading" => array(
+                                   "typography" => array(
+                                        "fontFamily" => "var(--wp--preset--font-family--playfair)"
+                                   )
+                              )
+                         )
                     )
-                )
-            ),
-            "typewriter-crisp-midcentury" => array(
-                "label" => "Typewriter & crisp midcentury",
-                "matches" => "yith-wonder/styles/03-orange-shades",
-                "styles" => array(
-                    "typography" => array(
-                        "fontFamily" => "var(--wp--preset--font-family--jost)"
-                    ),
-                    "blocks" => array(
-                        "core/heading" => array(
-                            "typography" => array(
-                                "fontFamily" => "var(--wp--preset--font-family--solway)"
-                            )
-                        )
+               ),
+               "typewriter-crisp-midcentury" => array(
+                    "label" => "Typewriter & crisp midcentury",
+                    "matches" => "yith-wonder/styles/03-orange-shades",
+                    "styles" => array(
+                         "typography" => array(
+                              "fontFamily" => "var(--wp--preset--font-family--jost)"
+                         ),
+                         "blocks" => array(
+                              "core/heading" => array(
+                                   "typography" => array(
+                                        "fontFamily" => "var(--wp--preset--font-family--solway)"
+                                   )
+                              )
+                         )
                     )
-                )
-            ),
-            "refined-traditional-newsletter" => array(
-                "label" => "Refined traditional newsletter",
-                "matches" => "yith-wonder/styles/04-black-shades",
-                "styles" => array(
-                    "typography" => array(
-                        "fontFamily" => "var(--wp--preset--font-family--jost)"
-                    ),
-                    "blocks" => array(
-                        "core/heading" => array(
-                            "typography" => array(
-                                "fontFamily" => "var(--wp--preset--font-family--merriweather)"
-                            )
-                        )
+               ),
+               "refined-traditional-newsletter" => array(
+                    "label" => "Refined traditional newsletter",
+                    "matches" => "yith-wonder/styles/04-black-shades",
+                    "styles" => array(
+                         "typography" => array(
+                              "fontFamily" => "var(--wp--preset--font-family--jost)"
+                         ),
+                         "blocks" => array(
+                              "core/heading" => array(
+                                   "typography" => array(
+                                        "fontFamily" => "var(--wp--preset--font-family--merriweather)"
+                                   )
+                              )
+                         )
                     )
-                )
-            ),
-            "bold-stamp-slab" => array(
-                "label" => "Bold stamp & slab",
-                "matches" => "yith-wonder/styles/05-red-shades",
-                "styles" => array(
-                    "typography" => array(
-                        "fontFamily" => "var(--wp--preset--font-family--roboto-slab)"
-                    ),
-                    "blocks" => array(
-                        "core/heading" => array(
-                            "typography" => array(
-                                "fontFamily" => "var(--wp--preset--font-family--changa-one)"
-                            )
-                        )
+               ),
+               "bold-stamp-slab" => array(
+                    "label" => "Bold stamp & slab",
+                    "matches" => "yith-wonder/styles/05-red-shades",
+                    "styles" => array(
+                         "typography" => array(
+                              "fontFamily" => "var(--wp--preset--font-family--roboto-slab)"
+                         ),
+                         "blocks" => array(
+                              "core/heading" => array(
+                                   "typography" => array(
+                                        "fontFamily" => "var(--wp--preset--font-family--changa-one)"
+                                   )
+                              )
+                         )
                     )
-                )
-            ),
-            "fast-simple" => array(
-                "label" => "Fast & Simple",
-                "matches" => "newfold/onboarding-01",
-                "styles" => array(
-                    "typography" => array(
-                        "fontFamily" => "var(--wp--preset--font-family--system)"
-                    ),
-                    "blocks" => array(
-                        "core/heading" => array(
-                            "typography" => array(
-                                "fontFamily" => "var(--wp--preset--font-family--system)"
-                            )
-                        )
+               ),
+               "fast-simple" => array(
+                    "label" => "Fast & Simple",
+                    "matches" => "newfold/onboarding-01",
+                    "styles" => array(
+                         "typography" => array(
+                              "fontFamily" => "var(--wp--preset--font-family--system)"
+                         ),
+                         "blocks" => array(
+                              "core/heading" => array(
+                                   "typography" => array(
+                                        "fontFamily" => "var(--wp--preset--font-family--system)"
+                                   )
+                              )
+                         )
                     )
-                )
-            ),
-            "timeless-traditional" => array(
-                "label" => "Timeless & Traditional",
-                "matches" => "newfold/onboarding-02",
-                "styles" => array(
-                    "typography" => array(
-                        "fontFamily" => "var(--wp--preset--font-family--serif)"
-                    ),
-                    "blocks" => array(
-                        "core/heading" => array(
-                            "typography" => array(
-                                "fontFamily" => "var(--wp--preset--font-family--serif)"
-                            )
-                        )
+               ),
+               "timeless-traditional" => array(
+                    "label" => "Timeless & Traditional",
+                    "matches" => "newfold/onboarding-02",
+                    "styles" => array(
+                         "typography" => array(
+                              "fontFamily" => "var(--wp--preset--font-family--serif)"
+                         ),
+                         "blocks" => array(
+                              "core/heading" => array(
+                                   "typography" => array(
+                                        "fontFamily" => "var(--wp--preset--font-family--serif)"
+                                   )
+                              )
+                         )
                     )
-                )
-            ),
-            "sleek-sophisticated" => array(
-                "label" => "Sleek & Sophisticated",
-                "matches" => "newfold/onboarding-03",
-                "styles" => array(
-                    "typography" => array(
-                        "fontFamily" => "var(--wp--preset--font-family--dm-sans)"
-                    ),
-                    "blocks" => array(
-                        "core/heading" => array(
-                            "typography" => array(
-                                "fontFamily" => "var(--wp--preset--font-family--dm-sans)"
-                            )
-                        )
+               ),
+               "sleek-sophisticated" => array(
+                    "label" => "Sleek & Sophisticated",
+                    "matches" => "newfold/onboarding-03",
+                    "styles" => array(
+                         "typography" => array(
+                              "fontFamily" => "var(--wp--preset--font-family--dm-sans)"
+                         ),
+                         "blocks" => array(
+                              "core/heading" => array(
+                                   "typography" => array(
+                                        "fontFamily" => "var(--wp--preset--font-family--dm-sans)"
+                                   )
+                              )
+                         )
                     )
-                )
-            ),
-            "clear-crisp" => array(
-                "label" => "Clear & Crisp",
-                "matches" => "newfold/onboarding-04",
-                "styles" => array(
-                    "typography" => array(
-                        "fontFamily" => "var(--wp--preset--font-family--inter)"
-                    ),
-                    "blocks" => array(
-                        "core/heading" => array(
-                            "typography" => array(
-                                "fontFamily" => "var(--wp--preset--font-family--inter)"
-                            )
-                        )
+               ),
+               "clear-crisp" => array(
+                    "label" => "Clear & Crisp",
+                    "matches" => "newfold/onboarding-04",
+                    "styles" => array(
+                         "typography" => array(
+                              "fontFamily" => "var(--wp--preset--font-family--inter)"
+                         ),
+                         "blocks" => array(
+                              "core/heading" => array(
+                                   "typography" => array(
+                                        "fontFamily" => "var(--wp--preset--font-family--inter)"
+                                   )
+                              )
+                         )
                     )
-                )
-            ),
-            "retro-classy" => array(
-                "label" => "Retro & Classy",
-                "matches" => "newfold/onboarding-05",
-                "styles" => array(
-                    "typography" => array(
-                        "fontFamily" => "var(--wp--preset--font-family--league-spartan)"
-                    ),
-                    "blocks" => array(
-                        "core/heading" => array(
-                            "typography" => array(
-                                "fontFamily" => "var(--wp--preset--font-family--league-spartan)"
-                            )
-                        )
+               ),
+               "retro-classy" => array(
+                    "label" => "Retro & Classy",
+                    "matches" => "newfold/onboarding-05",
+                    "styles" => array(
+                         "typography" => array(
+                              "fontFamily" => "var(--wp--preset--font-family--league-spartan)"
+                         ),
+                         "blocks" => array(
+                              "core/heading" => array(
+                                   "typography" => array(
+                                        "fontFamily" => "var(--wp--preset--font-family--league-spartan)"
+                                   )
+                              )
+                         )
                     )
-                )
-            ),
-            "defined-solid" => array(
-                "label" => "Defined & Solid",
-                "matches" => "newfold/onboarding-06",
-                "styles" => array(
-                    "typography" => array(
-                        "fontFamily" => "var(--wp--preset--font-family--roboto-slab)"
-                    ),
-                    "blocks" => array(
-                        "core/heading" => array(
-                            "typography" => array(
-                                "fontFamily" => "var(--wp--preset--font-family--roboto-slab)"
-                            )
-                        )
+               ),
+               "defined-solid" => array(
+                    "label" => "Defined & Solid",
+                    "matches" => "newfold/onboarding-06",
+                    "styles" => array(
+                         "typography" => array(
+                              "fontFamily" => "var(--wp--preset--font-family--roboto-slab)"
+                         ),
+                         "blocks" => array(
+                              "core/heading" => array(
+                                   "typography" => array(
+                                        "fontFamily" => "var(--wp--preset--font-family--roboto-slab)"
+                                   )
+                              )
+                         )
                     )
-                )
-            )
-        )
-    );
+               )
+          )
+     );
 
-    /**
-     * Retrieves the active theme font variations.
-     *
-     * @return array|\WP_Error
-     */
-    public static function get_fonts_from_theme()
-    {
-        $active_theme = (\wp_get_theme())->get('TextDomain');
-        $pattern_slugs = self::$theme_fonts[$active_theme];
+     /**
+      * Retrieves the active theme font variations.
+      *
+      * @return array|\WP_Error
+      */
+     public static function get_fonts_from_theme()
+     {
+          $active_theme = (\wp_get_theme())->get('TextDomain');
+          $pattern_slugs = self::$theme_fonts[$active_theme];
 
-        if (!isset($pattern_slugs)) {
-            return new \WP_Error(
-                'Theme Fonts not found',
-                'No WordPress Fonts are available for this theme.',
-                array('status' => 404)
-            );
-        }
+          if (!isset($pattern_slugs)) {
+               return new \WP_Error(
+                    'Theme Fonts not found',
+                    'No WordPress Fonts are available for this theme.',
+                    array('status' => 404)
+               );
+          }
 
-        return $pattern_slugs;
-    }
+          return $pattern_slugs;
+     }
 }
diff --git a/includes/RestApi/Themes/ThemeFontsController.php b/includes/RestApi/Themes/ThemeFontsController.php
index 2d7d7f344..e35480535 100644
--- a/includes/RestApi/Themes/ThemeFontsController.php
+++ b/includes/RestApi/Themes/ThemeFontsController.php
@@ -11,54 +11,54 @@
 class ThemeFontsController extends \WP_REST_Controller
 {
 
-    /**
-     * The namespace of this controller's route.
-     *
-     * @var string
-     */
-    protected $namespace = 'newfold-onboarding/v1';
+     /**
+      * The namespace of this controller's route.
+      *
+      * @var string
+      */
+     protected $namespace = 'newfold-onboarding/v1';
 
-    /**
-     * The base of this controller's route.
-     *
-     * @var string
-     */
-    protected $rest_base = '/themes';
+     /**
+      * The base of this controller's route.
+      *
+      * @var string
+      */
+     protected $rest_base = '/themes';
 
 
-    /**
-     * The extended base of this controller's route.
-     *
-     * @var string
-     */
-    protected $rest_extended_base = '/fonts';
+     /**
+      * The extended base of this controller's route.
+      *
+      * @var string
+      */
+     protected $rest_extended_base = '/fonts';
 
-    /**
-     * Registers routes for ThemeColorsController
-     */
-    public function register_routes()
-    {
-        \register_rest_route(
-            $this->namespace,
-            $this->rest_base . $this->rest_extended_base,
-            array(
-                array(
-                    'methods'  => \WP_REST_Server::READABLE,
-                    'callback' => array($this, 'get_theme_fonts'),
-                    'permission_callback' => array(Permissions::class, 'rest_is_authorized_admin'),
-                ),
-            )
-        );
-    }
+     /**
+      * Registers routes for ThemeColorsController
+      */
+     public function register_routes()
+     {
+          \register_rest_route(
+               $this->namespace,
+               $this->rest_base . $this->rest_extended_base,
+               array(
+                    array(
+                         'methods'  => \WP_REST_Server::READABLE,
+                         'callback' => array($this, 'get_theme_fonts'),
+                         'permission_callback' => array(Permissions::class, 'rest_is_authorized_admin'),
+                    ),
+               )
+          );
+     }
 
-    /**
-     * Retrieves the active theme font variations.
-     *
-     * @return array|\WP_Error
-     */
-    public function get_theme_fonts()
-    {
-        $theme_font_palettes = Fonts::get_fonts_from_theme();
-        return $theme_font_palettes;
-    }
+     /**
+      * Retrieves the active theme font variations.
+      *
+      * @return array|\WP_Error
+      */
+     public function get_theme_fonts()
+     {
+          $theme_font_palettes = Fonts::get_fonts_from_theme();
+          return $theme_font_palettes;
+     }
 }

From 7541ba49b0639ef1b4ca4e708b0b4c6307549f4b Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Wed, 9 Nov 2022 13:34:33 +0530
Subject: [PATCH 17/20] Review Comments

---
 includes/Data/Fonts.php                          | 12 +-----------
 includes/RestApi/Themes/ThemeFontsController.php |  8 ++++++++
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/includes/Data/Fonts.php b/includes/Data/Fonts.php
index d559e8f66..99eb71429 100644
--- a/includes/Data/Fonts.php
+++ b/includes/Data/Fonts.php
@@ -214,16 +214,6 @@ final class Fonts
      public static function get_fonts_from_theme()
      {
           $active_theme = (\wp_get_theme())->get('TextDomain');
-          $pattern_slugs = self::$theme_fonts[$active_theme];
-
-          if (!isset($pattern_slugs)) {
-               return new \WP_Error(
-                    'Theme Fonts not found',
-                    'No WordPress Fonts are available for this theme.',
-                    array('status' => 404)
-               );
-          }
-
-          return $pattern_slugs;
+          return isset(self::$theme_fonts[$active_theme]) ? self::$theme_fonts[$active_theme] : false;
      }
 }
diff --git a/includes/RestApi/Themes/ThemeFontsController.php b/includes/RestApi/Themes/ThemeFontsController.php
index e35480535..62d172e1e 100644
--- a/includes/RestApi/Themes/ThemeFontsController.php
+++ b/includes/RestApi/Themes/ThemeFontsController.php
@@ -59,6 +59,14 @@ public function register_routes()
      public function get_theme_fonts()
      {
           $theme_font_palettes = Fonts::get_fonts_from_theme();
+
+          if(!$theme_font_palettes)
+               return new \WP_Error(
+                    'Theme Fonts not found',
+                    'No WordPress Fonts are available for this theme.',
+                    array('status' => 404)
+               );
+
           return $theme_font_palettes;
      }
 }

From 06b6f3fec481e7358942972acd277e7931cb4975 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Wed, 9 Nov 2022 14:57:43 +0530
Subject: [PATCH 18/20] Added a Theme folder in Data

---
 includes/Data/{ => Themes}/Colors.php             | 2 +-
 includes/Data/{ => Themes}/Fonts.php              | 2 +-
 includes/RestApi/Themes/ThemeColorsController.php | 2 +-
 includes/RestApi/Themes/ThemeFontsController.php  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)
 rename includes/Data/{ => Themes}/Colors.php (97%)
 rename includes/Data/{ => Themes}/Fonts.php (99%)

diff --git a/includes/Data/Colors.php b/includes/Data/Themes/Colors.php
similarity index 97%
rename from includes/Data/Colors.php
rename to includes/Data/Themes/Colors.php
index 9c550a743..770cc27b8 100644
--- a/includes/Data/Colors.php
+++ b/includes/Data/Themes/Colors.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace NewfoldLabs\WP\Module\Onboarding\Data;
+namespace NewfoldLabs\WP\Module\Onboarding\Data\Themes;
 
 final class Colors
 {
diff --git a/includes/Data/Fonts.php b/includes/Data/Themes/Fonts.php
similarity index 99%
rename from includes/Data/Fonts.php
rename to includes/Data/Themes/Fonts.php
index 99eb71429..f9ad44122 100644
--- a/includes/Data/Fonts.php
+++ b/includes/Data/Themes/Fonts.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace NewfoldLabs\WP\Module\Onboarding\Data;
+namespace NewfoldLabs\WP\Module\Onboarding\Data\Themes;
 
 final class Fonts
 {
diff --git a/includes/RestApi/Themes/ThemeColorsController.php b/includes/RestApi/Themes/ThemeColorsController.php
index d4bb068d1..b6dda4429 100644
--- a/includes/RestApi/Themes/ThemeColorsController.php
+++ b/includes/RestApi/Themes/ThemeColorsController.php
@@ -3,7 +3,7 @@
 namespace NewfoldLabs\WP\Module\Onboarding\RestApi\Themes;
 
 use NewfoldLabs\WP\Module\Onboarding\Permissions;
-use NewfoldLabs\WP\Module\Onboarding\Data\Colors;
+use NewfoldLabs\WP\Module\Onboarding\Data\Themes\Colors;
 
 /**
  * Class ThemeColorsController
diff --git a/includes/RestApi/Themes/ThemeFontsController.php b/includes/RestApi/Themes/ThemeFontsController.php
index 62d172e1e..fd841578b 100644
--- a/includes/RestApi/Themes/ThemeFontsController.php
+++ b/includes/RestApi/Themes/ThemeFontsController.php
@@ -2,7 +2,7 @@
 
 namespace NewfoldLabs\WP\Module\Onboarding\RestApi\Themes;
 
-use NewfoldLabs\WP\Module\Onboarding\Data\Fonts;
+use NewfoldLabs\WP\Module\Onboarding\Data\Themes\Fonts;
 use NewfoldLabs\WP\Module\Onboarding\Permissions;
 
 /**

From b0de53a6ceb2cf49dff41c3d2553934a7f3312bf Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 11 Nov 2022 12:25:42 +0530
Subject: [PATCH 19/20] Added Support for the new release

---
 .../Drawer/DrawerPanel/DesignTypography.js    | 19 ++++++++++++++++++-
 .../global-styles/use-global-styles-output.js |  9 ++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index d3e8b8d2e..5d922fa21 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -69,6 +69,7 @@ const DesignTypography = () => {
 	
 	const handleClick = async (fontStyle, selectedGlobalStyle = globalStyles, fontPalettesCopy = fontPalettes) => {
 		setSelectedFont(fontStyle);
+
 		// Changes the Global Styles to Recompute css properties
 		let globalStylesCopy = selectedGlobalStyle;
 		globalStylesCopy.styles.typography.fontFamily = fontPalettesCopy[fontStyle]?.styles?.typography?.fontFamily;
@@ -79,11 +80,27 @@ const DesignTypography = () => {
 		// Saves the data to the Store
 		currentData.data.typography.slug = fontStyle;
 		currentData.data.typography.data = fontPalettesCopy[fontStyle];
-		setCurrentOnboardingData(currentData);
+
+		// Remove Existing Custom Font CSS
+		const result = storedPreviewSettings.settings.styles.filter((style) => {
+			if (!(style.hasOwnProperty('id') && (style.id === 'customFontProperty')))
+				return style;
+		});
+
+		// Add the font CSS changes to Preview Settings
+		storedPreviewSettings.settings.styles = [
+			...result,
+			{
+				id: 'customFontProperty',
+				css: `body {font-family: ${fontPalettesCopy[fontStyle]?.styles?.typography?.fontFamily} !important; }
+						h6 { font-family: ${fontPalettesCopy[fontStyle]?.styles?.blocks['core/heading']?.typography?.fontFamily} !important; }`,
+			},
+		]
 
 		updatePreviewSettings(
 			useGlobalStylesOutput(globalStylesCopy, storedPreviewSettings)
 		);
+		setCurrentOnboardingData(currentData);
 		doRerender(1);
 	};
 
diff --git a/src/OnboardingSPA/utils/global-styles/use-global-styles-output.js b/src/OnboardingSPA/utils/global-styles/use-global-styles-output.js
index cf28975dc..f6614f7fe 100644
--- a/src/OnboardingSPA/utils/global-styles/use-global-styles-output.js
+++ b/src/OnboardingSPA/utils/global-styles/use-global-styles-output.js
@@ -499,13 +499,20 @@ export function useGlobalStylesOutput(
 		hasBlockGapSupport
 	);
 
+	const result = storedPreviewSettings.settings.styles.filter((style) => {
+		if (!(style.hasOwnProperty('id') && (style.id === 'customProperty' || style.id === 'globalStyle')))
+			return style;
+	});
+	
 	const stylesheets = [
-		...storedPreviewSettings.settings.styles,
+		...result,
 		{
+			id: 'customProperty',
 			css: customProperties,
 			isGlobalStyles: true,
 		},
 		{
+			id: 'globalStyle',
 			css: globalStyles,
 			isGlobalStyles: true,
 		},

From f909e0cc9ebe32e3915296bc71843be0879d6e48 Mon Sep 17 00:00:00 2001
From: arunshenoy99 <devarunshenoy99@gmail.com>
Date: Tue, 15 Nov 2022 14:43:29 +0530
Subject: [PATCH 20/20] fix formatting issues

---
 includes/Data/Themes/Colors.php               |  141 ++-
 includes/Data/Themes/Fonts.php                |  425 ++++---
 .../RestApi/Themes/ThemeColorsController.php  |   92 +-
 .../RestApi/Themes/ThemeFontsController.php   |  105 +-
 .../Drawer/DrawerPanel/DesignTypography.js    |  241 ++--
 .../components/Drawer/stylesheet.scss         | 1082 +++++++++--------
 .../pages/Steps/DesignTypography/index.js     |   92 +-
 .../Steps/DesignTypography/stylesheet.scss    |  106 +-
 src/OnboardingSPA/utils/api/themes.js         |   12 +-
 .../global-styles/use-global-styles-output.js |   13 +-
 10 files changed, 1179 insertions(+), 1130 deletions(-)

diff --git a/includes/Data/Themes/Colors.php b/includes/Data/Themes/Colors.php
index 770cc27b8..5387f2b59 100644
--- a/includes/Data/Themes/Colors.php
+++ b/includes/Data/Themes/Colors.php
@@ -2,79 +2,78 @@
 
 namespace NewfoldLabs\WP\Module\Onboarding\Data\Themes;
 
-final class Colors
-{
+final class Colors {
 
-     /**
-      * This contains the different color variations for the theme.
-      *
-      * @var string
-      */
-     protected static $theme_colors = array(
-          'yith-wonder' => array(
-               'calm' => array(
-                    'tertiary' => '#C7DBFF',
-                    'secondary' => '#E6EBEE',
-                    'primary' => '#1A4733',
-                    'background' => ''
-               ),
-               'cool' => array(
-                    'tertiary' => '#C7DBFF',
-                    'secondary' => '#EDF7FE',
-                    'primary' => '#21447B',
-                    'background' => ''
-               ),
-               'warm' => array(
-                    'tertiary' => '#FFEDED',
-                    'secondary' => '#FEF7E8',
-                    'primary' => '#7A3921',
-                    'background' => ''
-               ),
-               'radiant' => array(
-                    'tertiary' => '#C7F0FF',
-                    'secondary' => '#FEF4FB',
-                    'primary' => '#63156A',
-                    'background' => ''
-               ),
-               'bold' => array(
-                    'tertiary' => '#F2A3D6',
-                    'secondary' => '#FFFBF5',
-                    'primary' => '#09857C',
-                    'background' => ''
-               ),
-               'retro' => array(
-                    'tertiary' => '#F2E6A2',
-                    'secondary' => '#F5FFFF',
-                    'primary' => '#096385',
-                    'background' => ''
-               ),
-               'professional' => array(
-                    'tertiary' => '#A2C1F2',
-                    'secondary' => '#F5FAFF',
-                    'primary' => '#669933',
-                    'background' => ''
-               ),
-          ),
-     );
 
-     /**
-      * Retrieves the active theme color variations.
-      *
-      * @return array|\WP_Error
-      */
-     public static function get_colors_from_theme()
-     {
-          $active_theme = (\wp_get_theme())->get('TextDomain');
-          $pattern_slugs = self::$theme_colors[$active_theme];
+	 /**
+	  * This contains the different color variations for the theme.
+	  *
+	  * @var string
+	  */
+	protected static $theme_colors = array(
+		'yith-wonder' => array(
+			'calm'         => array(
+				'tertiary'   => '#C7DBFF',
+				'secondary'  => '#E6EBEE',
+				'primary'    => '#1A4733',
+				'background' => '',
+			),
+			'cool'         => array(
+				'tertiary'   => '#C7DBFF',
+				'secondary'  => '#EDF7FE',
+				'primary'    => '#21447B',
+				'background' => '',
+			),
+			'warm'         => array(
+				'tertiary'   => '#FFEDED',
+				'secondary'  => '#FEF7E8',
+				'primary'    => '#7A3921',
+				'background' => '',
+			),
+			'radiant'      => array(
+				'tertiary'   => '#C7F0FF',
+				'secondary'  => '#FEF4FB',
+				'primary'    => '#63156A',
+				'background' => '',
+			),
+			'bold'         => array(
+				'tertiary'   => '#F2A3D6',
+				'secondary'  => '#FFFBF5',
+				'primary'    => '#09857C',
+				'background' => '',
+			),
+			'retro'        => array(
+				'tertiary'   => '#F2E6A2',
+				'secondary'  => '#F5FFFF',
+				'primary'    => '#096385',
+				'background' => '',
+			),
+			'professional' => array(
+				'tertiary'   => '#A2C1F2',
+				'secondary'  => '#F5FAFF',
+				'primary'    => '#669933',
+				'background' => '',
+			),
+		),
+	);
 
-          if (!isset($pattern_slugs)) {
-               return new \WP_Error(
-                    'Theme Colors not found',
-                    'No WordPress Colors are available for this theme.',
-                    array('status' => 404)
-               );
-          }
+	 /**
+	  * Retrieves the active theme color variations.
+	  *
+	  * @return array|\WP_Error
+	  */
+	public static function get_colors_from_theme() {
+		 $active_theme  = ( \wp_get_theme() )->get( 'TextDomain' );
+		 $pattern_slugs = self::$theme_colors[ $active_theme ];
 
-          return $pattern_slugs;
-     }
+		if ( ! isset( $pattern_slugs ) ) {
+			return new \WP_Error(
+				'Theme Colors not found',
+				'No WordPress Colors are available for this theme.',
+				array( 'status' => 404 )
+			);
+		}
+
+		 return $pattern_slugs;
+	}
 }
diff --git a/includes/Data/Themes/Fonts.php b/includes/Data/Themes/Fonts.php
index f9ad44122..9eba3bcba 100644
--- a/includes/Data/Themes/Fonts.php
+++ b/includes/Data/Themes/Fonts.php
@@ -2,218 +2,217 @@
 
 namespace NewfoldLabs\WP\Module\Onboarding\Data\Themes;
 
-final class Fonts
-{
-     /**
-      * This contains the different font variations for the theme.
-      *
-      * @var string
-      */
-     protected static $theme_fonts = array(
-          'yith-wonder' => array(
-               "modern-approachable" => array(
-                    "label" => "Modern & approachable",
-                    "matches" => "yith-wonder/theme-json",
-                    "styles" => array(
-                         "typography" => array(
-                              "fontFamily" => "var(--wp--preset--font-family--mulish)"
-                         ),
-                         "blocks" => array(
-                              "core/heading" => array(
-                                   "typography" => array(
-                                        "fontFamily" => "var(--wp--preset--font-family--poppins)"
-                                   )
-                              )
-                         )
-                    )
-               ),
-               "strong-sleek" => array(
-                    "label" => "Strong & sleek",
-                    "matches" => "yith-wonder/styles/01-blue-shades",
-                    "styles" => array(
-                         "typography" => array(
-                              "fontFamily" => "var(--wp--preset--font-family--raleway)"
-                         ),
-                         "blocks" => array(
-                              "core/heading" => array(
-                                   "typography" => array(
-                                        "fontFamily" => "var(--wp--preset--font-family--oswald)"
-                                   )
-                              )
-                         )
-                    )
-               ),
-               "stately-elevated" => array(
-                    "label" => "Stately & elevated",
-                    "matches" => "yith-wonder/styles/02-pink-shades",
-                    "styles" => array(
-                         "typography" => array(
-                              "fontFamily" => "var(--wp--preset--font-family--source-sans-pro)"
-                         ),
-                         "blocks" => array(
-                              "core/heading" => array(
-                                   "typography" => array(
-                                        "fontFamily" => "var(--wp--preset--font-family--playfair)"
-                                   )
-                              )
-                         )
-                    )
-               ),
-               "typewriter-crisp-midcentury" => array(
-                    "label" => "Typewriter & crisp midcentury",
-                    "matches" => "yith-wonder/styles/03-orange-shades",
-                    "styles" => array(
-                         "typography" => array(
-                              "fontFamily" => "var(--wp--preset--font-family--jost)"
-                         ),
-                         "blocks" => array(
-                              "core/heading" => array(
-                                   "typography" => array(
-                                        "fontFamily" => "var(--wp--preset--font-family--solway)"
-                                   )
-                              )
-                         )
-                    )
-               ),
-               "refined-traditional-newsletter" => array(
-                    "label" => "Refined traditional newsletter",
-                    "matches" => "yith-wonder/styles/04-black-shades",
-                    "styles" => array(
-                         "typography" => array(
-                              "fontFamily" => "var(--wp--preset--font-family--jost)"
-                         ),
-                         "blocks" => array(
-                              "core/heading" => array(
-                                   "typography" => array(
-                                        "fontFamily" => "var(--wp--preset--font-family--merriweather)"
-                                   )
-                              )
-                         )
-                    )
-               ),
-               "bold-stamp-slab" => array(
-                    "label" => "Bold stamp & slab",
-                    "matches" => "yith-wonder/styles/05-red-shades",
-                    "styles" => array(
-                         "typography" => array(
-                              "fontFamily" => "var(--wp--preset--font-family--roboto-slab)"
-                         ),
-                         "blocks" => array(
-                              "core/heading" => array(
-                                   "typography" => array(
-                                        "fontFamily" => "var(--wp--preset--font-family--changa-one)"
-                                   )
-                              )
-                         )
-                    )
-               ),
-               "fast-simple" => array(
-                    "label" => "Fast & Simple",
-                    "matches" => "newfold/onboarding-01",
-                    "styles" => array(
-                         "typography" => array(
-                              "fontFamily" => "var(--wp--preset--font-family--system)"
-                         ),
-                         "blocks" => array(
-                              "core/heading" => array(
-                                   "typography" => array(
-                                        "fontFamily" => "var(--wp--preset--font-family--system)"
-                                   )
-                              )
-                         )
-                    )
-               ),
-               "timeless-traditional" => array(
-                    "label" => "Timeless & Traditional",
-                    "matches" => "newfold/onboarding-02",
-                    "styles" => array(
-                         "typography" => array(
-                              "fontFamily" => "var(--wp--preset--font-family--serif)"
-                         ),
-                         "blocks" => array(
-                              "core/heading" => array(
-                                   "typography" => array(
-                                        "fontFamily" => "var(--wp--preset--font-family--serif)"
-                                   )
-                              )
-                         )
-                    )
-               ),
-               "sleek-sophisticated" => array(
-                    "label" => "Sleek & Sophisticated",
-                    "matches" => "newfold/onboarding-03",
-                    "styles" => array(
-                         "typography" => array(
-                              "fontFamily" => "var(--wp--preset--font-family--dm-sans)"
-                         ),
-                         "blocks" => array(
-                              "core/heading" => array(
-                                   "typography" => array(
-                                        "fontFamily" => "var(--wp--preset--font-family--dm-sans)"
-                                   )
-                              )
-                         )
-                    )
-               ),
-               "clear-crisp" => array(
-                    "label" => "Clear & Crisp",
-                    "matches" => "newfold/onboarding-04",
-                    "styles" => array(
-                         "typography" => array(
-                              "fontFamily" => "var(--wp--preset--font-family--inter)"
-                         ),
-                         "blocks" => array(
-                              "core/heading" => array(
-                                   "typography" => array(
-                                        "fontFamily" => "var(--wp--preset--font-family--inter)"
-                                   )
-                              )
-                         )
-                    )
-               ),
-               "retro-classy" => array(
-                    "label" => "Retro & Classy",
-                    "matches" => "newfold/onboarding-05",
-                    "styles" => array(
-                         "typography" => array(
-                              "fontFamily" => "var(--wp--preset--font-family--league-spartan)"
-                         ),
-                         "blocks" => array(
-                              "core/heading" => array(
-                                   "typography" => array(
-                                        "fontFamily" => "var(--wp--preset--font-family--league-spartan)"
-                                   )
-                              )
-                         )
-                    )
-               ),
-               "defined-solid" => array(
-                    "label" => "Defined & Solid",
-                    "matches" => "newfold/onboarding-06",
-                    "styles" => array(
-                         "typography" => array(
-                              "fontFamily" => "var(--wp--preset--font-family--roboto-slab)"
-                         ),
-                         "blocks" => array(
-                              "core/heading" => array(
-                                   "typography" => array(
-                                        "fontFamily" => "var(--wp--preset--font-family--roboto-slab)"
-                                   )
-                              )
-                         )
-                    )
-               )
-          )
-     );
+final class Fonts {
 
-     /**
-      * Retrieves the active theme font variations.
-      *
-      * @return array|\WP_Error
-      */
-     public static function get_fonts_from_theme()
-     {
-          $active_theme = (\wp_get_theme())->get('TextDomain');
-          return isset(self::$theme_fonts[$active_theme]) ? self::$theme_fonts[$active_theme] : false;
-     }
+	 /**
+	  * This contains the different font variations for the theme.
+	  *
+	  * @var string
+	  */
+	protected static $theme_fonts = array(
+		'yith-wonder' => array(
+			'modern-approachable'            => array(
+				'label'   => 'Modern & approachable',
+				'matches' => 'yith-wonder/theme-json',
+				'styles'  => array(
+					'typography' => array(
+						'fontFamily' => 'var(--wp--preset--font-family--mulish)',
+					),
+					'blocks'     => array(
+						'core/heading' => array(
+							'typography' => array(
+								'fontFamily' => 'var(--wp--preset--font-family--poppins)',
+							),
+						),
+					),
+				),
+			),
+			'strong-sleek'                   => array(
+				'label'   => 'Strong & sleek',
+				'matches' => 'yith-wonder/styles/01-blue-shades',
+				'styles'  => array(
+					'typography' => array(
+						'fontFamily' => 'var(--wp--preset--font-family--raleway)',
+					),
+					'blocks'     => array(
+						'core/heading' => array(
+							'typography' => array(
+								'fontFamily' => 'var(--wp--preset--font-family--oswald)',
+							),
+						),
+					),
+				),
+			),
+			'stately-elevated'               => array(
+				'label'   => 'Stately & elevated',
+				'matches' => 'yith-wonder/styles/02-pink-shades',
+				'styles'  => array(
+					'typography' => array(
+						'fontFamily' => 'var(--wp--preset--font-family--source-sans-pro)',
+					),
+					'blocks'     => array(
+						'core/heading' => array(
+							'typography' => array(
+								'fontFamily' => 'var(--wp--preset--font-family--playfair)',
+							),
+						),
+					),
+				),
+			),
+			'typewriter-crisp-midcentury'    => array(
+				'label'   => 'Typewriter & crisp midcentury',
+				'matches' => 'yith-wonder/styles/03-orange-shades',
+				'styles'  => array(
+					'typography' => array(
+						'fontFamily' => 'var(--wp--preset--font-family--jost)',
+					),
+					'blocks'     => array(
+						'core/heading' => array(
+							'typography' => array(
+								'fontFamily' => 'var(--wp--preset--font-family--solway)',
+							),
+						),
+					),
+				),
+			),
+			'refined-traditional-newsletter' => array(
+				'label'   => 'Refined traditional newsletter',
+				'matches' => 'yith-wonder/styles/04-black-shades',
+				'styles'  => array(
+					'typography' => array(
+						'fontFamily' => 'var(--wp--preset--font-family--jost)',
+					),
+					'blocks'     => array(
+						'core/heading' => array(
+							'typography' => array(
+								'fontFamily' => 'var(--wp--preset--font-family--merriweather)',
+							),
+						),
+					),
+				),
+			),
+			'bold-stamp-slab'                => array(
+				'label'   => 'Bold stamp & slab',
+				'matches' => 'yith-wonder/styles/05-red-shades',
+				'styles'  => array(
+					'typography' => array(
+						'fontFamily' => 'var(--wp--preset--font-family--roboto-slab)',
+					),
+					'blocks'     => array(
+						'core/heading' => array(
+							'typography' => array(
+								'fontFamily' => 'var(--wp--preset--font-family--changa-one)',
+							),
+						),
+					),
+				),
+			),
+			'fast-simple'                    => array(
+				'label'   => 'Fast & Simple',
+				'matches' => 'newfold/onboarding-01',
+				'styles'  => array(
+					'typography' => array(
+						'fontFamily' => 'var(--wp--preset--font-family--system)',
+					),
+					'blocks'     => array(
+						'core/heading' => array(
+							'typography' => array(
+								'fontFamily' => 'var(--wp--preset--font-family--system)',
+							),
+						),
+					),
+				),
+			),
+			'timeless-traditional'           => array(
+				'label'   => 'Timeless & Traditional',
+				'matches' => 'newfold/onboarding-02',
+				'styles'  => array(
+					'typography' => array(
+						'fontFamily' => 'var(--wp--preset--font-family--serif)',
+					),
+					'blocks'     => array(
+						'core/heading' => array(
+							'typography' => array(
+								'fontFamily' => 'var(--wp--preset--font-family--serif)',
+							),
+						),
+					),
+				),
+			),
+			'sleek-sophisticated'            => array(
+				'label'   => 'Sleek & Sophisticated',
+				'matches' => 'newfold/onboarding-03',
+				'styles'  => array(
+					'typography' => array(
+						'fontFamily' => 'var(--wp--preset--font-family--dm-sans)',
+					),
+					'blocks'     => array(
+						'core/heading' => array(
+							'typography' => array(
+								'fontFamily' => 'var(--wp--preset--font-family--dm-sans)',
+							),
+						),
+					),
+				),
+			),
+			'clear-crisp'                    => array(
+				'label'   => 'Clear & Crisp',
+				'matches' => 'newfold/onboarding-04',
+				'styles'  => array(
+					'typography' => array(
+						'fontFamily' => 'var(--wp--preset--font-family--inter)',
+					),
+					'blocks'     => array(
+						'core/heading' => array(
+							'typography' => array(
+								'fontFamily' => 'var(--wp--preset--font-family--inter)',
+							),
+						),
+					),
+				),
+			),
+			'retro-classy'                   => array(
+				'label'   => 'Retro & Classy',
+				'matches' => 'newfold/onboarding-05',
+				'styles'  => array(
+					'typography' => array(
+						'fontFamily' => 'var(--wp--preset--font-family--league-spartan)',
+					),
+					'blocks'     => array(
+						'core/heading' => array(
+							'typography' => array(
+								'fontFamily' => 'var(--wp--preset--font-family--league-spartan)',
+							),
+						),
+					),
+				),
+			),
+			'defined-solid'                  => array(
+				'label'   => 'Defined & Solid',
+				'matches' => 'newfold/onboarding-06',
+				'styles'  => array(
+					'typography' => array(
+						'fontFamily' => 'var(--wp--preset--font-family--roboto-slab)',
+					),
+					'blocks'     => array(
+						'core/heading' => array(
+							'typography' => array(
+								'fontFamily' => 'var(--wp--preset--font-family--roboto-slab)',
+							),
+						),
+					),
+				),
+			),
+		),
+	);
+
+	 /**
+	  * Retrieves the active theme font variations.
+	  *
+	  * @return array|\WP_Error
+	  */
+	public static function get_fonts_from_theme() {
+		 $active_theme = ( \wp_get_theme() )->get( 'TextDomain' );
+		 return isset( self::$theme_fonts[ $active_theme ] ) ? self::$theme_fonts[ $active_theme ] : false;
+	}
 }
diff --git a/includes/RestApi/Themes/ThemeColorsController.php b/includes/RestApi/Themes/ThemeColorsController.php
index b6dda4429..2bb470dfb 100644
--- a/includes/RestApi/Themes/ThemeColorsController.php
+++ b/includes/RestApi/Themes/ThemeColorsController.php
@@ -8,59 +8,57 @@
 /**
  * Class ThemeColorsController
  */
-class ThemeColorsController extends \WP_REST_Controller
-{
+class ThemeColorsController extends \WP_REST_Controller {
 
-     /**
-      * The namespace of this controller's route.
-      *
-      * @var string
-      */
-     protected $namespace = 'newfold-onboarding/v1';
 
-     /**
-      * The base of this controller's route.
-      *
-      * @var string
-      */
-     protected $rest_base = '/themes';
+	 /**
+	  * The namespace of this controller's route.
+	  *
+	  * @var string
+	  */
+	 protected $namespace = 'newfold-onboarding/v1';
 
+	 /**
+	  * The base of this controller's route.
+	  *
+	  * @var string
+	  */
+	 protected $rest_base = '/themes';
 
-     /**
-      * The extended base of this controller's route.
-      *
-      * @var string
-      */
-     protected $rest_extended_base = '/colors';
 
+	 /**
+	  * The extended base of this controller's route.
+	  *
+	  * @var string
+	  */
+	 protected $rest_extended_base = '/colors';
 
 
-     /**
-      * Registers routes for ThemeColorsController
-      */
-     public function register_routes()
-     {
-          \register_rest_route(
-               $this->namespace,
-               $this->rest_base . $this->rest_extended_base,
-               array(
-                    array(
-                         'methods'  => \WP_REST_Server::READABLE,
-                         'callback' => array($this, 'get_theme_colors'),
-                         'permission_callback' => array(Permissions::class, 'rest_is_authorized_admin'),
-                    ),
-               )
-          );
-     }
 
-     /**
-      * Retrieves the active theme color variations.
-      *
-      * @return array|\WP_Error
-      */
-     public function get_theme_colors()
-     {
-          $theme_color_palettes = Colors::get_colors_from_theme();
-          return $theme_color_palettes;
-     }
+	 /**
+	  * Registers routes for ThemeColorsController
+	  */
+	public function register_routes() {
+		\register_rest_route(
+			$this->namespace,
+			$this->rest_base . $this->rest_extended_base,
+			array(
+				array(
+					'methods'             => \WP_REST_Server::READABLE,
+					'callback'            => array( $this, 'get_theme_colors' ),
+					'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
+				),
+			)
+		);
+	}
+
+	 /**
+	  * Retrieves the active theme color variations.
+	  *
+	  * @return array|\WP_Error
+	  */
+	public function get_theme_colors() {
+		 $theme_color_palettes = Colors::get_colors_from_theme();
+		 return $theme_color_palettes;
+	}
 }
diff --git a/includes/RestApi/Themes/ThemeFontsController.php b/includes/RestApi/Themes/ThemeFontsController.php
index fd841578b..354f9faf5 100644
--- a/includes/RestApi/Themes/ThemeFontsController.php
+++ b/includes/RestApi/Themes/ThemeFontsController.php
@@ -8,65 +8,64 @@
 /**
  * Class ThemeFontsController
  */
-class ThemeFontsController extends \WP_REST_Controller
-{
+class ThemeFontsController extends \WP_REST_Controller {
 
-     /**
-      * The namespace of this controller's route.
-      *
-      * @var string
-      */
-     protected $namespace = 'newfold-onboarding/v1';
 
-     /**
-      * The base of this controller's route.
-      *
-      * @var string
-      */
-     protected $rest_base = '/themes';
+	 /**
+	  * The namespace of this controller's route.
+	  *
+	  * @var string
+	  */
+	 protected $namespace = 'newfold-onboarding/v1';
 
+	 /**
+	  * The base of this controller's route.
+	  *
+	  * @var string
+	  */
+	 protected $rest_base = '/themes';
 
-     /**
-      * The extended base of this controller's route.
-      *
-      * @var string
-      */
-     protected $rest_extended_base = '/fonts';
 
-     /**
-      * Registers routes for ThemeColorsController
-      */
-     public function register_routes()
-     {
-          \register_rest_route(
-               $this->namespace,
-               $this->rest_base . $this->rest_extended_base,
-               array(
-                    array(
-                         'methods'  => \WP_REST_Server::READABLE,
-                         'callback' => array($this, 'get_theme_fonts'),
-                         'permission_callback' => array(Permissions::class, 'rest_is_authorized_admin'),
-                    ),
-               )
-          );
-     }
+	 /**
+	  * The extended base of this controller's route.
+	  *
+	  * @var string
+	  */
+	 protected $rest_extended_base = '/fonts';
 
-     /**
-      * Retrieves the active theme font variations.
-      *
-      * @return array|\WP_Error
-      */
-     public function get_theme_fonts()
-     {
-          $theme_font_palettes = Fonts::get_fonts_from_theme();
+	 /**
+	  * Registers routes for ThemeColorsController
+	  */
+	public function register_routes() {
+		\register_rest_route(
+			$this->namespace,
+			$this->rest_base . $this->rest_extended_base,
+			array(
+				array(
+					'methods'             => \WP_REST_Server::READABLE,
+					'callback'            => array( $this, 'get_theme_fonts' ),
+					'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
+				),
+			)
+		);
+	}
 
-          if(!$theme_font_palettes)
-               return new \WP_Error(
-                    'Theme Fonts not found',
-                    'No WordPress Fonts are available for this theme.',
-                    array('status' => 404)
-               );
+	 /**
+	  * Retrieves the active theme font variations.
+	  *
+	  * @return array|\WP_Error
+	  */
+	public function get_theme_fonts() {
+		 $theme_font_palettes = Fonts::get_fonts_from_theme();
 
-          return $theme_font_palettes;
-     }
+		if ( ! $theme_font_palettes ) {
+			return new \WP_Error(
+				'Theme Fonts not found',
+				'No WordPress Fonts are available for this theme.',
+				array( 'status' => 404 )
+			);
+		}
+
+		 return $theme_font_palettes;
+	}
 }
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index 5d922fa21..4bce0513f 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -7,149 +7,188 @@ import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 
 const DesignTypography = () => {
-
 	const drawerFontOptions = useRef();
-	const [rerender, doRerender] = useState(0);
-	const [isLoaded, setIsLoaded] = useState(false);
-	const [selectedFont, setSelectedFont] = useState();
-	const [globalStyles, setGlobalStyles] = useState();
-	const [fontPalettes, setFontPalettes] = useState();
-	const [isAccordionClosed, setIsAccordionClosed] = useState(true);
-
-	const { storedPreviewSettings, currentData } = useSelect(
-		(select) => {
-			return {
-				storedPreviewSettings:
-					select(nfdOnboardingStore).getPreviewSettings(),
-				currentData:
-					select(nfdOnboardingStore).getCurrentOnboardingData(),
-			};
-		},
-		[]
-	);
+	const [ rerender, doRerender ] = useState( 0 );
+	const [ isLoaded, setIsLoaded ] = useState( false );
+	const [ selectedFont, setSelectedFont ] = useState();
+	const [ globalStyles, setGlobalStyles ] = useState();
+	const [ fontPalettes, setFontPalettes ] = useState();
+	const [ isAccordionClosed, setIsAccordionClosed ] = useState( true );
+
+	const { storedPreviewSettings, currentData } = useSelect( ( select ) => {
+		return {
+			storedPreviewSettings:
+				select( nfdOnboardingStore ).getPreviewSettings(),
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+		};
+	}, [] );
 
 	const { updatePreviewSettings, setCurrentOnboardingData } =
-		useDispatch(nfdOnboardingStore);
+		useDispatch( nfdOnboardingStore );
 
 	const getFontStylesAndPatterns = async () => {
 		const fontPalettes = await getThemeFonts();
 		const globalStyles = await getGlobalStyles();
-		setFontPalettes(fontPalettes?.body);
+		setFontPalettes( fontPalettes?.body );
 
 		let selectedGlobalStyle;
-		if (currentData?.data?.theme?.variation) {
+		if ( currentData?.data?.theme?.variation ) {
 			selectedGlobalStyle = globalStyles.body.filter(
-				(globalStyle) =>
+				( globalStyle ) =>
 					globalStyle.title === currentData.data.theme.variation
-			)[0];
+			)[ 0 ];
 		} else {
-			selectedGlobalStyle = globalStyles.body[0];
+			selectedGlobalStyle = globalStyles.body[ 0 ];
 		}
-		setGlobalStyles(selectedGlobalStyle);
+		setGlobalStyles( selectedGlobalStyle );
 
-		if(currentData?.data?.typography?.slug !== ''){
-			handleClick(currentData?.data?.typography?.slug, selectedGlobalStyle, fontPalettes?.body);
-		}else{
+		if ( currentData?.data?.typography?.slug !== '' ) {
+			handleClick(
+				currentData?.data?.typography?.slug,
+				selectedGlobalStyle,
+				fontPalettes?.body
+			);
+		} else {
 			updatePreviewSettings(
-				useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
+				useGlobalStylesOutput(
+					selectedGlobalStyle,
+					storedPreviewSettings
+				)
 			);
 		}
-		let stylesCustom = selectedGlobalStyle?.settings?.styles[0]?.css;
-		if (stylesCustom) {
+		const stylesCustom = selectedGlobalStyle?.settings?.styles[ 0 ]?.css;
+		if ( stylesCustom ) {
 			// Loads in all CSS variables related to fontFamily
 			const regex = /--wp--preset--font-family.*;/;
-			drawerFontOptions.current.setAttribute('style', stylesCustom.match(regex));
+			drawerFontOptions.current.setAttribute(
+				'style',
+				stylesCustom.match( regex )
+			);
 		}
-		setIsLoaded(true);
+		setIsLoaded( true );
 	};
 
-	useEffect(() => {
-		if (!isLoaded) getFontStylesAndPatterns();
-	}, [isLoaded]);
-	
-	const handleClick = async (fontStyle, selectedGlobalStyle = globalStyles, fontPalettesCopy = fontPalettes) => {
-		setSelectedFont(fontStyle);
+	useEffect( () => {
+		if ( ! isLoaded ) getFontStylesAndPatterns();
+	}, [ isLoaded ] );
+
+	const handleClick = async (
+		fontStyle,
+		selectedGlobalStyle = globalStyles,
+		fontPalettesCopy = fontPalettes
+	) => {
+		setSelectedFont( fontStyle );
 
 		// Changes the Global Styles to Recompute css properties
-		let globalStylesCopy = selectedGlobalStyle;
-		globalStylesCopy.styles.typography.fontFamily = fontPalettesCopy[fontStyle]?.styles?.typography?.fontFamily;
-		globalStylesCopy.styles.blocks['core/heading'].typography.fontFamily = 
-			fontPalettesCopy[fontStyle]?.styles.blocks['core/heading'].typography.fontFamily;
-		setGlobalStyles(globalStylesCopy);
+		const globalStylesCopy = selectedGlobalStyle;
+		globalStylesCopy.styles.typography.fontFamily =
+			fontPalettesCopy[ fontStyle ]?.styles?.typography?.fontFamily;
+		globalStylesCopy.styles.blocks[ 'core/heading' ].typography.fontFamily =
+			fontPalettesCopy[ fontStyle ]?.styles.blocks[
+				'core/heading'
+			].typography.fontFamily;
+		setGlobalStyles( globalStylesCopy );
 
 		// Saves the data to the Store
 		currentData.data.typography.slug = fontStyle;
-		currentData.data.typography.data = fontPalettesCopy[fontStyle];
+		currentData.data.typography.data = fontPalettesCopy[ fontStyle ];
 
 		// Remove Existing Custom Font CSS
-		const result = storedPreviewSettings.settings.styles.filter((style) => {
-			if (!(style.hasOwnProperty('id') && (style.id === 'customFontProperty')))
-				return style;
-		});
+		const result = storedPreviewSettings.settings.styles.filter(
+			( style ) => {
+				if (
+					! (
+						style.hasOwnProperty( 'id' ) &&
+						style.id === 'customFontProperty'
+					)
+				)
+					return style;
+			}
+		);
 
 		// Add the font CSS changes to Preview Settings
 		storedPreviewSettings.settings.styles = [
 			...result,
 			{
 				id: 'customFontProperty',
-				css: `body {font-family: ${fontPalettesCopy[fontStyle]?.styles?.typography?.fontFamily} !important; }
-						h6 { font-family: ${fontPalettesCopy[fontStyle]?.styles?.blocks['core/heading']?.typography?.fontFamily} !important; }`,
+				css: `body {font-family: ${ fontPalettesCopy[ fontStyle ]?.styles?.typography?.fontFamily } !important; }
+						h6 { font-family: ${ fontPalettesCopy[ fontStyle ]?.styles?.blocks[ 'core/heading' ]?.typography?.fontFamily } !important; }`,
 			},
-		]
+		];
 
 		updatePreviewSettings(
-			useGlobalStylesOutput(globalStylesCopy, storedPreviewSettings)
+			useGlobalStylesOutput( globalStylesCopy, storedPreviewSettings )
 		);
-		setCurrentOnboardingData(currentData);
-		doRerender(1);
+		setCurrentOnboardingData( currentData );
+		doRerender( 1 );
 	};
 
-
 	async function resetFonts() {
-		setSelectedFont('');
+		setSelectedFont( '' );
 		const globalStyles = await getGlobalStyles();
 		let selectedGlobalStyle;
-		if (currentData?.data?.theme?.variation) {
+		if ( currentData?.data?.theme?.variation ) {
 			selectedGlobalStyle = globalStyles.body.filter(
-				(globalStyle) =>
+				( globalStyle ) =>
 					globalStyle.title === currentData.data.theme.variation
-			)[0];
+			)[ 0 ];
 		} else {
-			selectedGlobalStyle = globalStyles.body[0];
+			selectedGlobalStyle = globalStyles.body[ 0 ];
 		}
-		setGlobalStyles(selectedGlobalStyle);
+		setGlobalStyles( selectedGlobalStyle );
 		updatePreviewSettings(
-			useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
+			useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings )
 		);
 
 		currentData.data.typography.slug = '';
 		currentData.data.typography.data = [];
-		setCurrentOnboardingData(currentData);
-		doRerender(1);
+		setCurrentOnboardingData( currentData );
+		doRerender( 1 );
 	}
 
 	function buildPalettes() {
-		let paletteRenderedList = [];
-		for (const fontStyle in fontPalettes) {
-			const splitLabel = fontPalettes[fontStyle]?.label.split("&", 2);
-			if(splitLabel.length == 0)
-				continue;
+		const paletteRenderedList = [];
+		for ( const fontStyle in fontPalettes ) {
+			const splitLabel = fontPalettes[ fontStyle ]?.label.split( '&', 2 );
+			if ( splitLabel.length == 0 ) continue;
 			paletteRenderedList.push(
-				<div className={`font-palette ${selectedFont == fontStyle ? 'font-palette-selected' : ''} `}
-					onClick={(e) => handleClick(fontStyle)}>
-					<div className='font-palette__icon'
-						style={{ fontFamily: fontPalettes[fontStyle]?.styles?.typography?.fontFamily }}>
-						Aa 
+				<div
+					className={ `font-palette ${
+						selectedFont == fontStyle ? 'font-palette-selected' : ''
+					} ` }
+					onClick={ ( e ) => handleClick( fontStyle ) }
+				>
+					<div
+						className="font-palette__icon"
+						style={ {
+							fontFamily:
+								fontPalettes[ fontStyle ]?.styles?.typography
+									?.fontFamily,
+						} }
+					>
+						Aa
 					</div>
-					<div className='font-palette__name'>
+					<div className="font-palette__name">
 						<span
-							style={{ fontFamily: fontPalettes[fontStyle]?.styles.blocks['core/heading'].typography.fontFamily }}>
-							{splitLabel[0]}
+							style={ {
+								fontFamily:
+									fontPalettes[ fontStyle ]?.styles.blocks[
+										'core/heading'
+									].typography.fontFamily,
+							} }
+						>
+							{ splitLabel[ 0 ] }
 						</span>
-						{splitLabel[1] ? '&' : ''}
+						{ splitLabel[ 1 ] ? '&' : '' }
 						<span
-							style={{ fontFamily: fontPalettes[fontStyle]?.styles?.typography?.fontFamily }}>
-							{splitLabel[1] ?? ''}
+							style={ {
+								fontFamily:
+									fontPalettes[ fontStyle ]?.styles
+										?.typography?.fontFamily,
+							} }
+						>
+							{ splitLabel[ 1 ] ?? '' }
 						</span>
 					</div>
 				</div>
@@ -161,30 +200,38 @@ const DesignTypography = () => {
 
 	function buildCustomPalette() {
 		return (
-			<div className='custom-font-palette'>
-				<div className='custom-font-palette__top'
-					onClick={(e) => setIsAccordionClosed(!isAccordionClosed)}>
-					<div className='custom-font-palette__top-text'>SELECT CUSTOM FONTS</div>
-					{isAccordionClosed && <div className='custom-font-palette__top-icon'>+</div>}
-					{!isAccordionClosed && <div className='custom-font-palette__top-icon'>-</div>}
+			<div className="custom-font-palette">
+				<div
+					className="custom-font-palette__top"
+					onClick={ ( e ) =>
+						setIsAccordionClosed( ! isAccordionClosed )
+					}
+				>
+					<div className="custom-font-palette__top-text">
+						SELECT CUSTOM FONTS
+					</div>
+					{ isAccordionClosed && (
+						<div className="custom-font-palette__top-icon">+</div>
+					) }
+					{ ! isAccordionClosed && (
+						<div className="custom-font-palette__top-icon">-</div>
+					) }
 				</div>
 			</div>
 		);
 	}
 
 	return (
-		<div ref={drawerFontOptions} className='theme-fonts--drawer'>
-			<h2>{__('Font Palettes', 'wp-module-onboarding')}</h2>
-			{/* { selectedFont && 
+		<div ref={ drawerFontOptions } className="theme-fonts--drawer">
+			<h2>{ __( 'Font Palettes', 'wp-module-onboarding' ) }</h2>
+			{ /* { selectedFont && 
 				<div className='theme-fonts--drawer--reset' onClick={resetFonts}>
 					<div>Reset Button</div>
 				</div>
-			} */}
-			{fontPalettes && buildPalettes()}
-			{fontPalettes && buildCustomPalette()}
-			<div className='custom-font-palette--hidden'>
-				{rerender}
-			</div>
+			} */ }
+			{ fontPalettes && buildPalettes() }
+			{ fontPalettes && buildCustomPalette() }
+			<div className="custom-font-palette--hidden">{ rerender }</div>
 		</div>
 	);
 };
diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss
index 0692586dd..0e9e40367 100644
--- a/src/OnboardingSPA/components/Drawer/stylesheet.scss
+++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss
@@ -1,218 +1,235 @@
 .nfd-onboarding-drawer__toggle {
-    align-items: center;
-    background: var(--nfd-onboarding-drawer-bg);
-    border-radius: 0;
-    display: flex;
-    position: absolute;
-    z-index: z-index(".edit-site-navigation-toggle");
-    height: $header-height;
-    width: $header-height;
-    &-button {
-        align-items: center;
-        background: var(--nfd-onboarding-drawer-bg);
-        border-radius: 0;
-        color: var(--nfd-onboarding-drawer-fg);
-        height: $header-height + $border-width;
-        width: $header-height;
-        z-index: 1;
-        margin-bottom: - $border-width;
-        &.has-icon {
-            min-width: $header-height;
-
-            &:hover,
-            &:active {
-                color: var(--nfd-onboarding-drawer-fg);
-            }
-
-            &.is-suppressed{
-                cursor: default;
-            }
-
-            &:focus {
-                box-shadow: none;
-            }
-
-            &::before {
-                transition: box-shadow 100ms ease;
-                @include reduce-motion("transition");
-                content: "";
-                display: block;
-                position: absolute;
-                top: 9px;
-                right: 9px;
-                bottom: 9px;
-                left: 9px;
-                border-radius: $radius-block-ui + $border-width + $border-width;
-                box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--nfd-onboarding-drawer-bg);
-            }
-
-            &:hover::before {
-                box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
-            }
-
-            &:focus::before {
-                box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(var(--nfd-onboarding-drawer-fg), 0.1);
-            }
-        }
-    }
+	align-items: center;
+	background: var(--nfd-onboarding-drawer-bg);
+	border-radius: 0;
+	display: flex;
+	position: absolute;
+	z-index: z-index(".edit-site-navigation-toggle");
+	height: $header-height;
+	width: $header-height;
+
+	&-button {
+		align-items: center;
+		background: var(--nfd-onboarding-drawer-bg);
+		border-radius: 0;
+		color: var(--nfd-onboarding-drawer-fg);
+		height: $header-height + $border-width;
+		width: $header-height;
+		z-index: 1;
+		margin-bottom: - $border-width;
+
+		&.has-icon {
+			min-width: $header-height;
+
+			&:hover,
+			&:active {
+				color: var(--nfd-onboarding-drawer-fg);
+			}
+
+			&.is-suppressed {
+				cursor: default;
+			}
+
+			&:focus {
+				box-shadow: none;
+			}
+
+			&::before {
+				transition: box-shadow 100ms ease;
+
+				@include reduce-motion("transition");
+				content: "";
+				display: block;
+				position: absolute;
+				top: 9px;
+				right: 9px;
+				bottom: 9px;
+				left: 9px;
+				border-radius: $radius-block-ui + $border-width + $border-width;
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--nfd-onboarding-drawer-bg);
+			}
+
+			&:hover::before {
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
+			}
+
+			&:focus::before {
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(var(--nfd-onboarding-drawer-fg), 0.1);
+			}
+		}
+	}
 }
 
 .nfd-onboarding-drawer__panel {
-    height: 100%;
-    position: relative;
-    width: 0;
-    overflow: auto;
-    background: var(--nfd-onboarding-drawer-bg);
-    color: var(--nfd-onboarding-drawer-fg);
-    transition: width 100ms linear;
-    @include reduce-motion("transition");
-
-    .interface-interface-skeleton.has-footer & {
-        @include break-medium() {
-            height: calc(100% - #{$button-size-small + $border-width});
-        }
-    }
-
-    &-inner {
-        position: relative;
-        width: $nav-sidebar-width;
-        height: 100%;
-        overflow: auto;
-        visibility: hidden;
-        transition: visibility 100ms linear;
-        @include reduce-motion("transition");
-    }
-
-    &-site-title-container {
-        height: $header-height;
-        padding-left: $header-height;
-        margin: 0 $grid-unit-20 0 $grid-unit-10;
-        display: flex;
-        align-items: center;
-    }
-
-    &-site-title {
-        font-weight: 600;
-        font-size: 14px;
-        line-height: 20px;
-        color: $gray-300;
-
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-    }
-
-    &-scroll-container {
-        overflow-x: hidden;
-        overflow-y: auto;
-        height: calc(100% - #{$header-height});
-        background-color: var(--nfd-onboarding-drawer-bg);
-        -ms-overflow-style: none;
-        scrollbar-width: none; 
-        &::-webkit-scrollbar {
-            display: none;
-        }
-    }
-
-    &-inside {
-        padding: 0 $grid-unit-20;
-        color: var(--nfd-onboarding-drawer-fg);
-        h2 {
-            color: var(--nfd-onboarding-drawer-fg);
-        }
-    }
-
-    .components-button.nfd-onboarding-drawer__panel-back.is-tertiary {
-        color: var(--nfd-onboarding-drawer-fg);
-        opacity: 0.7;
-        height: $button-size;
-        margin-top: $grid-unit-30;
-        padding: $grid-unit $grid-unit-20 $grid-unit $grid-unit;
-
-        svg {
-            margin-right: 0;
-        }
-
-        &:hover:not(:disabled),
-        &:focus:not(:disabled) {
-            opacity: 1;
-            box-shadow: none;
-        }
-
-        &:active {
-            background-color: transparent;
-        }
-    }
-
-    &-menu {
-        margin: $grid-unit-30 0;
-        h3 {
-            color: var(--nfd-onboarding-drawer-fg);
-            font-size: 20.28px;
-            line-height: 1.2;
-            padding: $grid-unit-05 $grid-unit-10 $grid-unit-05 $grid-unit-20;
-            margin-top: 0;
-            height: $grid-unit-50;
-            max-height: $grid-unit-60;
-            display: flex;
-            align-items: center;
-            margin-bottom: $grid-unit-10;
-        }
-    }
-
-    &-menu-item {
-        display: block;
-        width: 100%;
-        color: var(--nfd-onboarding-drawer-fg);
-        font-size: 14px;
-        line-height: 20px;
-    }
-
-    &-menu-link {
-        display: flex;
-        padding: $grid-unit-10 $grid-unit-20;
-        text-decoration: none;
-        color: var(--nfd-onboarding-light);
-        align-items: center;
-        border-radius: 2px;
-        transition: background-color 100ms linear;
-        @include reduce-motion("transition");
-        svg {
-            fill: var(--nfd-onboarding-drawer-icon-fill);
-            transition: fill 100ms linear;
-            @include reduce-motion("transition");
-            margin-right: $grid-unit-10;
-        }
-        &:focus {
-            box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-            outline: 3px solid transparent;
-            color: var(--nfd-onboarding-drawer-fg);
-        }
-        &:hover {
-            color: var(--nfd-onboarding-drawer-fg);
-        }
-        &.active {
-            background-color: var(--nfd-onboarding-primary);
-            color: var(--nfd-onboarding-light);
-            svg {
-                fill: var(--nfd-onboarding-drawer-icon-active-fill);
-            }
-        }
-    }
+	height: 100%;
+	position: relative;
+	width: 0;
+	overflow: auto;
+	background: var(--nfd-onboarding-drawer-bg);
+	color: var(--nfd-onboarding-drawer-fg);
+	transition: width 100ms linear;
+
+	@include reduce-motion("transition");
+
+	.interface-interface-skeleton.has-footer & {
+
+		@include break-medium() {
+			height: calc(100% - #{$button-size-small + $border-width});
+		}
+	}
+
+	&-inner {
+		position: relative;
+		width: $nav-sidebar-width;
+		height: 100%;
+		overflow: auto;
+		visibility: hidden;
+		transition: visibility 100ms linear;
+
+		@include reduce-motion("transition");
+	}
+
+	&-site-title-container {
+		height: $header-height;
+		padding-left: $header-height;
+		margin: 0 $grid-unit-20 0 $grid-unit-10;
+		display: flex;
+		align-items: center;
+	}
+
+	&-site-title {
+		font-weight: 600;
+		font-size: 14px;
+		line-height: 20px;
+		color: $gray-300;
+
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	&-scroll-container {
+		overflow-x: hidden;
+		overflow-y: auto;
+		height: calc(100% - #{$header-height});
+		background-color: var(--nfd-onboarding-drawer-bg);
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+
+	&-inside {
+		padding: 0 $grid-unit-20;
+		color: var(--nfd-onboarding-drawer-fg);
+
+		h2 {
+			color: var(--nfd-onboarding-drawer-fg);
+		}
+	}
+
+	.components-button.nfd-onboarding-drawer__panel-back.is-tertiary {
+		color: var(--nfd-onboarding-drawer-fg);
+		opacity: 0.7;
+		height: $button-size;
+		margin-top: $grid-unit-30;
+		padding: $grid-unit $grid-unit-20 $grid-unit $grid-unit;
+
+		svg {
+			margin-right: 0;
+		}
+
+		&:hover:not(:disabled),
+		&:focus:not(:disabled) {
+			opacity: 1;
+			box-shadow: none;
+		}
+
+		&:active {
+			background-color: transparent;
+		}
+	}
+
+	&-menu {
+		margin: $grid-unit-30 0;
+
+		h3 {
+			color: var(--nfd-onboarding-drawer-fg);
+			font-size: 20.28px;
+			line-height: 1.2;
+			padding: $grid-unit-05 $grid-unit-10 $grid-unit-05 $grid-unit-20;
+			margin-top: 0;
+			height: $grid-unit-50;
+			max-height: $grid-unit-60;
+			display: flex;
+			align-items: center;
+			margin-bottom: $grid-unit-10;
+		}
+	}
+
+	&-menu-item {
+		display: block;
+		width: 100%;
+		color: var(--nfd-onboarding-drawer-fg);
+		font-size: 14px;
+		line-height: 20px;
+	}
+
+	&-menu-link {
+		display: flex;
+		padding: $grid-unit-10 $grid-unit-20;
+		text-decoration: none;
+		color: var(--nfd-onboarding-light);
+		align-items: center;
+		border-radius: 2px;
+		transition: background-color 100ms linear;
+
+		@include reduce-motion("transition");
+
+		svg {
+			fill: var(--nfd-onboarding-drawer-icon-fill);
+			transition: fill 100ms linear;
+
+			@include reduce-motion("transition");
+			margin-right: $grid-unit-10;
+		}
+
+		&:focus {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			outline: 3px solid transparent;
+			color: var(--nfd-onboarding-drawer-fg);
+		}
+
+		&:hover {
+			color: var(--nfd-onboarding-drawer-fg);
+		}
+
+		&.active {
+			background-color: var(--nfd-onboarding-primary);
+			color: var(--nfd-onboarding-light);
+
+			svg {
+				fill: var(--nfd-onboarding-drawer-icon-active-fill);
+			}
+		}
+	}
 }
 
 .nfd-onboarding-drawer__panel.is-open {
-    width: $nav-sidebar-width;
-    .nfd-onboarding-drawer__panel-inner {
-        visibility: visible;
-    }
+	width: $nav-sidebar-width;
+
+	.nfd-onboarding-drawer__panel-inner {
+		visibility: visible;
+	}
 }
 
 .is-drawer-fade {
-    animation-name: fadeIn;
-    animation-duration: 100ms;
-    animation-timing-function: ease-in;
+	animation-name: fadeIn;
+	animation-duration: 100ms;
+	animation-timing-function: ease-in;
 }
 
 /*COLOR VARIABLES*/
@@ -224,355 +241,356 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 
 .theme-styles-preview {
 
-    &--drawer {
-        overflow-y: auto;
-        overflow-x: hidden;
-        width: 100%;
-        &__list {
-            width: 100%;
-            height: 100%;
-
-            @media (max-width: #{ ($break-large) }) {
-                width: 100%;
-                align-items: center;
-                justify-content: center;
-                flex-direction: column;
-            }
-    
-            &__item {
-                flex: 1;
-                width: 100%;
-                margin: 24px 0px;
-                display: flex;
-                align-items: center;
-                flex-direction: column;
-                justify-content: center;
-
-                &__title-bar {
-                    width: 90%;
-                    height: 15px;
-                    display: flex;
-                    align-items: center;
-                    background-color: #cccccc;
-                    justify-content: space-between;
-                    border: 1px solid transparent;
-    
-                    &__browser {
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        margin-left: 3px;
-    
-                        &__dot {
-                            background-color: #989EA7;
-                            width: 8px;
-                            margin: 3px;
-                            height: 8px;
-                            border-radius: 50%;
-                            display: inline-block;
-                        }
-                    }
-    
-                    &--selected {
-                        z-index: 2;
-                        width: 40px;
-                        height: 40px;
-                        display: flex;
-                        margin-right: -15px;
-                        border-radius: 50%;
-                        align-items: center;
-                        justify-content: center;
-                        background-clip: padding-box;
-                        background-color: $main-border-main;
-    
-                        &__path {
-                            fill: $main-color-light;
-                            transform: scale(0.7);
-                        }
-                    }
-    
-                    &--unselected {
-                        display: none;
-                    }
-                }
-    
-                &__live-preview-container {
-                    position: relative;
-                    width: 90%;
-                    overflow: hidden;
-                    align-items: center;
-                    border: 1px solid #B7B7B7;
-    
-                    .live-preview {
-    
-                        &__container {
-    
-                            &-custom {
-                                width: 100%;
-                                overflow: hidden;
-                                height: 250px;
-
-                                &:hover {
-                                    cursor: pointer;
-                                }
-                            }
-
-                        }
-                    }
-                }
-            }
-        }
-    }
+	&--drawer {
+		overflow-y: auto;
+		overflow-x: hidden;
+		width: 100%;
+
+		&__list {
+			width: 100%;
+			height: 100%;
+
+			@media (max-width: #{ ($break-large) }) {
+				width: 100%;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+			}
+
+			&__item {
+				flex: 1;
+				width: 100%;
+				margin: 24px 0;
+				display: flex;
+				align-items: center;
+				flex-direction: column;
+				justify-content: center;
+
+				&__title-bar {
+					width: 90%;
+					height: 15px;
+					display: flex;
+					align-items: center;
+					background-color: #ccc;
+					justify-content: space-between;
+					border: 1px solid transparent;
+
+					&__browser {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						margin-left: 3px;
+
+						&__dot {
+							background-color: #989ea7;
+							width: 8px;
+							margin: 3px;
+							height: 8px;
+							border-radius: 50%;
+							display: inline-block;
+						}
+					}
+
+					&--selected {
+						z-index: 2;
+						width: 40px;
+						height: 40px;
+						display: flex;
+						margin-right: -15px;
+						border-radius: 50%;
+						align-items: center;
+						justify-content: center;
+						background-clip: padding-box;
+						background-color: $main-border-main;
+
+						&__path {
+							fill: $main-color-light;
+							transform: scale(0.7);
+						}
+					}
+
+					&--unselected {
+						display: none;
+					}
+				}
+
+				&__live-preview-container {
+					position: relative;
+					width: 90%;
+					overflow: hidden;
+					align-items: center;
+					border: 1px solid #b7b7b7;
+
+					.live-preview {
+
+						&__container {
+
+							&-custom {
+								width: 100%;
+								overflow: hidden;
+								height: 250px;
+
+								&:hover {
+									cursor: pointer;
+								}
+							}
+
+						}
+					}
+				}
+			}
+		}
+	}
 }
 
 
 // Design Color Palette Step
 .theme-colors--drawer {
-    padding: 0 4px;
-
-    &--reset {
-        width: 40%;
-        height: 30px;
-        display: flex;
-        color: black;
-        cursor: pointer;
-        margin-left: 4px;
-        text-align: center;
-        align-items: center;
-        justify-content: center;
-        background-color: white;
-
-        &:hover {
-            background-color: var(--nfd-onboarding-drawer-icon-fill);
-        }
-    }
+	padding: 0 4px;
+
+	&--reset {
+		width: 40%;
+		height: 30px;
+		display: flex;
+		color: black;
+		cursor: pointer;
+		margin-left: 4px;
+		text-align: center;
+		align-items: center;
+		justify-content: center;
+		background-color: white;
+
+		&:hover {
+			background-color: var(--nfd-onboarding-drawer-icon-fill);
+		}
+	}
 }
 
 .color-palette {
 
-    width: 88%;
-    height: 30px;
-    display: flex;
-    margin: 8px 4px;
-    cursor: pointer;
-    position: relative;
-    padding: 10px 16px;
-    align-items: center;
-    background-color: white;
-    justify-content: space-between;
-    
-    &:hover {
-        background-color: var(--nfd-onboarding-drawer-icon-fill);
-    }
-
-    &-selected {
-        background-color: $main-border-main;
-    }
-
-    &__colors {
-
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        &--tertiary {
-            width: 22px;
-            height: 22px;
-            border-radius: 50%;
-            position: absolute;
-            border: 1px solid rgba(0, 0, 0, 0.3);
-        }
-
-        &--secondary {
-            left: 35px;
-            width: 22px;
-            height: 22px;
-            border-radius: 50%;
-            position: absolute;
-            border: 1px solid rgba(0, 0, 0, 0.3);
-        }
-
-        &--primary {
-            left: 55px;
-            width: 22px;
-            height: 22px;
-            border-radius: 50%;
-            position: absolute;
-            border: 1px solid rgba(0, 0, 0, 0.3);
-        }
-    }
-
-    &__name {
-        color: black;
-        font-size: 12px;
-        font-weight: 700;
-        line-height: 16px;
-    }
+	width: 88%;
+	height: 30px;
+	display: flex;
+	margin: 8px 4px;
+	cursor: pointer;
+	position: relative;
+	padding: 10px 16px;
+	align-items: center;
+	background-color: white;
+	justify-content: space-between;
+
+	&:hover {
+		background-color: var(--nfd-onboarding-drawer-icon-fill);
+	}
+
+	&-selected {
+		background-color: $main-border-main;
+	}
+
+	&__colors {
+
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		&--tertiary {
+			width: 22px;
+			height: 22px;
+			border-radius: 50%;
+			position: absolute;
+			border: 1px solid rgba(0, 0, 0, 0.3);
+		}
+
+		&--secondary {
+			left: 35px;
+			width: 22px;
+			height: 22px;
+			border-radius: 50%;
+			position: absolute;
+			border: 1px solid rgba(0, 0, 0, 0.3);
+		}
+
+		&--primary {
+			left: 55px;
+			width: 22px;
+			height: 22px;
+			border-radius: 50%;
+			position: absolute;
+			border: 1px solid rgba(0, 0, 0, 0.3);
+		}
+	}
+
+	&__name {
+		color: black;
+		font-size: 12px;
+		font-weight: 700;
+		line-height: 16px;
+	}
 }
 
 .custom-palette {
-    width: 88%;
-    margin: 30px 2px;
-    padding: 20px 16px;
-    background: $main-border-main;
-
-    &__top {
-        display: flex;
-        cursor: pointer;
-        align-items: center;
-        justify-content: space-between;
-
-        &-icon {
-            font-size: 18px;
-            font-weight: 500;
-        }
-    }
-
-    &_acc_opened {
-        display: block;
-    }
-
-    &_acc_closed {
-        display: none;
-    }
-
-    &__below {
-        margin-top: 16px;
-        animation-name: fadeIn;
-        animation-duration: 300ms;
-        animation-timing-function: linear;
-        animation-timing-function: ease-in-out;
-
-        &-row {
-            height: 50px;
-            color: black;
-            display: flex;
-            cursor: pointer;
-            align-items: center;
-            background-color: white;
-            justify-content: flex-start;
-            border: 0.5px solid rgba(0, 0, 0, 0.3);
-
-            &-icon {
-                width: 22px;
-                height: 22px;
-                margin: 2px 12px;
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border: 1px solid rgba(0, 0, 0, 0.3);
-
-                &_selected_border {
-                    box-shadow: 0px 0px 5px 3px rgba($main-border-main--rgb, 0.5);
-                }
-            }
-        }
-    }
-
-    &__picker-close-icon {
-        width: 25px;
-        height: 25px;
-        display: flex;
-        color: black;
-        cursor: pointer;
-        font-weight: 900;
-        border-radius: 50%;
-        align-items: center;
-        justify-content: center;
-        border: 1px solid black;
-        background-color: white;
-    }
+	width: 88%;
+	margin: 30px 2px;
+	padding: 20px 16px;
+	background: $main-border-main;
+
+	&__top {
+		display: flex;
+		cursor: pointer;
+		align-items: center;
+		justify-content: space-between;
+
+		&-icon {
+			font-size: 18px;
+			font-weight: 500;
+		}
+	}
+
+	&_acc_opened {
+		display: block;
+	}
+
+	&_acc_closed {
+		display: none;
+	}
+
+	&__below {
+		margin-top: 16px;
+		animation-name: fadeIn;
+		animation-duration: 300ms;
+		animation-timing-function: linear;
+		animation-timing-function: ease-in-out;
+
+		&-row {
+			height: 50px;
+			color: black;
+			display: flex;
+			cursor: pointer;
+			align-items: center;
+			background-color: white;
+			justify-content: flex-start;
+			border: 0.5px solid rgba(0, 0, 0, 0.3);
+
+			&-icon {
+				width: 22px;
+				height: 22px;
+				margin: 2px 12px;
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border: 1px solid rgba(0, 0, 0, 0.3);
+
+				&_selected_border {
+					box-shadow: 0 0 5px 3px rgba($main-border-main--rgb, 0.5);
+				}
+			}
+		}
+	}
+
+	&__picker-close-icon {
+		width: 25px;
+		height: 25px;
+		display: flex;
+		color: black;
+		cursor: pointer;
+		font-weight: 900;
+		border-radius: 50%;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid black;
+		background-color: white;
+	}
 }
 
 // Design Font Palette Step
 .theme-fonts--drawer {
-    padding: 0 4px;
-    border: none !important;
-
-    &--reset {
-        width: 40%;
-        height: 30px;
-        display: flex;
-        color: black;
-        cursor: pointer;
-        margin-left: 4px;
-        text-align: center;
-        align-items: center;
-        justify-content: center;
-        background-color: white;
-
-        &:hover {
-            background-color: var(--nfd-onboarding-drawer-icon-fill);
-        }
-    }
+	padding: 0 4px;
+	border: none !important;
+
+	&--reset {
+		width: 40%;
+		height: 30px;
+		display: flex;
+		color: black;
+		cursor: pointer;
+		margin-left: 4px;
+		text-align: center;
+		align-items: center;
+		justify-content: center;
+		background-color: white;
+
+		&:hover {
+			background-color: var(--nfd-onboarding-drawer-icon-fill);
+		}
+	}
 }
 
 .font-palette {
 
-    width: 88%;
-    height: 30px;
-    display: flex;
-    margin: 8px 4px;
-    cursor: pointer;
-    position: relative;
-    padding: 10px 16px;
-    align-items: center;
-    background-color: white;
-
-    &:hover {
-        background-color: var(--nfd-onboarding-drawer-icon-fill);
-    }
-
-    &-selected {
-        background-color: $main-border-main;
-    }
-
-    &__icon {
-        color: black;
-        font-weight: 700;
-        margin-right: 16px;
-    }
-
-    &__name {
-        color: black;
-        font-size: 12px;
-        font-weight: 700;
-        line-height: 16px;
-    }
+	width: 88%;
+	height: 30px;
+	display: flex;
+	margin: 8px 4px;
+	cursor: pointer;
+	position: relative;
+	padding: 10px 16px;
+	align-items: center;
+	background-color: white;
+
+	&:hover {
+		background-color: var(--nfd-onboarding-drawer-icon-fill);
+	}
+
+	&-selected {
+		background-color: $main-border-main;
+	}
+
+	&__icon {
+		color: black;
+		font-weight: 700;
+		margin-right: 16px;
+	}
+
+	&__name {
+		color: black;
+		font-size: 12px;
+		font-weight: 700;
+		line-height: 16px;
+	}
 }
 
 .custom-font-palette {
-    width: 88%;
-    margin: 30px 2px;
-    padding: 20px 16px;
-    background: $main-border-main;
-
-    &--hidden {
-        display: none;
-    }
-
-    &__top {
-        display: flex;
-        cursor: pointer;
-        align-items: center;
-        justify-content: space-between;
-
-        &-text {
-            font-size: 14px;
-        }
-
-        &-icon {
-            font-size: 14px;
-        }
-    }
-
-    &_acc_opened {
-        display: block;
-    }
-
-    &_acc_closed {
-        display: none;
-    }
+	width: 88%;
+	margin: 30px 2px;
+	padding: 20px 16px;
+	background: $main-border-main;
+
+	&--hidden {
+		display: none;
+	}
+
+	&__top {
+		display: flex;
+		cursor: pointer;
+		align-items: center;
+		justify-content: space-between;
+
+		&-text {
+			font-size: 14px;
+		}
+
+		&-icon {
+			font-size: 14px;
+		}
+	}
+
+	&_acc_opened {
+		display: block;
+	}
+
+	&_acc_closed {
+		display: none;
+	}
 
 }
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
index bba35c423..7b2061b03 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
@@ -1,4 +1,3 @@
-import { __ } from '@wordpress/i18n';
 import { useLocation } from 'react-router-dom';
 import { useViewportMatch } from '@wordpress/compose';
 import { useState, useEffect } from '@wordpress/element';
@@ -9,30 +8,24 @@ import { getGlobalStyles } from '../../../utils/api/themes';
 import { store as nfdOnboardingStore } from '../../../store';
 import { LivePreview } from '../../../components/LivePreview';
 import CommonLayout from '../../../components/Layouts/Common';
-import { THEME_STATUS_NOT_ACTIVE, VIEW_DESIGN_TYPOGRAPHY } from '../../../../constants';
+import {
+	THEME_STATUS_NOT_ACTIVE,
+	VIEW_DESIGN_TYPOGRAPHY,
+} from '../../../../constants';
 
 const StepDesignTypography = () => {
 	const location = useLocation();
-	const [pattern, setPattern] = useState();
-	const [isLoaded, setIsLoaded] = useState(false);
+	const [ pattern, setPattern ] = useState();
+	const [ isLoaded, setIsLoaded ] = useState( false );
 
-
-	const isLargeViewport = useViewportMatch('medium');
-	const {
-		currentStep,
-		currentData,
-		storedPreviewSettings,
-	} = useSelect((select) => {
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const { currentStep } = useSelect( ( select ) => {
 		return {
-			currentStep: select(nfdOnboardingStore).getStepFromPath(
+			currentStep: select( nfdOnboardingStore ).getStepFromPath(
 				location.pathname
 			),
-			currentData:
-				select(nfdOnboardingStore).getCurrentOnboardingData(),
-			storedPreviewSettings:
-				select(nfdOnboardingStore).getPreviewSettings(),
 		};
-	}, []);
+	}, [] );
 
 	const {
 		updateThemeStatus,
@@ -40,44 +33,36 @@ const StepDesignTypography = () => {
 		setIsDrawerOpened,
 		setIsSidebarOpened,
 		setIsDrawerSuppressed,
-		updatePreviewSettings,
-	} = useDispatch(nfdOnboardingStore);
+	} = useDispatch( nfdOnboardingStore );
 
-	useEffect(() => {
-		if (isLargeViewport) {
-			setIsDrawerOpened(true);
+	useEffect( () => {
+		if ( isLargeViewport ) {
+			setIsDrawerOpened( true );
 		}
-		setIsSidebarOpened(false);
-		setIsDrawerSuppressed(false);
-		setDrawerActiveView(VIEW_DESIGN_TYPOGRAPHY);
-	}, []);
+		setIsSidebarOpened( false );
+		setIsDrawerSuppressed( false );
+		setDrawerActiveView( VIEW_DESIGN_TYPOGRAPHY );
+	}, [] );
 
-	const getFontPatterns = async () =>  {
-		const patternsResponse = await getPatterns(currentStep.patternId, true);
-		if (patternsResponse?.error) {
-			return updateThemeStatus(THEME_STATUS_NOT_ACTIVE);
+	const getFontPatterns = async () => {
+		const patternsResponse = await getPatterns(
+			currentStep.patternId,
+			true
+		);
+		if ( patternsResponse?.error ) {
+			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
 		const globalStylesResponse = await getGlobalStyles();
-		if (globalStylesResponse?.error) {
-			return updateThemeStatus(THEME_STATUS_NOT_ACTIVE);
-		}
-		let selectedGlobalStyle;
-		if (currentData.data.theme.variation) {
-			selectedGlobalStyle = globalStylesResponse.body.filter(
-				(globalStyle) =>
-					globalStyle.title === currentData.data.theme.variation
-			)[0];
-		} else {
-			selectedGlobalStyle = globalStylesResponse.body[0];
+		if ( globalStylesResponse?.error ) {
+			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
-		setPattern(patternsResponse?.body);
-		setIsLoaded(true);
+		setPattern( patternsResponse?.body );
+		setIsLoaded( true );
 	};
 
-
-	useEffect(() => {
-		if (!isLoaded) getFontPatterns();
-	}, [isLoaded]);
+	useEffect( () => {
+		if ( ! isLoaded ) getFontPatterns();
+	}, [ isLoaded ] );
 
 	return (
 		<CommonLayout className="theme-fonts-preview">
@@ -89,18 +74,17 @@ const StepDesignTypography = () => {
 				</div>
 			</div>
 			<div className="theme-fonts-preview__live-preview-container">
-				{pattern && (
+				{ pattern && (
 					<LivePreview
-						blockGrammer={pattern}
-						styling={'custom'}
-						viewportWidth={1300}
-						skeletonLoadingTime={false}
+						blockGrammer={ pattern }
+						styling={ 'custom' }
+						viewportWidth={ 1300 }
+						skeletonLoadingTime={ false }
 					/>
-				)}
+				) }
 			</div>
 		</CommonLayout>
 	);
 };
 
-
 export default StepDesignTypography;
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
index 42383ddac..e0ecc9b38 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
@@ -1,54 +1,54 @@
 .theme-fonts-preview {
-    flex: 1;
-    margin: 16px;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-
-    &__title-bar {
-        width: 70%;
-        height: 15px;
-        display: flex;
-        align-items: center;
-        background-color: #ccc;
-        justify-content: space-between;
-        border: 1px solid transparent;
-
-        &__browser {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            &__dot {
-                background-color: #989ea7;
-                width: 8px;
-                margin: 3px;
-                height: 8px;
-                border-radius: 50%;
-                display: inline-block;
-            }
-        }
-    }
-
-    &__live-preview-container {
-        width: 70%;
-        min-height: 90vh;
-        overflow: hidden;
-        position: relative;
-        align-items: center;
-        border: 1px solid #e3dfdf;
-        margin-bottom: 30px;
-
-        .live-preview {
-
-            &__container {
-
-                &-custom {
-                    width: 100%;
-                }
-            }
-        }
-    }
-
-}
\ No newline at end of file
+	flex: 1;
+	margin: 16px;
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	justify-content: center;
+
+	&__title-bar {
+		width: 70%;
+		height: 15px;
+		display: flex;
+		align-items: center;
+		background-color: #ccc;
+		justify-content: space-between;
+		border: 1px solid transparent;
+
+		&__browser {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			&__dot {
+				background-color: #989ea7;
+				width: 8px;
+				margin: 3px;
+				height: 8px;
+				border-radius: 50%;
+				display: inline-block;
+			}
+		}
+	}
+
+	&__live-preview-container {
+		width: 70%;
+		min-height: 90vh;
+		overflow: hidden;
+		position: relative;
+		align-items: center;
+		border: 1px solid #e3dfdf;
+		margin-bottom: 30px;
+
+		.live-preview {
+
+			&__container {
+
+				&-custom {
+					width: 100%;
+				}
+			}
+		}
+	}
+
+}
diff --git a/src/OnboardingSPA/utils/api/themes.js b/src/OnboardingSPA/utils/api/themes.js
index 6578af017..0a01ebf44 100644
--- a/src/OnboardingSPA/utils/api/themes.js
+++ b/src/OnboardingSPA/utils/api/themes.js
@@ -36,17 +36,17 @@ const getThemeStatus = async ( theme ) => {
 
 const getThemeFonts = async () => {
 	return await resolve(
-		apiFetch({
-			url: onboardingRestURL('themes/fonts'),
-		})
+		apiFetch( {
+			url: onboardingRestURL( 'themes/fonts' ),
+		} )
 	);
 };
 
-const getThemeColors = async (theme) => {
+const getThemeColors = async ( theme ) => {
 	return await resolve(
-		apiFetch({
+		apiFetch( {
 			url: onboardingRestURL( 'themes/colors' ),
-		})
+		} )
 	);
 };
 
diff --git a/src/OnboardingSPA/utils/global-styles/use-global-styles-output.js b/src/OnboardingSPA/utils/global-styles/use-global-styles-output.js
index f6614f7fe..3c1b7efe8 100644
--- a/src/OnboardingSPA/utils/global-styles/use-global-styles-output.js
+++ b/src/OnboardingSPA/utils/global-styles/use-global-styles-output.js
@@ -499,11 +499,16 @@ export function useGlobalStylesOutput(
 		hasBlockGapSupport
 	);
 
-	const result = storedPreviewSettings.settings.styles.filter((style) => {
-		if (!(style.hasOwnProperty('id') && (style.id === 'customProperty' || style.id === 'globalStyle')))
+	const result = storedPreviewSettings.settings.styles.filter( ( style ) => {
+		if (
+			! (
+				style.hasOwnProperty( 'id' ) &&
+				( style.id === 'customProperty' || style.id === 'globalStyle' )
+			)
+		)
 			return style;
-	});
-	
+	} );
+
 	const stylesheets = [
 		...result,
 		{