Skip to content

Commit f8f88e4

Browse files
spencerfinnellspencerfinnell
committed
Better support for lack of Google Fonts
1 parent 873cc69 commit f8f88e4

File tree

4 files changed

+146
-112
lines changed

4 files changed

+146
-112
lines changed

‎app/customize/controls/type.php

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,14 @@
2222
* @return array
2323
*/
2424
function bigbox_customize_controls_js_fonts( $settings ) {
25+
$file = get_template_directory() . '/resources/data/google-fonts.json';
26+
27+
if ( ! file_exists( $file ) ) {
28+
return $settings;
29+
}
30+
2531
$settings['typography'] = [
26-
'fontList' => json_decode( file_get_contents( get_template_directory() . '/resources/data/google-fonts.json' ) ), // @codingStandardsIgnoreLine
32+
'fontList' => json_decode( file_get_contents( $file ) ), // @codingStandardsIgnoreLine
2733
];
2834

2935
return $settings;
@@ -57,10 +63,12 @@ function bigbox_customize_register_type_sections( $wp_customize ) {
5763
* @param WP_Customize_Manager $wp_customize The Customizer object.
5864
*/
5965
function bigbox_customize_register_type_controls( $wp_customize ) {
66+
$google = bigbox_has_google_fonts();
67+
6068
$wp_customize->add_setting(
6169
'type-font-family',
6270
[
63-
'default' => 'Lato',
71+
'default' => $google ? 'Lato' : 'default',
6472
'transport' => 'postMessage',
6573
'sanitize_callback' => 'sanitize_text_field',
6674
]
@@ -141,7 +149,7 @@ function bigbox_customize_register_type_controls( $wp_customize ) {
141149
/* translators: Customizer control label. */
142150
'label' => __( 'Base Font Weight', 'bigbox' ),
143151
'description' => '',
144-
'weight' => 'regular',
152+
'weight' => $google ? 'regular' : 500,
145153
],
146154
'bold' => [
147155
/* translators: Customizer control label. */

‎app/customize/output/type.php

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,15 @@
5454
],
5555
'declarations' => [
5656
'font-weight' => esc_attr( $weight_base ),
57-
'font-family' => sprintf( '"%1$s", %2$s', esc_attr( $family ), esc_attr( $fallback ) ),
5857
'font-size' => esc_attr( "{$size}em" ),
5958
],
6059
];
6160

61+
// Only add family if not using system default.
62+
if ( 'default' !== $family ) {
63+
$base['declarations']['font-family'] = sprintf( '"%1$s", %2$s', esc_attr( $family ), esc_attr( $fallback ) );
64+
}
65+
6266
return [
6367
$base,
6468

‎app/customize/type-functions.php

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,17 @@
1313
exit; // Exit if accessed directly.
1414
}
1515

16+
/**
17+
* Determine if the Google Font list is available.
18+
*
19+
* @since 2.2.0
20+
*
21+
* @return bool
22+
*/
23+
function bigbox_has_google_fonts() {
24+
return file_exists( get_template_directory() . '/resources/data/google-fonts.json' );
25+
}
26+
1627
/**
1728
* Get the chosen family.
1829
*
@@ -21,7 +32,8 @@
2132
* @return string
2233
*/
2334
function bigbox_get_theme_font_family() {
24-
$family = get_theme_mod( 'type-font-family', 'Lato' );
35+
$default = bigbox_has_google_fonts() ? 'Lato' : 'default';
36+
$family = get_theme_mod( 'type-font-family', $default );
2537

2638
/**
2739
* Filters the name of the font family used to generate custom CSS.
@@ -42,7 +54,7 @@ function bigbox_get_theme_font_family() {
4254
* @return string
4355
*/
4456
function bigbox_get_theme_font_weight( $weight_type = 'base' ) {
45-
$weight = get_theme_mod( "type-font-weight-{$weight_type}", 'base' === $weight_type ? 'normal' : 'bold' );
57+
$weight = get_theme_mod( "type-font-weight-{$weight_type}", 'base' === $weight_type ? 500 : 700 );
4658

4759
/**
4860
* Filters the font weight used to generate custom CSS.
@@ -86,6 +98,10 @@ function bigbox_get_google_font_family_string() {
8698
* @return mixed URL if needed. False otherwise.
8799
*/
88100
function bigbox_get_google_fonts_url() {
101+
if ( ! bigbox_has_google_fonts() ) {
102+
return false;
103+
}
104+
89105
$family_string = bigbox_get_google_font_family_string();
90106

91107
if ( ! $family_string ) {

‎resources/assets/js/customize/controls/typography.js

Lines changed: 112 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,134 @@
11
/* global wp, bigboxCustomizeControls, _, Event */
22

3-
const { fontList } = bigboxCustomizeControls.typography;
3+
( () => {
4+
if ( ! bigboxCustomizeControls.typography ) {
5+
return;
6+
}
47

5-
/**
6-
* Build HTML <option>s for font families.
7-
*
8-
* @return {string} String of HTML <option>s.
9-
*/
10-
const getFamilyOptions = () => {
11-
const options = [];
8+
const { fontList } = bigboxCustomizeControls.typography;
129

13-
_.each( fontList, ( data ) => {
14-
const familyOption = document.createElement( 'option' );
10+
/**
11+
* Build HTML <option>s for font families.
12+
*
13+
* @return {string} String of HTML <option>s.
14+
*/
15+
const getFamilyOptions = () => {
16+
const options = [];
1517

16-
familyOption.value = data.family;
17-
familyOption.text = data.family;
18-
familyOption.dataset.variants = data.variants.join( ',' );
19-
familyOption.dataset.category = data.category;
18+
_.each( fontList, ( data ) => {
19+
const familyOption = document.createElement( 'option' );
2020

21-
options.push( familyOption );
22-
} );
21+
familyOption.value = data.family;
22+
familyOption.text = data.family;
23+
familyOption.dataset.variants = data.variants.join( ',' );
24+
familyOption.dataset.category = data.category;
2325

24-
return options;
25-
};
26+
options.push( familyOption );
27+
} );
2628

27-
/**
28-
* Build HTML <option>s for weight variants.
29-
*
30-
* @param {Array} variants List of variants.
31-
* @return {string} String of HTML <option>s.
32-
*/
33-
const getWeightOptions = ( variants ) => {
34-
const options = [];
29+
return options;
30+
};
3531

36-
_.each( variants, ( variant ) => {
37-
if ( ! isNaN( variant ) || 'regular' === variant ) {
38-
const weightOption = document.createElement( 'option' );
32+
/**
33+
* Build HTML <option>s for weight variants.
34+
*
35+
* @param {Array} variants List of variants.
36+
* @return {string} String of HTML <option>s.
37+
*/
38+
const getWeightOptions = ( variants ) => {
39+
const options = [];
3940

40-
weightOption.value = variant;
41-
weightOption.text = variant;
41+
_.each( variants, ( variant ) => {
42+
if ( ! isNaN( variant ) || 'regular' === variant ) {
43+
const weightOption = document.createElement( 'option' );
4244

43-
options.push( weightOption );
44-
}
45-
} );
45+
weightOption.value = variant;
46+
weightOption.text = variant;
4647

47-
return options;
48-
};
49-
50-
/**
51-
* Update weight fields with available options.
52-
*
53-
* @param {Array} variants List of variants.
54-
*/
55-
const updateWeightFields = ( variants ) => {
56-
_.each( [ 'base', 'bold' ], ( weight ) => {
57-
const control = wp.customize.control( `type-font-weight-${ weight }` );
58-
const value = control.setting();
59-
60-
// Bring back to standard DOM element.
61-
const selectEl = control.container.find( 'select' ).get( 0 );
62-
63-
selectEl.innerHTML = '';
64-
65-
// Add HTML and select chosen item.
66-
getWeightOptions( variants ).forEach( ( familyWeight ) => selectEl.options.add( familyWeight ) );
67-
68-
// Determine if the previous value can be carried over.
69-
70-
// Value still exists.
71-
if ( variants[ value ] ) {
72-
selectEl.value = value;
73-
} else {
74-
const first = selectEl.options[ 0 ];
75-
const last = selectEl.options[ selectEl.options.length - 1 ];
76-
77-
// Select first if no previous item remains.
78-
if ( 'base' === weight ) {
79-
selectEl.value = first;
80-
selectEl.selectedIndex = 0;
81-
// Select last if no previous item remains for bold.
82-
} else {
83-
selectEl.value = last;
84-
selectEl.selectedIndex = selectEl.options.length - 1;
48+
options.push( weightOption );
8549
}
50+
} );
51+
52+
return options;
53+
};
54+
55+
/**
56+
* Update weight fields with available options.
57+
*
58+
* @param {Array} variants List of variants.
59+
*/
60+
const updateWeightFields = ( variants ) => {
61+
_.each( [ 'base', 'bold' ], ( weight ) => {
62+
const control = wp.customize.control( `type-font-weight-${ weight }` );
63+
const value = control.setting();
64+
65+
// Bring back to standard DOM element.
66+
const selectEl = control.container.find( 'select' ).get( 0 );
67+
68+
selectEl.innerHTML = '';
8669

87-
// Manually updated setting value.
88-
control.setting.bind( selectEl.value );
70+
// Add HTML and select chosen item.
71+
getWeightOptions( variants ).forEach( ( familyWeight ) => selectEl.options.add( familyWeight ) );
72+
73+
// Determine if the previous value can be carried over.
74+
75+
// Value still exists.
76+
if ( variants[ value ] ) {
77+
selectEl.value = value;
78+
} else {
79+
const first = selectEl.options[ 0 ];
80+
const last = selectEl.options[ selectEl.options.length - 1 ];
81+
82+
// Select first if no previous item remains.
83+
if ( 'base' === weight ) {
84+
selectEl.value = first;
85+
selectEl.selectedIndex = 0;
86+
// Select last if no previous item remains for bold.
87+
} else {
88+
selectEl.value = last;
89+
selectEl.selectedIndex = selectEl.options.length - 1;
90+
}
91+
92+
// Manually updated setting value.
93+
control.setting.bind( selectEl.value );
94+
}
95+
} );
96+
};
97+
98+
/**
99+
* Update category (fallback) fields with available options.
100+
*
101+
* @param {string} category Font category.
102+
*/
103+
const updateCategoryField = ( category ) => {
104+
if ( 'handwriting' === category ) {
105+
category = 'cursive';
89106
}
90-
} );
91-
};
92-
93-
/**
94-
* Update category (fallback) fields with available options.
95-
*
96-
* @param {string} category Font category.
97-
*/
98-
const updateCategoryField = ( category ) => {
99-
if ( 'handwriting' === category ) {
100-
category = 'cursive';
101-
}
102107

103-
wp.customize.control( 'type-font-family-fallback', ( control ) => control.setting.set( category ) );
104-
};
108+
wp.customize.control( 'type-font-family-fallback', ( control ) => control.setting.set( category ) );
109+
};
105110

106-
// Wait for Customize ready.
107-
wp.customize.bind( 'ready', () => {
108-
const familyControl = wp.customize.control( 'type-font-family' );
109-
const familyInput = familyControl.container.find( 'select' ).get( 0 );
111+
// Wait for Customize ready.
112+
wp.customize.bind( 'ready', () => {
113+
const familyControl = wp.customize.control( 'type-font-family' );
114+
const familyInput = familyControl.container.find( 'select' ).get( 0 );
110115

111-
// Update available weights when changing family.
112-
familyInput.addEventListener( 'change', ( e ) => {
113-
const selected = e.target.options[ e.target.options.selectedIndex ];
114-
const variants = selected.dataset.variants ? selected.dataset.variants.split( ',' ) : [ 400, 500 ];
115-
const category = selected.dataset.category || 'sans-serif';
116+
// Update available weights when changing family.
117+
familyInput.addEventListener( 'change', ( e ) => {
118+
const selected = e.target.options[ e.target.options.selectedIndex ];
119+
const variants = selected.dataset.variants ? selected.dataset.variants.split( ',' ) : [ 400, 500 ];
120+
const category = selected.dataset.category || 'sans-serif';
116121

117-
updateWeightFields( variants );
118-
updateCategoryField( category );
119-
} );
122+
updateWeightFields( variants );
123+
updateCategoryField( category );
124+
} );
120125

121-
getFamilyOptions().forEach( ( family ) => familyInput.add( family ) );
126+
getFamilyOptions().forEach( ( family ) => familyInput.add( family ) );
122127

123-
familyInput.value = familyControl.setting();
128+
familyInput.value = familyControl.setting();
124129

125-
// Trigger change on load to populate other fields.
126-
const event = new Event( 'change' );
127-
familyInput.dispatchEvent( event );
128-
} );
130+
// Trigger change on load to populate other fields.
131+
const event = new Event( 'change' );
132+
familyInput.dispatchEvent( event );
133+
} );
134+
} ) ();

0 commit comments

Comments
 (0)