feat: add confirmation when changing font pair while dirty

Author: Arukuen

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

@@ -229,6 +229,25 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 		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,
@@ -287,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 )
 								} }
@@ -296,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 )
 								} }
@@ -312,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 )
 									} }