Skip to content

Commit 17ae06e

Browse files
ArukuenArukuen
committed
fix: move updating presets with typography to editor loader
1 parent c979509 commit 17ae06e

File tree

2 files changed

+72
-59
lines changed

2 files changed

+72
-59
lines changed

‎src/plugins/global-settings/typography/editor-loader.js‎

Lines changed: 63 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
/**
22
* Loads all the typography styles for the blocks in the editor.
33
*/
4+
/**
5+
* Internal dependencies
6+
*/
47

58
/**
69
* External dependencies
@@ -9,6 +12,7 @@ import {
912
createTypographyStyles,
1013
fetchSettings,
1114
loadGoogleFont,
15+
getDefaultFontSize,
1216
} from '~stackable/util'
1317
import { generateStyles } from '~stackable/block-components'
1418
import deepmerge from 'deepmerge'
@@ -24,9 +28,17 @@ import {
2428
import {
2529
addAction, removeAction, applyFilters, doAction, addFilter,
2630
} from '@wordpress/hooks'
27-
import { useSelect } from '@wordpress/data'
31+
import { useSelect, dispatch } from '@wordpress/data'
32+
import { models } from '@wordpress/api'
33+
34+
let saveTypographyAsPresetsThrottle = null
2835

2936
export const GlobalTypographyStyles = () => {
37+
const { allCustomPresets } = useSelect( select => {
38+
const _customPresetControls = select( 'stackable/global-preset-controls.custom' )?.getCustomPresetControls() ?? {}
39+
return { allCustomPresets: { ..._customPresetControls } }
40+
}, [] )
41+
3042
const [ typographySettings, setTypographySettings ] = useState( [] )
3143
const [ applySettingsTo, setApplySettingsTo ] = useState( '' )
3244
const [ isApplyBodyToHTML, setIsApplyBodyToHTML ] = useState( false )
@@ -50,6 +62,53 @@ export const GlobalTypographyStyles = () => {
5062
return select( 'core/edit-site' )?.getEditorMode() || select( 'core/edit-post' )?.getEditorMode()
5163
} )
5264

65+
// Update the custom presets when using typography as presets
66+
const updatePresetsWithTypography = ( useTypographyAsPresets, typographySettings, tags ) => {
67+
if ( useTypographyAsPresets ) {
68+
const fontSizePresets = tags
69+
.filter( ( { presetSlug } ) => !! presetSlug )
70+
.map( ( {
71+
selector, presetName, presetSlug,
72+
} ) => {
73+
// If no fontSize available, the unit should default to px
74+
const size = typographySettings[ selector ]?.fontSize
75+
const unit = size ? typographySettings[ selector ]?.fontSizeUnit : 'px'
76+
return {
77+
name: presetName,
78+
slug: presetSlug,
79+
size: `${ size ?? getDefaultFontSize( selector ) ?? 16 }${ unit ?? 'px' }`,
80+
}
81+
} )
82+
// Add the preset for extra small
83+
let xSmallSize = typographySettings[ '.stk-subtitle' ]?.fontSize ?? getDefaultFontSize( '.stk-subtitle' ) ?? 16
84+
let xSmallUnit = typographySettings[ '.stk-subtitle' ]?.fontSizeUnit ?? 'px'
85+
if ( xSmallUnit === 'px' ) {
86+
xSmallSize = Math.pow( xSmallSize / 16, 2 )
87+
xSmallUnit = 'rem'
88+
} else {
89+
xSmallSize = Math.pow( xSmallSize, 2 )
90+
}
91+
92+
fontSizePresets.push( {
93+
name: 'XS',
94+
slug: 'x-small',
95+
size: `${ xSmallSize }${ xSmallUnit ?? 'px' }`,
96+
} )
97+
// Reverse the presets so it's from smallest to biggest
98+
fontSizePresets.reverse()
99+
100+
const newSettings = { ...allCustomPresets, fontSizes: fontSizePresets }
101+
102+
clearTimeout( saveTypographyAsPresetsThrottle )
103+
saveTypographyAsPresetsThrottle = setTimeout( () => {
104+
const settings = new models.Settings( { stackable_global_custom_preset_controls: newSettings } ) // eslint-disable-line camelcase
105+
settings.save()
106+
}, 300 )
107+
108+
dispatch( 'stackable/global-preset-controls.custom' ).updateCustomPresetControls( newSettings )
109+
}
110+
}
111+
53112
useEffect( () => {
54113
// Get settings.
55114
fetchSettings().then( response => {
@@ -60,8 +119,10 @@ export const GlobalTypographyStyles = () => {
60119

61120
// Allow actions to trigger styles to update.
62121
addAction( 'stackable.global-settings.typography.update-trigger', 'stackable/typography-styles', (
63-
newTypographySettings, newAapplySettingsTo, newIsApplyBodyToHTML
122+
newTypographySettings, newAapplySettingsTo, newUseTypographyAsPresets, newIsApplyBodyToHTML, tags
64123
) => {
124+
updatePresetsWithTypography( newUseTypographyAsPresets, newTypographySettings, tags )
125+
65126
setTypographySettings( newTypographySettings )
66127
setApplySettingsTo( newAapplySettingsTo )
67128
setIsApplyBodyToHTML( newIsApplyBodyToHTML )

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

Lines changed: 9 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { getAppliedTypeScale } from './utils'
1313
import {
1414
PanelAdvancedSettings, AdvancedSelectControl, ControlSeparator, FontPairPicker, ProControlButton, AdvancedToggleControl,
1515
} from '~stackable/components'
16-
import { fetchSettings, getDefaultFontSize } from '~stackable/util'
16+
import { fetchSettings } from '~stackable/util'
1717
import {
1818
i18n, isPro, showProNotice,
1919
} from 'stackable'
@@ -32,7 +32,7 @@ import {
3232
addFilter, applyFilters, doAction,
3333
} from '@wordpress/hooks'
3434
import { __, sprintf } from '@wordpress/i18n'
35-
import { dispatch, useSelect } from '@wordpress/data'
35+
import { useSelect } from '@wordpress/data'
3636

3737
export { GlobalTypographyStyles }
3838

@@ -142,13 +142,11 @@ const TYPE_SCALE = [
142142
let saveTypographyThrottle = null
143143
let saveSelectedFontPairThrottle = null
144144
let saveCustomFontPairsThrottle = null
145-
let saveTypographyAsPresetsThrottle = null
146145

147146
addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography', output => {
148-
const { allCustomPresets, useTypographyAsPresets } = useSelect( select => {
149-
const _customPresetControls = select( 'stackable/global-preset-controls.custom' )?.getCustomPresetControls() ?? {}
147+
const { useTypographyAsPresets } = useSelect( select => {
150148
const _useTypographyAsPresets = select( 'stackable/global-preset-controls.custom' )?.getUseTypographyAsPresets() ?? false
151-
return { allCustomPresets: { ..._customPresetControls }, useTypographyAsPresets: _useTypographyAsPresets }
149+
return { useTypographyAsPresets: _useTypographyAsPresets }
152150
}, [] )
153151

154152
const FONT_PAIRS = applyFilters( 'stackable.global-settings.typography.font-pairs.premium-font-pairs', FREE_FONT_PAIRS )
@@ -192,57 +190,11 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
192190

193191
useEffect( () => {
194192
// When typography styles are changed, trigger our editor style generator to update.
195-
doAction( 'stackable.global-settings.typography.update-trigger', typographySettings, applySettingsTo, isApplyBodyToHTML )
196-
}, [ JSON.stringify( typographySettings ), applySettingsTo, isApplyBodyToHTML ] )
197-
198-
useEffect( () => {
199-
// When typography styles are changed, trigger our editor style generator to update.
200-
doAction( 'stackable.global-settings.typography.update-trigger', typographySettings, applySettingsTo, isApplyBodyToHTML )
201-
202-
// Update the custom presets when using typography as presets
203-
if ( useTypographyAsPresets ) {
204-
const fontSizePresets = TYPOGRAPHY_TAGS
205-
.filter( ( { presetSlug } ) => !! presetSlug )
206-
.map( ( {
207-
selector, presetName, presetSlug,
208-
} ) => {
209-
const size = typographySettings[ selector ]?.fontSize ?? getDefaultFontSize( selector ) ?? 16
210-
const unit = typographySettings[ selector ]?.fontSizeUnit ?? 'px'
211-
return {
212-
name: presetName,
213-
slug: presetSlug,
214-
size: `${ size }${ unit }`,
215-
}
216-
} )
217-
// Add the preset for extra small
218-
let xSmallSize = typographySettings[ '.stk-subtitle' ]?.fontSize ?? getDefaultFontSize( '.stk-subtitle' ) ?? 16
219-
let xSmallUnit = typographySettings[ '.stk-subtitle' ]?.fontSizeUnit ?? 'px'
220-
if ( xSmallUnit === 'px' ) {
221-
xSmallSize = Math.pow( xSmallSize / 16, 2 )
222-
xSmallUnit = 'rem'
223-
} else {
224-
xSmallSize = Math.pow( xSmallSize, 2 )
225-
}
226-
227-
fontSizePresets.push( {
228-
name: 'XS',
229-
slug: 'x-small',
230-
size: `${ xSmallSize }${ xSmallUnit ?? 'px' }`,
231-
} )
232-
// Reverse the presets so it's from smallest to biggest
233-
fontSizePresets.reverse()
234-
235-
const newSettings = { ...allCustomPresets, fontSizes: fontSizePresets }
236-
237-
clearTimeout( saveTypographyAsPresetsThrottle )
238-
saveTypographyAsPresetsThrottle = setTimeout( () => {
239-
const settings = new models.Settings( { stackable_global_custom_preset_controls: newSettings } ) // eslint-disable-line camelcase
240-
settings.save()
241-
}, 300 )
242-
243-
dispatch( 'stackable/global-preset-controls.custom' ).updateCustomPresetControls( newSettings )
244-
}
245-
}, [ JSON.stringify( typographySettings ), useTypographyAsPresets ] )
193+
// This also triggers updating presets with typography, and applying body font size to html.
194+
doAction( 'stackable.global-settings.typography.update-trigger',
195+
typographySettings, applySettingsTo, useTypographyAsPresets, isApplyBodyToHTML, TYPOGRAPHY_TAGS,
196+
)
197+
}, [ JSON.stringify( typographySettings ), applySettingsTo, useTypographyAsPresets, isApplyBodyToHTML ] )
246198

247199
// Scroll to the selected font pair when Global Typography tab is toggled
248200
useEffect( () => {

0 commit comments

Comments
 (0)