Skip to content

Commit 8e4a0ce

Browse files
ArukuenArukuen
authored
feat (global typography): add button to global typography (#3463)
* feat: add button to global typography * fix: style of button should use getFontFamily util * minor tweaks + fix error when selecting default font family --------- Co-authored-by: [email protected] <>
1 parent d18b4c6 commit 8e4a0ce

File tree

7 files changed

+75
-25
lines changed

7 files changed

+75
-25
lines changed

‎src/components/font-pair-picker/index.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ import { BaseControl, Button } from '~stackable/components'
88
*/
99
import { i18n } from 'stackable'
1010
import classNames from 'classnames'
11-
import { loadGoogleFont } from '~stackable/util'
11+
import {
12+
loadGoogleFont, getFontFamilyLabel, getFontFamily,
13+
} from '~stackable/util'
1214
import { omit } from 'lodash'
1315

1416
/**
@@ -26,19 +28,23 @@ const FontPairPicker = props => {
2628
loadGoogleFont( paragraphStyles.fontFamily )
2729
}
2830

31+
// Use the font family value for styling the buttons
32+
const headingFontFamilyValue = getFontFamily( headingStyles.fontFamily )?.replaceAll( '"', '' ) || ''
33+
const paragraphFontFamilyValue = getFontFamily( paragraphStyles.fontFamily )?.replaceAll( '"', '' ) || ''
34+
2935
const label = (
3036
<div>
3137
<span
32-
style={ omit( { ...headingStyles }, [ 'fontSize', 'lineHeight' ] ) }
38+
style={ omit( { ...headingStyles, fontFamily: headingFontFamilyValue }, [ 'fontSize', 'lineHeight' ] ) }
3339
className="ugb-global-settings-font-pair__label"
3440
>
35-
{ headingStyles?.fontFamily ? headingStyles.fontFamily : __( 'Default Heading', i18n ) }
41+
{ getFontFamilyLabel( headingStyles?.fontFamily, __( 'Default Heading', i18n ) ) }
3642
</span>
3743
<span
38-
style={ omit( { ...paragraphStyles }, [ 'fontSize', 'lineHeight' ] ) }
44+
style={ omit( { ...paragraphStyles, fontFamily: paragraphFontFamilyValue }, [ 'fontSize', 'lineHeight' ] ) }
3945
className="ugb-global-settings-font-pair__sub-label"
4046
>
41-
{ paragraphStyles?.fontFamily ? paragraphStyles?.fontFamily : __( 'Default Body', i18n ) }
47+
{ getFontFamilyLabel( paragraphStyles?.fontFamily, __( 'Default Body', i18n ) ) }
4248
</span>
4349
</div>
4450
)

‎src/global-settings.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -353,6 +353,7 @@ public function register_global_settings() {
353353
'h6' => $stackable_global_typography_schema,
354354
'p' => $stackable_global_typography_schema,
355355
'.stk-subtitle' => $stackable_global_typography_schema,
356+
'.stk-button__inner-text' => $stackable_global_typography_schema,
356357
)
357358
)
358359
)
@@ -400,6 +401,7 @@ public function register_global_settings() {
400401
'h6' => $stackable_global_typography_schema,
401402
'p' => $stackable_global_typography_schema,
402403
'.stk-subtitle' => $stackable_global_typography_schema,
404+
'.stk-button__inner-text' => $stackable_global_typography_schema,
403405
)
404406
),
405407
)

‎src/plugins/global-settings/typography/editor.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
.ugb-global-settings-font-pair-control {
9797
.components-base-control__field {
9898
border: 1px solid #ddd;
99-
padding: 8px;
99+
padding: 12px;
100100
margin-bottom: 8px;
101101
gap: 8px;
102102
cursor: pointer;
@@ -107,7 +107,7 @@
107107
}
108108

109109
.ugb-global-settings-font-pair__container {
110-
max-height: 250px;
110+
max-height: 270px;
111111
overflow: auto;
112112
border: 1px solid #ddd;
113113
border: none;
@@ -123,7 +123,7 @@
123123
.ugb-global-settings-font-pair__label {
124124
font-size: 1.2rem;
125125
display: block;
126-
margin-bottom: 4px;
126+
margin-bottom: 6px;
127127
line-height: 1.2;
128128
}
129129
.ugb-global-settings-font-pair__sub-label {

‎src/plugins/global-settings/typography/font-pairs.json‎

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,13 @@
2020
"h6": {
2121
"fontFamily": ""
2222
},
23+
"p": {
24+
"fontFamily": ""
25+
},
2326
".stk-subtitle": {
2427
"fontFamily": ""
2528
},
26-
"p": {
29+
".stk-button__inner-text": {
2730
"fontFamily": ""
2831
}
2932
}
@@ -49,10 +52,13 @@
4952
"h6": {
5053
"fontFamily": "DM Serif Display"
5154
},
55+
"p": {
56+
"fontFamily": "DM Sans"
57+
},
5258
".stk-subtitle": {
5359
"fontFamily": "DM Sans"
5460
},
55-
"p": {
61+
".stk-button__inner-text": {
5662
"fontFamily": "DM Sans"
5763
}
5864
}
@@ -78,10 +84,13 @@
7884
"h6": {
7985
"fontFamily": "Ultra"
8086
},
87+
"p": {
88+
"fontFamily": "PT Serif"
89+
},
8190
".stk-subtitle": {
8291
"fontFamily": "PT Serif"
8392
},
84-
"p": {
93+
".stk-button__inner-text": {
8594
"fontFamily": "PT Serif"
8695
}
8796
}
@@ -107,10 +116,13 @@
107116
"h6": {
108117
"fontFamily": "IBM Plex Sans Condensed"
109118
},
119+
"p": {
120+
"fontFamily": "IBM Plex Sans"
121+
},
110122
".stk-subtitle": {
111123
"fontFamily": "IBM Plex Sans"
112124
},
113-
"p": {
125+
".stk-button__inner-text": {
114126
"fontFamily": "IBM Plex Sans"
115127
}
116128
}
@@ -136,10 +148,13 @@
136148
"h6": {
137149
"fontFamily": "Work Sans"
138150
},
151+
"p": {
152+
"fontFamily": "Merriweather"
153+
},
139154
".stk-subtitle": {
140155
"fontFamily": "Merriweather"
141156
},
142-
"p": {
157+
".stk-button__inner-text": {
143158
"fontFamily": "Merriweather"
144159
}
145160
}
@@ -165,10 +180,13 @@
165180
"h6": {
166181
"fontFamily": "Oswald"
167182
},
183+
"p": {
184+
"fontFamily": "Source Sans Pro"
185+
},
168186
".stk-subtitle": {
169187
"fontFamily": "Source Sans Pro"
170188
},
171-
"p": {
189+
".stk-button__inner-text": {
172190
"fontFamily": "Source Sans Pro"
173191
}
174192
}
@@ -194,10 +212,13 @@
194212
"h6": {
195213
"fontFamily": "Barlow Condensed"
196214
},
215+
"p": {
216+
"fontFamily": "Montserrat"
217+
},
197218
".stk-subtitle": {
198219
"fontFamily": "Montserrat"
199220
},
200-
"p": {
221+
".stk-button__inner-text": {
201222
"fontFamily": "Montserrat"
202223
}
203224
}
@@ -223,10 +244,13 @@
223244
"h6": {
224245
"fontFamily": "Alegreya"
225246
},
247+
"p": {
248+
"fontFamily": "Alegreya"
249+
},
226250
".stk-subtitle": {
227251
"fontFamily": "Alegreya"
228252
},
229-
"p": {
253+
".stk-button__inner-text": {
230254
"fontFamily": "Alegreya"
231255
}
232256
}
@@ -252,10 +276,13 @@
252276
"h6": {
253277
"fontFamily": "Karla"
254278
},
279+
"p": {
280+
"fontFamily": "Merriweather"
281+
},
255282
".stk-subtitle": {
256283
"fontFamily": "Merriweather"
257284
},
258-
"p": {
285+
".stk-button__inner-text": {
259286
"fontFamily": "Merriweather"
260287
}
261288
}
@@ -281,10 +308,13 @@
281308
"h6": {
282309
"fontFamily": "Roboto Condensed"
283310
},
311+
"p": {
312+
"fontFamily": "Roboto"
313+
},
284314
".stk-subtitle": {
285315
"fontFamily": "Roboto"
286316
},
287-
"p": {
317+
".stk-button__inner-text": {
288318
"fontFamily": "Roboto"
289319
}
290320
}
@@ -310,10 +340,13 @@
310340
"h6": {
311341
"fontFamily": "Nunito Sans"
312342
},
343+
"p": {
344+
"fontFamily": "Nunito Sans"
345+
},
313346
".stk-subtitle": {
314347
"fontFamily": "Nunito Sans"
315348
},
316-
"p": {
349+
".stk-button__inner-text": {
317350
"fontFamily": "Nunito Sans"
318351
}
319352
}

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@ const TYPOGRAPHY_TAGS = [
5757
label: sprintf( __( 'Heading %d', i18n ), 6 ),
5858
selector: 'h6',
5959
},
60+
{
61+
label: __( 'Body Text', i18n ),
62+
selector: 'p',
63+
},
6064
{
6165
label: __( 'Subtitle', i18n ),
6266
selector: '.stk-subtitle',
@@ -66,8 +70,8 @@ const TYPOGRAPHY_TAGS = [
6670
</> ),
6771
},
6872
{
69-
label: __( 'Body Text', i18n ),
70-
selector: 'p',
73+
label: __( 'Button', i18n ),
74+
selector: '.stk-button__inner-text',
7175
},
7276
]
7377

‎src/util/font.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ export const isGoogleFontEnqueued = ( fontName, head = document.querySelector( '
184184
}
185185

186186
// Outputs the font family name for display purposes.
187-
export const getFontFamilyLabel = fontName => {
187+
export const getFontFamilyLabel = ( fontName, defaultLabel = '' ) => {
188188
// Modern font stacks.
189189
if ( MODERN_FONT_STACKS[ fontName ] ) {
190190
return MODERN_FONT_STACKS[ fontName ].label
@@ -195,10 +195,15 @@ export const getFontFamilyLabel = fontName => {
195195
return SYSTEM_FONT_STACKS[ fontName ].label
196196
}
197197

198-
return fontName || __( 'Default', i18n )
198+
return fontName || defaultLabel || __( 'Default', i18n )
199199
}
200200

201201
export const getFontFamily = fontName => {
202+
const defaultFontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
203+
if ( ! fontName ) {
204+
return defaultFontFamily
205+
}
206+
202207
// If the font is a CSS custom property, return it directly.
203208
if ( fontName.match( /^\s*var\(--/ ) ) {
204209
return fontName
@@ -219,7 +224,7 @@ export const getFontFamily = fontName => {
219224
return SYSTEM_FONT_STACKS[ fontName ].value
220225
}
221226

222-
return '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
227+
return defaultFontFamily
223228
}
224229

225230
/** TODO: deprecate this.

‎src/util/typography/font-sizes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ let fontSizes = {}
4343
* Fills up the fontSizes with font sizes.
4444
*/
4545
const initFontSizes = () => {
46-
const SELECTORS = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', '.stk-subtitle' ]
46+
const SELECTORS = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', '.stk-subtitle', '.stk-button__inner-text' ]
4747
fontSizes = {
4848
...getFontSizes( SELECTORS ),
4949
}

0 commit comments

Comments
 (0)