feat: Use Global Typography sizes as preset

Author: Arukuen

src/block-components/typography/edit.js

@@ -30,6 +30,7 @@ import {
 } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { applyFilters } from '@wordpress/hooks'
+import { useSelect } from '@wordpress/data'
 
 const TYPOGRAPHY_SHADOWS = [
 	'none',
@@ -80,6 +81,10 @@ export const Controls = props => {
 	const attributeName = getAttrNameFunction( attrNameTemplate )
 	const text = getAttribute( 'text' )
 	const [ debouncedText, setDebouncedText ] = useState( text )
+	const { useTypographyAsPresets } = useSelect( select => {
+		const _useTypographyAsPresets = select( 'stackable/global-preset-controls.custom' )?.getUseTypographyAsPresets() ?? false
+		return { useTypographyAsPresets: { ..._useTypographyAsPresets } }
+	}, [] )
 
 	useEffect( () => {
 		if ( text !== debouncedText ) {
@@ -100,7 +105,7 @@ export const Controls = props => {
 
 	const onChangeContent = useCallback( text => setDebouncedText( escapeHTMLIfInvalid( text ) ), [] )
 
-	const presetMarks = usePresetControls( 'fontSizes' )?.getPresetMarks() || null
+	const presetMarks = usePresetControls( 'fontSizes' )?.getPresetMarks( useTypographyAsPresets ) || null
 
 	return (
 		<>

src/global-settings.php

@@ -412,6 +412,18 @@ public function register_global_settings() {
 				)
 			);
 
+			register_setting(
+				'stackable_global_settings',
+				'stackable_use_typography_as_presets',
+				array(
+					'type' => 'boolean',
+					'description' => __( 'Use Global Typography font sizes as preset', STACKABLE_I18N ),
+					'sanitize_callback' => 'sanitize_text_field',
+					'show_in_rest' => true,
+					'default' => '',
+				)
+			);
+
 			register_setting(
 				'stackable_global_settings',
 				'stackable_icon_library',

src/hooks/use-preset-controls.js

@@ -55,11 +55,12 @@ export const usePresetControls = property => {
 	}
 
 	// Get the merge preset marks with the CSS Variable value
-	const getPresetMarks = () => {
+	// Setting customOnly to true returns the preset marks for custom presets only
+	const getPresetMarks = ( customOnly = false ) => {
 		const prefix = PRESET_MAPPING[ property ].prefix
-		const mergedPresets = getMergedPresets()
+		const presets = customOnly ? allCustomPresets[ property ] ?? [] : getMergedPresets()
 
-		return mergedPresets
+		return presets
 			.filter( preset => ! ( preset?.isDiscarded ) )
 			.map( preset => ( {
 				...preset,

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

@@ -12,7 +12,7 @@ import FREE_FONT_PAIRS from './font-pairs.json'
 import {
 	PanelAdvancedSettings, AdvancedSelectControl, ControlSeparator, FontPairPicker, ProControlButton,
 } from '~stackable/components'
-import { fetchSettings } from '~stackable/util'
+import { fetchSettings, getDefaultFontSize } from '~stackable/util'
 import {
 	i18n, isPro, showProNotice,
 } from 'stackable'
@@ -29,41 +29,58 @@ import {
 	addFilter, applyFilters, doAction,
 } from '@wordpress/hooks'
 import { __, sprintf } from '@wordpress/i18n'
+import { dispatch, useSelect } from '@wordpress/data'
 
 export { GlobalTypographyStyles }
 
 const TYPOGRAPHY_TAGS = [
 	{
 		label: sprintf( __( 'Heading %d', i18n ), 1 ),
 		selector: 'h1',
+		presetName: '5XL',
+		presetSlug: 'xxxxx-large',
 	},
 	{
 		label: sprintf( __( 'Heading %d', i18n ), 2 ),
 		selector: 'h2',
+		presetName: '4XL',
+		presetSlug: 'xxxx-large',
 	},
 	{
 		label: sprintf( __( 'Heading %d', i18n ), 3 ),
 		selector: 'h3',
+		presetName: '3XL',
+		presetSlug: 'xxx-large',
 	},
 	{
 		label: sprintf( __( 'Heading %d', i18n ), 4 ),
 		selector: 'h4',
+		presetName: '2XL',
+		presetSlug: 'xx-large',
 	},
 	{
 		label: sprintf( __( 'Heading %d', i18n ), 5 ),
 		selector: 'h5',
+		presetName: 'XL',
+		presetSlug: 'x-large',
 	},
 	{
 		label: sprintf( __( 'Heading %d', i18n ), 6 ),
 		selector: 'h6',
+		presetName: 'L',
+		presetSlug: 'large',
 	},
 	{
 		label: __( 'Body Text', i18n ),
 		selector: 'p',
+		presetName: 'M',
+		presetSlug: 'medium',
 	},
 	{
 		label: __( 'Subtitle', i18n ),
 		selector: '.stk-subtitle',
+		presetName: 'S',
+		presetSlug: 'small',
 		help: (
 			<>
 				{ sprintf( __( "To apply this typography style, just add `%s` in your block\'s Additional CSS classes. Also make sure that `%s` tag is set to avoid conflict with other typography styles", i18n ), 'stk-subtitle', 'p' ) }
@@ -78,8 +95,15 @@ const TYPOGRAPHY_TAGS = [
 let saveTypographyThrottle = null
 let saveSelectedFontPairThrottle = null
 let saveCustomFontPairsThrottle = null
+let saveTypographyAsPresetsThrottle = null
 
 addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography', output => {
+	const { allCustomPresets, useTypographyAsPresets } = useSelect( select => {
+		const _customPresetControls = select( 'stackable/global-preset-controls.custom' )?.getCustomPresetControls() ?? {}
+		const _useTypographyAsPresets = select( 'stackable/global-preset-controls.custom' )?.getUseTypographyAsPresets() ?? false
+		return { allCustomPresets: { ..._customPresetControls }, useTypographyAsPresets: { ..._useTypographyAsPresets } }
+	}, [] )
+
 	const FONT_PAIRS = applyFilters( 'stackable.global-settings.typography.font-pairs.premium-font-pairs', FREE_FONT_PAIRS )
 
 	const [ isPanelOpen, setIsPanelOpen ] = useState( false )
@@ -104,6 +128,49 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 	// When typography styles are changed, trigger our editor style generator to update.
 	useEffect( () => {
 		doAction( 'stackable.global-settings.typography.update-trigger', typographySettings, applySettingsTo )
+
+		if ( useTypographyAsPresets ) {
+			const fontSizePresets = TYPOGRAPHY_TAGS
+				.filter( ( { presetSlug } ) => !! presetSlug )
+				.map( ( {
+					selector, presetName, presetSlug,
+				} ) => {
+					const size = typographySettings[ selector ]?.fontSize ?? getDefaultFontSize( selector ) ?? 16
+					const unit = typographySettings[ selector ]?.fontSizeUnit ?? 'px'
+					return {
+						name: presetName,
+						slug: presetSlug,
+						size: `${ size }${ unit }`,
+					}
+				} )
+			// Add the preset for extra small
+			let xSmallSize = typographySettings[ '.stk-subtitle' ]?.fontSize ?? getDefaultFontSize( '.stk-subtitle' ) ?? 16
+			let xSmallUnit = typographySettings[ '.stk-subtitle' ]?.fontSizeUnit ?? 'px'
+			if ( xSmallUnit === 'px' ) {
+				xSmallSize = Math.pow( xSmallSize / 16, 2 )
+				xSmallUnit = 'rem'
+			} else {
+				xSmallSize = Math.pow( xSmallSize, 2 )
+			}
+
+			fontSizePresets.push( {
+				name: 'XS',
+				slug: 'x-small',
+				size: `${ xSmallSize }${ xSmallUnit ?? 'px' }`,
+			} )
+			// Reverse the presets so it's from smallest to biggest
+			fontSizePresets.reverse()
+
+			const newSettings = { ...allCustomPresets, fontSizes: fontSizePresets }
+
+			clearTimeout( saveTypographyAsPresetsThrottle )
+			saveTypographyAsPresetsThrottle = setTimeout( () => {
+				const settings = new models.Settings( { stackable_global_custom_preset_controls: newSettings } ) // eslint-disable-line camelcase
+				settings.save()
+			}, 300 )
+
+			dispatch( 'stackable/global-preset-controls.custom' ).updateCustomPresetControls( newSettings )
+		}
 	}, [ JSON.stringify( typographySettings ), applySettingsTo ] )
 
 	// Scroll to the selected font pair when Global Typography tab is toggled