fix: add additional functionalities to usePresetControls

Author: Arukuen

src/block-components/helpers/size/edit.js

@@ -173,7 +173,7 @@ const Spacing = props => {
 		highlight: 'margin',
 	}
 
-	const presetMarks = usePresetControls( 'spacingSizes' )
+	const presetMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
 
 	return (
 		<>

src/block-components/typography/edit.js

@@ -100,7 +100,7 @@ export const Controls = props => {
 
 	const onChangeContent = useCallback( text => setDebouncedText( escapeHTMLIfInvalid( text ) ), [] )
 
-	const presetMarks = usePresetControls( 'fontSizes' )
+	const presetMarks = usePresetControls( 'fontSizes' )?.getPresetMarks() || null
 
 	return (
 		<>

src/hooks/use-preset-controls.js

@@ -14,37 +14,56 @@ const PRESET_MAPPING = {
 }
 
 export const usePresetControls = property => {
-	// Get the base presets
+	// Get the theme presets for the property
 	const [ themePresets ] = useSettings( PRESET_MAPPING[ property ].settings.join( '.' ) )
-	const basePresets = Array.isArray( themePresets ) && themePresets.length > 0
+	// Get all custom presets
+	const { allCustomPresets } = useSelect( select => {
+		const _customPresetControls = select( 'stackable/global-preset-controls.custom' )?.getCustomPresetControls()
+		return { allCustomPresets: { ..._customPresetControls } }
+	}, [] )
+
+	const hasThemePresets = Array.isArray( themePresets ) && themePresets.length > 0
+
+	// Get the theme/default presets if the user have one, else return the stackable presets
+	const basePresets = hasThemePresets
 		? themePresets
 		: PRESET_MAPPING[ property ].settings.reduce( ( acc, key ) => acc?.[ key ], DEFAULT_PRESETS.settings )
 
-	// Get the custom presets
-	const { customPresets } = useSelect( select => {
-		const _customPresetControls = select( 'stackable/global-preset-controls.custom' )?.getCustomPresetControls()
-		return { customPresets: { ..._customPresetControls }[ property ] ?? [] }
-	}, [] )
+	// Returns the base presets overriden by the custom presets
+	const getMergedPresets = () => {
+		const customPresets = allCustomPresets[ property ] ?? []
+		// Convert custom presets into a lookup object for fast access
+		const customMap = customPresets.reduce( ( acc, item ) => {
+			acc[ item.slug ] = item
+			return acc
+		}, {} )
+
+		// Merge base presets with custom presets (priority)
+		return basePresets.map( baseItem =>
+			customMap[ baseItem.slug ]
+				? { ...baseItem, ...customMap[ baseItem.slug ] }
+				: baseItem
+		)
+	}
+
+	// Get the merge preset marks with the CSS Variable value
+	const getPresetMarks = () => {
+		const prefix = PRESET_MAPPING[ property ].prefix
+		const mergedPresets = getMergedPresets()
+
+		return mergedPresets
+			.filter( preset => ! ( preset?.isDiscarded ) )
+			.map( preset => ( {
+				...preset,
+				value: `var(--stk--preset--${ prefix }--${ preset.slug }, ${ preset.size })`,
+			} ) )
+	}
 
-	// Convert custom presets into a lookup object for fast access
-	const customMap = customPresets.reduce( ( acc, item ) => {
-		acc[ item.slug ] = item
-		return acc
-	}, {} )
-
-	// Merge base presets with custom presets (priority)
-	const mergedPresets = basePresets.map( baseItem =>
-		customMap[ baseItem.slug ]
-			? { ...baseItem, ...customMap[ baseItem.slug ] }
-			: baseItem
-	)
-
-	const prefix = PRESET_MAPPING[ property ].prefix
-
-	return mergedPresets.map( preset => ( {
-		label: preset.name,
-		slug: preset.slug,
-		size: preset.size,
-		value: `var(--stk--preset--${ prefix }--${ preset.slug }, ${ preset.size })`,
-	} ) )
+	return {
+		hasThemePresets,
+		basePresets,
+		allCustomPresets,
+		getMergedPresets,
+		getPresetMarks,
+	}
 }