Generate Google Font list with Bash Script. Closes #49

Few other tweaks were made to account for the slight change in format.

Things that could still be improved:
- More Customize API usage for manipulating settings.
- Allow any key to be used with the script.

app/customize/controls.php

@@ -33,9 +33,7 @@ function bigbox_customize_controls_enqueue_scripts( $wp_customize ) {
 
 	wp_localize_script(
 		'bigbox-customize-controls', 'bigboxCustomizeControls', apply_filters(
-			'bigbox_customize_controls_js', [
-			'fonts' => json_decode( file_get_contents( get_template_directory() . '/resources/data/google-fonts.json' ) ), // @codingStandardsIgnoreLine
-			]
+			'bigbox_customize_controls_js', []
 		)
 	);
 

app/customize/controls/type.php

@@ -13,6 +13,21 @@
 	exit; // Exit if accessed directly.
 }
 
+/**
+ * Add a list of Google Fonts to the JS settings.
+ *
+ * @since 1.5.0
+ *
+ * @param array $settings JS Settings.
+ * @return array
+ */
+function bigbox_customize_controls_js_fonts( $settings ) {
+	$settings['fonts'] = json_decode( file_get_contents( get_template_directory() . '/resources/data/google-fonts.json' ) ); // @codingStandardsIgnoreLine
+
+	return $settings;
+}
+add_filter( 'bigbox_customize_controls_js', 'bigbox_customize_controls_js_fonts' );
+
 /**
  * Type sections.
  *
@@ -70,23 +85,21 @@ function bigbox_customize_register_type_controls( $wp_customize ) {
 
 	$wp_customize->add_control(
 		'type-font-family-fallback', [
-			// Translators: Customizer control label.
-			'label'       => esc_html__( 'Fallback Font Family', 'bigbox' ),
-			'description' => esc_html__( 'Used when the Google font is unable to be loaded.', 'bigbox' ),
-			'type'        => 'select',
-			'choices'     => [
-				// Translators: Customize control value.
-				'sans-serif' => esc_html__( 'Sans Serif', 'bigbox' ),
+			'active_callback' => '__return_false',
+			'type'            => 'select',
+			'choices'         => [
 				// Translators: Customize control value.
 				'serif'      => esc_html__( 'Serif', 'bigbox' ),
 				// Translators: Customize control value.
-				'cursive'    => esc_html__( 'Cursive', 'bigbox' ),
+				'sans-serif' => esc_html__( 'Sans Serif', 'bigbox' ),
+				// Translators: Customize control value.
+				'display'    => esc_html__( 'Display', 'bigbox' ),
 				// Translators: Customize control value.
-				'fantasy'    => esc_html__( 'Fantasy', 'bigbox' ),
+				'cursive'    => esc_html__( 'Handwriting', 'bigbox' ),
 				// Translators: Customize control value.
 				'monospace'  => esc_html__( 'Monospace', 'bigbox' ),
 			],
-			'section'     => 'type',
+			'section'         => 'type',
 		]
 	);
 

bin/generate-google-font-list.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+# Include useful functions
+. "$(dirname "$0")/includes.sh"
+
+DATA=$(curl "https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyBmZBJAajbmRv6fSyfN3Dh5iz5XkWqYjDs")
+
+echo ${DATA} | jq '.items | map({family, category, variants, subsets})' > "./resources/data/google-fonts.json"

package.json

@@ -78,7 +78,7 @@
 		"check-licenses": "./bin/check-npm-licenses.sh; exit 0",
 		"css-lint": "./node_modules/.bin/stylelint resources/**/*.scss --syntax scss; exit 0",
 		"css-lint:fix": "./node_modules/.bin/stylelint resources/**/*.scss --syntax scss --fix; exit 0",
-		"generate-font-list": "ruby bin/generate-google-font-list.rb",
+		"generate-font-list": "./bin/generate-google-font-list.sh",
 		"package-theme": "./bin/package-theme.sh",
 		"setup-theme": "npm install && composer install && npm run dev"
 	},

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

@@ -13,7 +13,7 @@ const buildFamilyOptionsHtml = () => {
 	options.push( '<option value="default" data-variants="100,200,300,400,500,600,700,800">System Default</option>' );
 
 	_.each( fontList, ( data, family ) => {
-		options.push( `<option value="${ family }" data-variants="${ data.variants.join( ',' ) }">${ data.label }</option>` );
+		options.push( `<option value="${ data.family }" data-category="${ data.category }" data-variants="${ data.variants.join( ',' ) }">${ data.family }</option>` );
 	} );
 
 	return options.join( '' );
@@ -37,44 +37,59 @@ const buildWeightOptionsHtml = ( variants ) => {
 	return options.join( '' );
 };
 
+/**
+ * Update weight fields with available options.
+ *
+ * @param {Array} variants List of variants.
+ */
+const updateWeightFields = ( variants ) => {
+	_.each( [ 'base', 'bold' ], ( weight ) => {
+		const control = wp.customize.control( `type-font-weight-${ weight }` );
+		const value = control.setting();
+
+		const $select = $( control.container ).find( 'select' );
+
+		// Add HTML and select chosen item.
+		$select
+			.html( buildWeightOptionsHtml( variants ) );
+
+		const $selected = $select
+			.find( `[value="${ value }"]` );
+
+		// Select if exists in list.
+		if ( $selected.length > 0 ) {
+			$select
+				.val( value )
+				.prop( 'selected', true )
+				.trigger( 'change' );
+			// Select first item.
+		} else {
+			$select
+				.find( 'option:first-child' )
+				.prop( 'selected', true )
+				.trigger( 'change' );
+		}
+	} );
+};
+
+/**
+ * Update category (fallback) fields with available options.
+ *
+ * @param {string} category Font category.
+ */
+const updateCategoryField = ( category ) => {
+	if ( 'handwriting' === category ) {
+		category = 'cursive';
+	}
+
+	wp.customize.control( 'type-font-family-fallback', ( control ) => {
+		control.setting.set( category );
+	} );
+};
+
 ( function( $ ) {
 	// Wait for Customize ready.
 	wp.customize.bind( 'ready', () => {
-		/**
-		 * Update weight fields with available options.
-		 *
-		 * @param {Array} variants List of variants.
-		 */
-		const updateWeightFields = ( variants ) => {
-			_.each( [ 'base', 'bold' ], ( weight ) => {
-				const control = wp.customize.control( `type-font-weight-${ weight }` );
-				const value = control.setting();
-
-				const $select = $( control.container ).find( 'select' );
-
-				// Add HTML and select chosen item.
-				$select
-					.html( buildWeightOptionsHtml( variants ) );
-
-				const $selected = $select
-					.find( `[value="${ value }"]` );
-
-				// Select if exists in list.
-				if ( $selected.length > 0 ) {
-					$select
-						.val( value )
-						.prop( 'selected', true )
-						.trigger( 'change' );
-				// Select first item.
-				} else {
-					$select
-						.find( 'option:first-child' )
-						.prop( 'selected', true )
-						.trigger( 'change' );
-				}
-			} );
-		};
-
 		const familyControl = wp.customize.control( 'type-font-family' );
 		const familyValue = familyControl.setting();
 		const $familyInput = $( familyControl.container ).find( 'select' );
@@ -83,8 +98,10 @@ const buildWeightOptionsHtml = ( variants ) => {
 		$familyInput.on( 'change', function() {
 			const selected = $( this ).find( 'option:selected' );
 			const variants = selected.data( 'variants' ) ? selected.data( 'variants' ).split( ',' ) : [ 400, 500 ];
+			const category = selected.data( 'category' ) ? selected.data( 'category' ) : 'sans-serif';
 
 			updateWeightFields( variants );
+			updateCategoryField( category );
 		} );
 
 		// Build list of font families.

resources/assets/js/customize/controls/visibility.js

@@ -19,15 +19,6 @@
 				return !! to;
 			},
 		},
-		// Hide font fallback if using system default.
-		'type-font-family': {
-			controls: [
-				'type-font-family-fallback',
-			],
-			callback: function( to ) {
-				return 'default' !== to;
-			},
-		},
 	}, ( settingId, o ) => {
 		api( settingId, ( setting ) => {
 			// Handle multiple toggles.

resources/assets/js/customize/controls/walkthrough.js

@@ -6,7 +6,7 @@
 const {
 	active,
 	pointers,
-} = bigboxCustomizeControls.walkthrough;
+} = bigboxCustomizeControls.walkthrough || {};
 
 const template = wp.template( 'bigbox-pointer' );