fix: set the font family of current font pair as default

Author: Arukuen

src/components/advanced-autosuggest-control/index.js

@@ -223,9 +223,10 @@ class AdvancedAutosuggestControl extends Component {
 				label={ this.props.label }
 				screens={ this.props.screens }
 				value={ this.props.value }
+				defaultValue={ this.props?.defaultValue ?? '' }
 				onChange={ value => { // Will be used to reset.
-					if ( value === '' ) {
-						this.onChange( null, { newValue: '' } )
+					if ( value === '' || this.props?.defaultValue ) {
+						this.onChange( null, { newValue: value } )
 					}
 				} }
 				allowReset={ this.props.allowReset }

src/components/typography-control/index.js

@@ -60,6 +60,7 @@ const TypographyControl = props => {
 						label={ __( 'Font Family', i18n ) }
 						onChange={ props.onChangeFontFamily }
 						value={ props.fontFamily }
+						defaultValue={ props?.defaultFontFamily }
 						helpTooltip={ {
 							video: 'typography-family',
 							description: __( 'Sets the font set to be used for the element', i18n ),

src/plugins/global-settings/typography/index.js

@@ -116,6 +116,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 		}
 	}, [ isPanelOpen ] )
 
+	const getCurrentFontPair = () => {
+		return [ ...FONT_PAIRS, ...customFontPairs ].find( fontPair => fontPair.name === selectedFontPairName )
+	}
+
 	const updateTypography = newSettings => {
 		setTypographySettings( newSettings )
 
@@ -152,6 +156,14 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 		}, 500 )
 	}
 
+	const changeApplySettingsTo = value => {
+		setApplySettingsTo( value )
+		const model = new models.Settings( {
+			stackable_global_typography_apply_to: value, // eslint-disable-line
+		} )
+		model.save()
+	}
+
 	const changeStyles = typography => {
 		const newSettings = { ...typographySettings }
 
@@ -183,7 +195,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 
 	const resetStyles = selector => {
 		let newSettings = {}
-		const currentFontPair = [ ...FONT_PAIRS, ...customFontPairs ].find( fontPair => fontPair.name === selectedFontPairName )
+		const currentFontPair = getCurrentFontPair()
 		if ( ! isEditingFontPair && currentFontPair ) {
 			newSettings = { ...typographySettings, [ selector ]: currentFontPair.typography[ selector ] }
 		}
@@ -193,16 +205,15 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 		updateTypography( newSettings )
 	}
 
-	const changeApplySettingsTo = value => {
-		setApplySettingsTo( value )
-		const model = new models.Settings( {
-			stackable_global_typography_apply_to: value, // eslint-disable-line
-		} )
-		model.save()
+	const getDefaultFontFamily = selector => {
+		const currentFontPair = getCurrentFontPair()
+		if ( ! isEditingFontPair && currentFontPair ) {
+			return currentFontPair.typography[ selector ]?.fontFamily ?? ''
+		}
 	}
 
 	const getIsAllowReset = selector => {
-		const currentFontPair = [ ...FONT_PAIRS, ...customFontPairs ].find( fontPair => fontPair.name === selectedFontPairName )
+		const currentFontPair = getCurrentFontPair()
 		const typographyStyle = typographySettings[ selector ]
 		if ( ! isEditingFontPair && currentFontPair ) {
 			const fontPairStyle = currentFontPair.typography[ selector ]
@@ -358,6 +369,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 									label={ label }
 									selector={ selector }
 									value={ ( typographySettings[ selector ] ) || {} }
+									defaultFontFamily={ getDefaultFontFamily( selector ) }
 									isAllowReset={ getIsAllowReset( selector ) }
 									onChange={ styles => changeStyles( { [ selector ]: styles } ) }
 									onReset={ () => resetStyles( selector ) }

src/plugins/global-settings/typography/typography-picker.js

@@ -55,6 +55,7 @@ const TypographyPicker = props => {
 			showSecondFontSize={ false }
 			allowReset={ true }
 			fontFamily={ value.fontFamily }
+			defaultFontFamily={ props?.defaultFontFamily }
 			fontSize={ value.fontSize }
 			htmlTag={ props.selector }
 			tabletFontSize={ value.tabletFontSize }