diff --git a/onboarding/src/Components/CustomizeControls/TypographyControl.js b/onboarding/src/Components/CustomizeControls/TypographyControl.js index c8f3d0ac..f682f7f6 100644 --- a/onboarding/src/Components/CustomizeControls/TypographyControl.js +++ b/onboarding/src/Components/CustomizeControls/TypographyControl.js @@ -5,24 +5,42 @@ import classnames from 'classnames'; import SVG from '../../utils/svg'; import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import { useState } from '@wordpress/element'; -const TypographyControl = ( { siteStyle, handleFontClick, importData } ) => { - const themeMods = importData?.theme_mods; +const FALLBACK_FONT = 'Arial, Helvetica, sans-serif'; - const [ defaultBodyFont ] = useState( - themeMods?.neve_body_font_family || 'Arial, Helvetica, sans-serif' - ); +const getFontPairs = ( importData ) => { + if ( importData && importData.font_pairs && Object.keys( importData.font_pairs ).length ) { + return importData.font_pairs; + } + if ( tiobDash && tiobDash.fontParings ) { + return tiobDash.fontParings; + } + return null; +}; - const [ defaultHeadingsFont ] = useState( - themeMods?.neve_headings_font_family || 'Arial, Helvetica, sans-serif' - ); +const getDefaultFonts = ( importDataDefault ) => { + const themeMods = importDataDefault?.theme_mods; + return { + body: themeMods?.neve_body_font_family || FALLBACK_FONT, + heading: themeMods?.neve_headings_font_family || FALLBACK_FONT, + }; +}; - const { font } = siteStyle; - if ( ! tiobDash || ! tiobDash.fontParings ) { - return; +const TypographyControl = ( { + siteStyle, + handleFontClick, + importData, + importDataDefault, +} ) => { + const fontPairs = getFontPairs( importData ); + if ( ! fontPairs ) { + return null; } + const { body: defaultBodyFont, heading: defaultHeadingsFont } = + getDefaultFonts( importDataDefault ); + const { font } = siteStyle; + return (
@@ -45,9 +63,8 @@ const TypographyControl = ( { siteStyle, handleFontClick, importData } ) => { { __( 'Default', 'templates-patterns-collection' ) } - { Object.keys( tiobDash.fontParings ).map( ( slug ) => { - const { headingFont, bodyFont } = - tiobDash.fontParings[ slug ]; + { Object.keys( fontPairs ).map( ( slug ) => { + const { headingFont, bodyFont } = fontPairs[ slug ]; const headingStyle = { fontFamily: headingFont.font, }; @@ -82,15 +99,12 @@ export default compose( withDispatch( ( dispatch, - { - importData, - siteStyle, - setSiteStyle, - defaultBodyFont, - defaultHeadingsFont, - } + { importData, importDataDefault, siteStyle, setSiteStyle } ) => { const { setImportData, setRefresh } = dispatch( 'ti-onboarding' ); + const fontPairs = getFontPairs( importData ); + const { body: defaultBodyFont, heading: defaultHeadingsFont } = + getDefaultFonts( importDataDefault ); return { handleFontClick: ( fontKey ) => { @@ -100,14 +114,16 @@ export default compose( }; setSiteStyle( newStyle ); - const { bodyFont, headingFont } = - fontKey !== 'default' - ? tiobDash.fontParings[ fontKey ] + const pair = + fontKey !== 'default' && fontPairs && fontPairs[ fontKey ] + ? fontPairs[ fontKey ] : { bodyFont: { font: defaultBodyFont }, headingFont: { font: defaultHeadingsFont }, }; + const { bodyFont, headingFont } = pair; + const newImportData = { ...importData, theme_mods: { diff --git a/onboarding/src/Components/SiteSettings.js b/onboarding/src/Components/SiteSettings.js index d1281ad9..bd2d5527 100644 --- a/onboarding/src/Components/SiteSettings.js +++ b/onboarding/src/Components/SiteSettings.js @@ -189,6 +189,9 @@ export const SiteSettings = ( { ) } diff --git a/readme.txt b/readme.txt index 8022efb7..d72bd9a8 100644 --- a/readme.txt +++ b/readme.txt @@ -1,6 +1,6 @@ === Starter Sites & Templates by Neve === Contributors: themeisle -Tags: neve, templates, patterns, blocks, starter, sites, demo, content, import +Tags: starter sites, templates, block patterns, neve, gutenberg Requires at least: 5.5 Tested up to: 6.9 Requires PHP: 5.6 @@ -8,7 +8,7 @@ Stable tag: 1.2.27 License: GPLv3 License URI: https://www.gnu.org/licenses/gpl-3.0.en.html -This plugin gives you access to 100+ templates and ready-to-use starter sites. Neve theme is used for all the designs. +Access 100+ Gutenberg templates and ready-to-use starter sites for WordPress. All designs work with the Neve theme. One-click import, fully responsive. == Description ==