chore: move other functions to utils

Author: Arukuen

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

@@ -5,6 +5,7 @@ import { GlobalTypographyStyles } from './editor-loader'
 import TypographyPicker from './typography-picker'
 import { getThemeStyles } from './get-theme-styles'
 import FREE_FONT_PAIRS from './font-pairs.json'
+import { getAppliedTypeScale } from './utils'
 
 /**
  * External dependencies
@@ -256,24 +257,6 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 		return [ ...FONT_PAIRS, ...customFontPairs ].find( fontPair => fontPair.name === selectedFontPairName )
 	}
 
-	const getAppliedTypeScale = value => {
-		const typeScale = Number( value )
-		if ( Number.isNaN( typeScale ) ) {
-			return
-		}
-		return {
-			h1: { fontSize: Number( Math.pow( typeScale, 6 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
-			h2: { fontSize: Number( Math.pow( typeScale, 5 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
-			h3: { fontSize: Number( Math.pow( typeScale, 4 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
-			h4: { fontSize: Number( Math.pow( typeScale, 3 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
-			h5: { fontSize: Number( Math.pow( typeScale, 2 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
-			h6: { fontSize: Number( typeScale.toFixed( 3 ) ), fontSizeUnit: 'rem' },
-			p: { fontSize: 1, fontSizeUnit: 'rem' },
-			'.stk-subtitle': { fontSize: Number( ( 1 / typeScale ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
-			'.stk-button__inner-text': { fontSize: 1, fontSizeUnit: 'rem' },
-		}
-	}
-
 	const updateTypography = newSettings => {
 		setTypographySettings( newSettings )
 

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

@@ -0,0 +1,29 @@
+/**
+ * Generates a typographic scale based on the given value.
+ *
+ * This function returns an object where each key represents a text element
+ * (e.g., `h1`, `h2`, `p`, etc.) and its value contains a `fontSize` and `fontSizeUnit`,
+ * calculated using an exponential scale.
+ *
+ * @param {string|number} value - The base number to use for the typographic scale.
+ * @return {Object|undefined} An object mapping CSS selectors to their corresponding
+ *                              font size settings. Returns `undefined` if input is invalid.
+ */
+
+export const getAppliedTypeScale = value => {
+	const typeScale = Number( value )
+	if ( Number.isNaN( typeScale ) ) {
+		return
+	}
+	return {
+		h1: { fontSize: Number( Math.pow( typeScale, 6 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
+		h2: { fontSize: Number( Math.pow( typeScale, 5 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
+		h3: { fontSize: Number( Math.pow( typeScale, 4 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
+		h4: { fontSize: Number( Math.pow( typeScale, 3 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
+		h5: { fontSize: Number( Math.pow( typeScale, 2 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
+		h6: { fontSize: Number( typeScale.toFixed( 3 ) ), fontSizeUnit: 'rem' },
+		p: { fontSize: 1, fontSizeUnit: 'rem' },
+		'.stk-subtitle': { fontSize: Number( ( 1 / typeScale ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
+		'.stk-button__inner-text': { fontSize: 1, fontSizeUnit: 'rem' },
+	}
+}