fixed: fonts are now lazy loaded and fixed delayed loading

Author: [email protected]

.config/webpack.config.dev.js

@@ -34,6 +34,7 @@ module.exports = [
 
 	output: {
 		filename: '[name].js',
+		chunkFilename: '[name].[contenthash].json', // Output filename for dynamically imported chunks
     },
 
     // Externals are only WordPress loaded libraries.

.config/webpack.config.prod.js

@@ -34,6 +34,7 @@ module.exports = [
 
 	output: {
 		filename: '[name].js',
+		chunkFilename: '[name].[contenthash].json', // Output filename for dynamically imported chunks
     },
 
     // Externals are only WordPress loaded libraries.

src/components/font-family-control/index.js

@@ -6,7 +6,6 @@ import { i18n } from 'stackable'
 /**
  * Internal dependencies
  */
-import fonts from './google-fonts.json'
 import {
 	loadGoogleFont,
 	MODERN_FONT_STACKS,
@@ -18,20 +17,32 @@ import {
  */
 import { __ } from '@wordpress/i18n'
 import { applyFilters } from '@wordpress/hooks'
-import { useMemo } from '@wordpress/element'
+import {
+	useMemo, useState, useEffect,
+} from '@wordpress/element'
 import AdvancedAutosuggestControl from '../advanced-autosuggest-control'
 
 import { select } from '@wordpress/data'
 
-const fontOptions = fonts.map( font => {
-	return { label: font.family, value: font.family }
-} )
+const loadGoogleFonts = async () => {
+	const { default: fonts } =
+		await import( /* webpackChunkName: "data/google-fonts" */ './google-fonts.json' )
+	return fonts.map( font => ( { label: font.family, value: font.family } ) )
+}
 
 const FontFamilyControl = props => {
 	const {
 		loadingThemeFont, themeFonts, themeFontOptions,
 	} = select( 'stackable/theme-fonts' ).getThemeFonts()
 
+	const [ googleFontOptions, setGoogleFontOptions ] = useState( [] )
+
+	useEffect( () => {
+		loadGoogleFonts().then( fontOptions => {
+			setGoogleFontOptions( fontOptions )
+		} )
+	}, [] )
+
 	const options = useMemo( () => {
 		const allFontOptions = [
 			{
@@ -53,7 +64,7 @@ const FontFamilyControl = props => {
 			{
 				id: 'google-fonts',
 				title: __( 'Google Fonts', i18n ),
-				options: fontOptions,
+				options: googleFontOptions,
 			},
 		]
 		if ( themeFonts.length ) {
@@ -64,7 +75,7 @@ const FontFamilyControl = props => {
 			} )
 		}
 		return applyFilters( 'stackable.font-family-control.options', allFontOptions )
-	}, [ loadingThemeFont ] )
+	}, [ loadingThemeFont, googleFontOptions ] )
 
 	return (
 		<AdvancedAutosuggestControl
@@ -74,7 +85,7 @@ const FontFamilyControl = props => {
 			onChange={ fontFamily => {
 				if ( ! themeFonts.includes( fontFamily ) ) {
 					// Load font if it's a Google font.
-					fontOptions.some( font => {
+					googleFontOptions.some( font => {
 						if ( font.value === fontFamily ) {
 							loadGoogleFont( fontFamily )
 							return true

src/hooks/use-font-loader.js

@@ -7,11 +7,9 @@ import { select } from '@wordpress/data'
 export const useFontLoader = fontFamilyValue => {
 	const { loadingThemeFont, themeFonts } = select( 'stackable/theme-fonts' ).getThemeFonts()
 	useEffect( () => {
-		if ( ! loadingThemeFont ) {
-			if ( ! themeFonts.includes( fontFamilyValue ) ) {
-				loadGoogleFont( fontFamilyValue )
-				doAction( 'stackable.font-loader.load', fontFamilyValue )
-			}
+		if ( ! themeFonts.includes( fontFamilyValue ) ) {
+			loadGoogleFont( fontFamilyValue )
+			doAction( 'stackable.font-loader.load', fontFamilyValue )
 		}
 	}, [ loadingThemeFont, fontFamilyValue ] )
 }

src/util/font.js

@@ -106,7 +106,18 @@ export const getGoogleFontURL = fontName => {
 	return `https://fonts.googleapis.com/css?family=${ family }:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic${ subset }`
 }
 
-export const isWebFont = fontName => fontName && ! fontName?.match( /^(sans[-+]serif|serif|monospace|serif-alt)$/i )
+export const isWebFont = fontName => {
+	if ( fontName ) {
+		if ( Object.keys( SYSTEM_FONT_STACKS ).includes( fontName ) ) {
+			return false
+		}
+		if ( Object.keys( MODERN_FONT_STACKS ).includes( fontName ) ) {
+			return false
+		}
+		return true
+	}
+	return false
+}
 
 /**
  * Returns the current block editor head