Skip to content

Commit 0d452f4

Browse files
ArukuenArukuen
committed
fix: move bulk of code to FontPairPicker, restructure with consistent naming
1 parent 8220865 commit 0d452f4

File tree

2 files changed

+78
-74
lines changed

2 files changed

+78
-74
lines changed

‎src/plugins/global-settings/typography/font-pair-picker.js‎

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,46 @@ import { BaseControl, Button } from '~stackable/components'
77
* External dependencies
88
*/
99
import { i18n } from 'stackable'
10-
import classnames from 'classnames'
10+
import classNames from 'classnames'
11+
import { loadGoogleFont } from '~stackable/util'
12+
import { omit } from 'lodash'
1113

1214
/**
1315
* WordPress dependencies
1416
*/
1517
import { __ } from '@wordpress/i18n'
1618

1719
const FontPairPicker = props => {
18-
const mainClasses = classnames( [
19-
props.className,
20+
const headingStyles = props.fontPair.typography.h1
21+
const paragraphStyles = props.fontPair.typography.p
22+
if ( headingStyles.fontFamily ) {
23+
loadGoogleFont( headingStyles.fontFamily )
24+
}
25+
if ( paragraphStyles.fontFamily ) {
26+
loadGoogleFont( paragraphStyles.fontFamily )
27+
}
28+
29+
const label = (
30+
<div>
31+
<span
32+
style={ omit( { ...headingStyles }, [ 'fontSize', 'lineHeight' ] ) }
33+
className="ugb-global-settings-font-pair__label"
34+
>
35+
{ headingStyles.fontFamily ? headingStyles.fontFamily : 'Theme Heading Default' }
36+
</span>
37+
<span
38+
style={ omit( { ...paragraphStyles }, [ 'fontSize', 'lineHeight' ] ) }
39+
className="ugb-global-settings-font-pair__sub-label"
40+
>
41+
{ paragraphStyles?.fontFamily ? paragraphStyles?.fontFamily : 'Theme Body Default' }
42+
</span>
43+
</div>
44+
)
45+
46+
const classes = classNames( [
2047
'ugb-button-icon-control',
2148
'ugb-global-settings-font-pair-control',
49+
{ 'ugb-global-settings-font-pair__selected': props?.isSelected },
2250
] )
2351

2452
return (
@@ -30,10 +58,10 @@ const FontPairPicker = props => {
3058
} } >
3159
<BaseControl
3260
key={ props.key }
33-
label={ props.label }
34-
className={ mainClasses }
61+
label={ label }
62+
className={ classes }
3563
>
36-
{ props?.isCustom &&
64+
{ props.fontPair?.isCustom &&
3765
<div className="ugb-button-icon-control__wrapper">
3866
<Button
3967
className="ugb-button-icon-control__edit"
@@ -52,8 +80,9 @@ const FontPairPicker = props => {
5280
}
5381

5482
FontPairPicker.defaultProps = {
55-
label: '',
56-
classname: '',
83+
key: '',
84+
fontPair: {},
85+
isSelected: false,
5786
onClick: () => {},
5887
onEdit: () => {},
5988
}

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

Lines changed: 41 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,9 @@ import FontPairPicker from './font-pair-picker'
1313
import {
1414
PanelAdvancedSettings, AdvancedSelectControl, ControlSeparator, InspectorSubHeader, Button,
1515
} from '~stackable/components'
16-
import { fetchSettings, loadGoogleFont } from '~stackable/util'
16+
import { fetchSettings } from '~stackable/util'
1717
import { i18n } from 'stackable'
1818
import { omit, head } from 'lodash'
19-
import classNames from 'classnames'
2019

2120
/**
2221
* WordPress dependencies
@@ -69,14 +68,16 @@ const TYPOGRAPHY_TAGS = [
6968
},
7069
]
7170

72-
let saveThrottle = null
71+
let saveTypographyThrottle = null
72+
let saveSelectedFontPairThrottle = null
73+
let saveCustomFontPairsThrottle = null
7374

7475
addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography', output => {
7576
const [ isPanelOpen, setIsPanelOpen ] = useState( false )
7677
const [ typographySettings, setTypographySettings ] = useState( [] )
7778
const [ applySettingsTo, setApplySettingsTo ] = useState( '' )
7879
const [ customFontPairs, setCustomFontPairs ] = useState( [] )
79-
const [ selectedFontPairName, setSelectedFontPairName ] = useState( 'theme-default' )
80+
const [ selectedFontPairName, setSelectedFontPairName ] = useState( 'theme-heading-default/theme-body-default' )
8081
const [ editingFontPairName, setEditingFontPairName ] = useState( '' )
8182

8283
const fontPairContainerRef = useRef( null )
@@ -118,18 +119,35 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
118119
...FONT_PAIRS.slice( 1 ),
119120
], [ customFontPairs ] )
120121

121-
const changeFontPair = name => {
122+
const updateTypography = newSettings => {
123+
setTypographySettings( newSettings )
124+
125+
clearTimeout( saveTypographyThrottle )
126+
saveTypographyThrottle = setTimeout( () => {
127+
const model = new models.Settings( {
128+
stackable_global_typography: [ newSettings ], // eslint-disable-line
129+
} )
130+
model.save()
131+
}, 500 )
132+
}
133+
134+
const updateSelectedFontPair = name => {
122135
setSelectedFontPairName( name )
123-
const model = new models.Settings( {
124-
stackable_selected_font_pair: name, // eslint-disable-line
125-
} )
126-
model.save()
136+
137+
clearTimeout( saveSelectedFontPairThrottle )
138+
saveSelectedFontPairThrottle = setTimeout( () => {
139+
const model = new models.Settings( {
140+
stackable_selected_font_pair: name, // eslint-disable-line
141+
} )
142+
model.save()
143+
}, 500 )
127144
}
128145

129-
const changeCustomFontPairs = fontPairs => {
146+
const updateCustomFontPairs = fontPairs => {
130147
setCustomFontPairs( fontPairs )
131-
clearTimeout( saveThrottle )
132-
saveThrottle = setTimeout( () => {
148+
149+
clearTimeout( saveCustomFontPairsThrottle )
150+
saveCustomFontPairsThrottle = setTimeout( () => {
133151
const model = new models.Settings( {
134152
stackable_custom_font_pairs: [ ...fontPairs ] , // eslint-disable-line
135153
} )
@@ -158,40 +176,25 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
158176
newSettings[ selector ] = styles
159177
} )
160178

161-
setTypographySettings( newSettings )
162-
163179
// Update the global styles immediately when reset font size is triggered.
164180
if ( Object.values( typography ).some( styles => styles && ! styles.fontSize ) ) {
165181
doAction( 'stackable.global-settings.typography-update-global-styles', newSettings )
166182
}
167183

168-
clearTimeout( saveThrottle )
169-
saveThrottle = setTimeout( () => {
170-
const model = new models.Settings( {
171-
stackable_global_typography: [ newSettings ], // eslint-disable-line
172-
} )
173-
model.save()
174-
}, 500 )
184+
updateTypography( newSettings )
175185

176186
if ( editingFontPairName ) {
177187
const updatedCustomFontPairs = customFontPairs
178188
.map( fontPair => fontPair.name === editingFontPairName ? { ...fontPair, typography: newSettings } : fontPair )
179-
changeCustomFontPairs( updatedCustomFontPairs )
189+
updateCustomFontPairs( updatedCustomFontPairs )
180190
}
181191
}
182192

183193
const resetStyles = selector => {
184194
const newSettings = omit( typographySettings, [ selector ] )
185-
setTypographySettings( newSettings )
186195
doAction( 'stackable.global-settings.typography-update-global-styles', newSettings )
187196

188-
clearTimeout( saveThrottle )
189-
saveThrottle = setTimeout( () => {
190-
const model = new models.Settings( {
191-
stackable_global_typography: [ newSettings ], // eslint-disable-line
192-
} )
193-
model.save()
194-
}, 500 )
197+
updateTypography( newSettings )
195198
}
196199

197200
const changeApplySettingsTo = value => {
@@ -208,9 +211,9 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
208211
name: `custom-${ Math.floor( Math.random() * new Date().getTime() ) % 100000 }`,
209212
}
210213

211-
setSelectedFontPairName( newFontPair.name )
212214
setEditingFontPairName( newFontPair.name )
213-
changeCustomFontPairs( [ newFontPair, ...customFontPairs ] )
215+
updateSelectedFontPair( newFontPair.name )
216+
updateCustomFontPairs( [ newFontPair, ...customFontPairs ] )
214217
}
215218

216219
const deleteFontPair = name => {
@@ -221,9 +224,9 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
221224
}
222225
const updatedCustomFontPairs = customFontPairs.filter( fontPair => fontPair.name !== name )
223226

224-
setSelectedFontPairName( '' )
225227
setEditingFontPairName( '' )
226-
changeCustomFontPairs( updatedCustomFontPairs )
228+
updateSelectedFontPair( '' )
229+
updateCustomFontPairs( updatedCustomFontPairs )
227230
}
228231

229232
return (
@@ -269,45 +272,17 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
269272

270273
<div className="ugb-global-settings-font-pair__container" ref={ fontPairContainerRef }>
271274
{ allFontPairs.map( fontPair => {
272-
const headingStyles = fontPair.typography.h1
273-
const paragraphStyles = fontPair.typography.p
274-
if ( headingStyles.fontFamily ) {
275-
loadGoogleFont( headingStyles.fontFamily )
276-
}
277-
if ( paragraphStyles.fontFamily ) {
278-
loadGoogleFont( paragraphStyles.fontFamily )
279-
}
280-
const label = (
281-
<div>
282-
<span
283-
style={ omit( { ...headingStyles }, [ 'fontSize', 'lineHeight' ] ) }
284-
className="ugb-global-settings-font-pair__label"
285-
>
286-
{ headingStyles.fontFamily ? headingStyles.fontFamily : 'Theme Heading Default' }
287-
</span>
288-
<span
289-
style={ omit( { ...paragraphStyles }, [ 'fontSize', 'lineHeight' ] ) }
290-
className="ugb-global-settings-font-pair__sub-label"
291-
>
292-
{ paragraphStyles?.fontFamily ? paragraphStyles?.fontFamily : 'Theme Body Default' }
293-
</span>
294-
</div>
295-
)
296-
297-
const className = classNames( { 'ugb-global-settings-font-pair__selected': selectedFontPairName === fontPair.name } )
298-
299275
return <FontPairPicker
300276
key={ fontPair.name }
301-
label={ label }
302-
isCustom={ fontPair?.isCustom ?? false }
303-
className={ className }
277+
fontPair={ fontPair }
278+
isSelected={ selectedFontPairName === fontPair.name }
304279
onClick={ () => {
305-
changeFontPair( fontPair.name )
280+
updateSelectedFontPair( fontPair.name )
306281
changeStyles( fontPair.typography )
307282
} }
308283
onEdit={ () => {
309284
setEditingFontPairName( fontPair.name )
310-
changeFontPair( fontPair.name )
285+
updateSelectedFontPair( fontPair.name )
311286
changeStyles( fontPair.typography )
312287
} }
313288
/>

0 commit comments

Comments
 (0)