fix: proper resetting in editingMode and in not

Author: Arukuen

src/components/font-pair-picker/index.js

@@ -19,10 +19,10 @@ import { __ } from '@wordpress/i18n'
 const FontPairPicker = props => {
 	const headingStyles = props.fontPair.typography.h1
 	const paragraphStyles = props.fontPair.typography.p
-	if ( headingStyles.fontFamily ) {
+	if ( headingStyles?.fontFamily ) {
 		loadGoogleFont( headingStyles.fontFamily )
 	}
-	if ( paragraphStyles.fontFamily ) {
+	if ( paragraphStyles?.fontFamily ) {
 		loadGoogleFont( paragraphStyles.fontFamily )
 	}
 
@@ -32,7 +32,7 @@ const FontPairPicker = props => {
 				style={ omit( { ...headingStyles }, [ 'fontSize', 'lineHeight' ] ) }
 				className="ugb-global-settings-font-pair__label"
 			>
-				{ headingStyles.fontFamily ? headingStyles.fontFamily : 'Theme Heading Default' }
+				{ headingStyles?.fontFamily ? headingStyles.fontFamily : 'Theme Heading Default' }
 			</span>
 			<span
 				style={ omit( { ...paragraphStyles }, [ 'fontSize', 'lineHeight' ] ) }

src/components/typography-control/index.js

@@ -35,14 +35,7 @@ const TypographyControl = props => {
 				label={ props.label }
 				popoverLabel={ props.popoverLabel }
 				onReset={ props.onReset }
-				allowReset={
-					props.fontFamily ||
-					props.fontSize || props.tabletFontSize || props.mobileFontSize ||
-					props.fontWeight ||
-					props.textTransform ||
-					props.lineHeight || props.tabletLineHeight || props.mobileLineHeight ||
-					props.letterSpacing || props.tabletLetterSpacing || props.mobileLetterSpacing
-				}
+				allowReset={ props?.isAllowReset }
 				resetPopoverTitle={ props.resetPopoverTitle }
 				resetPopoverDescription={ props.resetPopoverDescription }
 				className={ props.className }

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

@@ -14,7 +14,9 @@ import {
 } from '~stackable/components'
 import { fetchSettings } from '~stackable/util'
 import { i18n, isPro } from 'stackable'
-import { omit, head } from 'lodash'
+import {
+	omit, head, isEqual,
+} from 'lodash'
 
 /**
  * WordPress dependencies
@@ -183,7 +185,17 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 	}
 
 	const resetStyles = selector => {
-		const newSettings = omit( typographySettings, [ selector ] )
+		let newSettings
+		const currentFontPair = [ ...FONT_PAIRS, ...customFontPairs ].find( fontPair => fontPair.name === selectedFontPairName )
+		if ( ! editingFontPairName ) {
+			newSettings = { ...typographySettings, [ selector ]: currentFontPair.typography[ selector ] }
+		} else {
+			newSettings = omit( typographySettings, [ selector ] )
+			const updatedCustomFontPairs = customFontPairs
+				.map( fontPair => fontPair.name === editingFontPairName ? { ...fontPair, typography: newSettings } : fontPair )
+			updateCustomFontPairs( updatedCustomFontPairs )
+		}
+
 		doAction( 'stackable.global-settings.typography-update-global-styles', newSettings )
 
 		updateTypography( newSettings )
@@ -197,6 +209,26 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 		model.save()
 	}
 
+	const getIsAllowReset = selector => {
+		const currentFontPair = [ ...FONT_PAIRS, ...customFontPairs ].find( fontPair => fontPair.name === selectedFontPairName )
+		const fontPairStyle = currentFontPair.typography[ selector ]
+		const typographyStyle = typographySettings[ selector ]
+		if ( ! editingFontPairName ) {
+			if ( ! isEqual( fontPairStyle, typographyStyle ) ) {
+				return true
+			}
+			return false
+		} else if ( typographyStyle && ( typographyStyle.fontFamily ||
+			typographyStyle.fontSize || typographyStyle.tabletFontSize || typographyStyle.mobileFontSize ||
+			typographyStyle.fontWeight ||
+			typographyStyle.textTransform ||
+			typographyStyle.lineHeight || typographyStyle.tabletLineHeight || typographyStyle.mobileLineHeight ||
+			typographyStyle.letterSpacing || typographyStyle.tabletLetterSpacing || typographyStyle.mobileLetterSpacing ) ) {
+			return true
+		}
+		return false
+	}
+
 	const CustomFontPairPickers = applyFilters(
 		'stackable.global-settings.typography.font-pairs.customPicker',
 		Fragment,
@@ -316,6 +348,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 							label={ label }
 							selector={ selector }
 							value={ ( typographySettings[ selector ] ) || {} }
+							isAllowReset={ getIsAllowReset( selector ) }
 							onChange={ styles => changeStyles( { [ selector ]: styles } ) }
 							onReset={ () => resetStyles( selector ) }
 						/>

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

@@ -94,6 +94,7 @@ const TypographyPicker = props => {
 			onReset={ () => props.onReset( props.selector ) }
 			resetPopoverTitle={ sprintf( __( 'Reset %s Global Typography Style', i18n ), props.selector === 'p' ? __( 'Body Text', i18n ) : props.selector.toUpperCase() ) }
 			resetPopoverDescription={ __( 'Resetting this typography style will revert all typography to its original style. Proceed?', i18n ) }
+			isAllowReset={ props?.isAllowReset }
 		/>
 	)
 }