Merge branch 'develop' into feat/global-color-schemes

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/components/pro-control/index.js

@@ -118,10 +118,10 @@ const LABELS = {
 		</ul>,
 	},
 	'font-pairs': {
-		title: __( 'Add Your Own Font Pairs', i18n ),
+		title: __( 'Premium Typography', i18n ),
 		description: <ul>
-			<li>{ __( 'Add your own custom Font Pairs', i18n ) }</li>
-			<li>{ __( 'Manage your custom Font Pairs', i18n ) }</li>
+			<li>{ __( 'Access to 90+ curated font pairs', i18n ) }</li>
+			<li>{ __( 'Create your own custom font pairs', i18n ) }</li>
 		</ul>,
 	},
 	'color-schemes': {

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 ] )
 }