Removae old typography settings before applying new ones

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx

@@ -16,6 +16,23 @@ import { isEqual, noop } from 'lodash';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
+// Removes the typography settings from the styles when the user is changing
+// to a new typography variation. Otherwise, some of the user's old
+// typography settings will persist making new typography settings
+// depend on old ones
+const resetTypographySettings = ( variation, userStyles ) => {
+	if ( variation.settings.typography ) {
+		delete userStyles.typography;
+		for ( const elementKey in userStyles.elements ) {
+			if ( userStyles.elements[ elementKey ].typography ) {
+				delete userStyles.elements[ elementKey ].typography;
+			}
+		}
+	}
+
+	return userStyles;
+};
+
 export const VariationContainer = ( { variation, children } ) => {
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 	const context = useMemo( () => {
@@ -57,7 +74,10 @@ export const VariationContainer = ( { variation, children } ) => {
 					user.settings,
 					variation.settings
 				),
-				styles: variation.styles,
+				styles: mergeBaseAndUserConfigs(
+					resetTypographySettings( variation, user.styles ),
+					variation.styles
+				),
 			};
 		} );
 	};