Merge branch 'feat/3448-global-font-pairs' of https://github.com/gambitph/Stackable into feat/3448-global-font-pairs

# Conflicts:
#	src/components/font-pair-picker/index.js

Author: [email protected]

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

@@ -17,12 +17,12 @@ import { omit } from 'lodash'
 import { __ } from '@wordpress/i18n'
 
 const FontPairPicker = props => {
-	const headingStyles = props.fontPair?.typography?.h1 || {}
-	const paragraphStyles = props.fontPair?.typography?.p || {}
-	if ( headingStyles.fontFamily ) {
+	const headingStyles = props.fontPair.typography.h1
+	const paragraphStyles = props.fontPair.typography.p
+	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' ] ) }
@@ -67,7 +67,6 @@ const FontPairPicker = props => {
 							className="ugb-button-icon-control__edit"
 							label={ __( 'Edit', i18n ) }
 							icon="edit"
-							isSmall
 							onClick={ event => {
 								props.onEdit()
 								event.stopPropagation()

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,45 @@ 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 getIsChangeConfirmed = () => {
+		// No need to confirm when the current font pair is custom
+		// since changes are saved
+		if ( customFontPairs.find( fontPair => fontPair.name === selectedFontPairName ) ) {
+			return true
+		}
+
+		const isDirty = TYPOGRAPHY_TAGS.some( ( { selector } ) => {
+			return getIsAllowReset( selector )
+		} )
+
+		if ( isDirty ) {
+		// eslint-disable-next-line no-alert
+			const confirmChange = window.confirm( __( 'Changing font pair will override the previous changes. Do you want to proceed?', i18n ) )
+			return confirmChange
+		}
+		return true
+	}
+
 	const CustomFontPairPickers = applyFilters(
 		'stackable.global-settings.typography.font-pairs.customPicker',
 		Fragment,
@@ -255,6 +306,9 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 								fontPair={ FONT_PAIRS[ 0 ] }
 								isSelected={ selectedFontPairName === FONT_PAIRS[ 0 ].name }
 								onClick={ () => {
+									if ( ! getIsChangeConfirmed() ) {
+										return
+									}
 									updateSelectedFontPair( FONT_PAIRS[ 0 ].name )
 									changeStyles( FONT_PAIRS[ 0 ].typography )
 								} }
@@ -264,6 +318,9 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 								customFontPairs={ customFontPairs }
 								selected={ selectedFontPairName }
 								onClick={ ( name, typography ) => {
+									if ( ! getIsChangeConfirmed() ) {
+										return
+									}
 									updateSelectedFontPair( name )
 									changeStyles( typography )
 								} }
@@ -280,6 +337,9 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 									fontPair={ fontPair }
 									isSelected={ selectedFontPairName === fontPair.name }
 									onClick={ () => {
+										if ( ! getIsChangeConfirmed() ) {
+											return
+										}
 										updateSelectedFontPair( fontPair.name )
 										changeStyles( fontPair.typography )
 									} }
@@ -316,6 +376,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 }
 		/>
 	)
 }