From 804c4cc45a22b7565814ee631ddb4df47c98ff61 Mon Sep 17 00:00:00 2001 From: Vara Date: Tue, 13 Feb 2024 16:43:05 +0530 Subject: [PATCH 1/7] Save the customize sidebar selection --- .../Customize/DesignColorsPanel/index.js | 20 ++++++++++++++ .../Customize/DesignFontsPanel/index.js | 26 ++++++++++++++++--- 2 files changed, 42 insertions(+), 4 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index cf72b0bda..0b12dee66 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -55,6 +55,10 @@ const DesignColorsPanel = forwardRef( setSelectedPalette( null ); setCurrentOnboardingData( updatedData ); } + currentData.sitegen.homepages.active.color.selectedPalette = null; + currentData.sitegen.homepages.data[ slug ].color.selectedPalette = + null; + setCurrentOnboardingData( currentData ); } }; @@ -123,6 +127,18 @@ const DesignColorsPanel = forwardRef( setCustomColors( defaultCustomColors ); } } + if ( ! selectedPalette ) { + const storedSelectedPalette = + currentData.sitegen.homepages.active.color + .selectedPalette; + if ( storedSelectedPalette ) { + setSelectedPalette(storedSelectedPalette); + if ( storedSelectedPalette === 'custom' ) { + setShowCustomColors( true ); + setSelectedCustomColors( true ); + } + } + } // eslint-disable-next-line react-hooks/exhaustive-deps }, [ currentData ] ); @@ -190,6 +206,10 @@ const DesignColorsPanel = forwardRef( currentData.sitegen.homepages.active.color.customColors = selectedColor; } + currentData.sitegen.homepages.data[ slug ].color.selectedPalette = + selectedPalette; + currentData.sitegen.homepages.active.color.selectedPalette = + selectedPalette; const colorPaletteIndex = selectedPalette === 'custom' ? 0 : selectedPalette; diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js index 36918a739..e107cf9e8 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js @@ -191,8 +191,12 @@ const DesignFontsPanel = forwardRef( const resetToDefaultFonts = () => { setStylesOfCurrentData(); setSelectedGroup( null ); - setShowCustomFonts( false ); - setSelectedCustomFont( null ); + const slug = currentData.sitegen?.homepages?.active?.slug; + if ( slug ) { + currentData.sitegen.homepages.data[ slug ].selectedFontGroup = null; + currentData.sitegen.homepages.active.selectedFontGroup = null; + setCurrentOnboardingData( currentData ); + } }; const setStylesOfCurrentData = ( heading = '', body = '' ) => { @@ -274,18 +278,30 @@ const DesignFontsPanel = forwardRef( currentData.sitegen.homepages.active.customFont; if ( storedCustomFonts ) { setCustomFont( storedCustomFonts ); + setSelectedCustomFont( storedCustomFonts ); + } + } + if ( ! selectedGroup ) { + const storedSelectedGroup = + currentData.sitegen.homepages.active.selectedFontGroup; + if ( storedSelectedGroup ) { + setSelectedGroup( storedSelectedGroup ); + if ( storedSelectedGroup === 'custom' ) { + setShowCustomFonts( true ); + } } } // eslint-disable-next-line react-hooks/exhaustive-deps }, [ currentData ] ); - + console.log('(((') + console.log(customFont) const handleUpdatePreviewSettings = () => { let headings; let body; + const slug = currentData.sitegen?.homepages?.active?.slug; if ( selectedGroup === 'custom' ) { headings = `var(--wp--preset--font-family--${ customFont.headings })`; body = `var(--wp--preset--font-family--${ customFont.body })`; - const slug = currentData.sitegen?.homepages?.active?.slug; if ( slug ) { currentData.sitegen.homepages.data[ slug ].customFont = customFont; @@ -296,6 +312,8 @@ const DesignFontsPanel = forwardRef( headings = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].headingsSlug })`; body = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].bodySlug })`; } + currentData.sitegen.homepages.data[ slug ].selectedFontGroup = selectedGroup; + currentData.sitegen.homepages.active.selectedFontGroup = selectedGroup; setStylesOfCurrentData( headings, body ); }; From 4d8d880f1ea245c49a20291bea17387ad68186f3 Mon Sep 17 00:00:00 2001 From: Vara Date: Tue, 13 Feb 2024 16:45:57 +0530 Subject: [PATCH 2/7] Fix lint issues --- .../Customize/DesignColorsPanel/index.js | 26 +++++++++---------- .../Customize/DesignFontsPanel/index.js | 14 +++++----- 2 files changed, 21 insertions(+), 19 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index 0b12dee66..aec1116fe 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -55,9 +55,11 @@ const DesignColorsPanel = forwardRef( setSelectedPalette( null ); setCurrentOnboardingData( updatedData ); } - currentData.sitegen.homepages.active.color.selectedPalette = null; - currentData.sitegen.homepages.data[ slug ].color.selectedPalette = + currentData.sitegen.homepages.active.color.selectedPalette = null; + currentData.sitegen.homepages.data[ + slug + ].color.selectedPalette = null; setCurrentOnboardingData( currentData ); } }; @@ -118,8 +120,7 @@ const DesignColorsPanel = forwardRef( useEffect( () => { if ( ! customColors ) { const storedCustomColors = - currentData.sitegen.homepages.active.color - .customColors; + currentData.sitegen.homepages.active.color.customColors; if ( storedCustomColors ) { setCustomColors( storedCustomColors ); } else { @@ -129,10 +130,9 @@ const DesignColorsPanel = forwardRef( } if ( ! selectedPalette ) { const storedSelectedPalette = - currentData.sitegen.homepages.active.color - .selectedPalette; + currentData.sitegen.homepages.active.color.selectedPalette; if ( storedSelectedPalette ) { - setSelectedPalette(storedSelectedPalette); + setSelectedPalette( storedSelectedPalette ); if ( storedSelectedPalette === 'custom' ) { setShowCustomColors( true ); setSelectedCustomColors( true ); @@ -204,12 +204,12 @@ const DesignColorsPanel = forwardRef( currentData.sitegen.homepages.data[ slug ].color.customColors = selectedColor; currentData.sitegen.homepages.active.color.customColors = - selectedColor; + selectedColor; } - currentData.sitegen.homepages.data[ slug ].color.selectedPalette = + currentData.sitegen.homepages.data[ slug ].color.selectedPalette = selectedPalette; currentData.sitegen.homepages.active.color.selectedPalette = - selectedPalette; + selectedPalette; const colorPaletteIndex = selectedPalette === 'custom' ? 0 : selectedPalette; @@ -365,9 +365,9 @@ const DesignColorsPanel = forwardRef( label={ idx === 0 ? __( - 'Default', - 'wp-module-onboarding' - ) + 'Default', + 'wp-module-onboarding' + ) : '' } selectedPalette={ selectedPalette } diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js index e107cf9e8..73dedee59 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js @@ -193,7 +193,8 @@ const DesignFontsPanel = forwardRef( setSelectedGroup( null ); const slug = currentData.sitegen?.homepages?.active?.slug; if ( slug ) { - currentData.sitegen.homepages.data[ slug ].selectedFontGroup = null; + currentData.sitegen.homepages.data[ slug ].selectedFontGroup = + null; currentData.sitegen.homepages.active.selectedFontGroup = null; setCurrentOnboardingData( currentData ); } @@ -293,8 +294,7 @@ const DesignFontsPanel = forwardRef( } // eslint-disable-next-line react-hooks/exhaustive-deps }, [ currentData ] ); - console.log('(((') - console.log(customFont) + const handleUpdatePreviewSettings = () => { let headings; let body; @@ -306,14 +306,16 @@ const DesignFontsPanel = forwardRef( currentData.sitegen.homepages.data[ slug ].customFont = customFont; currentData.sitegen.homepages.active.customFont = - customFont; + customFont; } } else { headings = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].headingsSlug })`; body = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].bodySlug })`; } - currentData.sitegen.homepages.data[ slug ].selectedFontGroup = selectedGroup; - currentData.sitegen.homepages.active.selectedFontGroup = selectedGroup; + currentData.sitegen.homepages.data[ slug ].selectedFontGroup = + selectedGroup; + currentData.sitegen.homepages.active.selectedFontGroup = + selectedGroup; setStylesOfCurrentData( headings, body ); }; From 98f92eef065745840e428f7606aaa1e50645c28f Mon Sep 17 00:00:00 2001 From: Vara Date: Wed, 14 Feb 2024 13:37:19 +0530 Subject: [PATCH 3/7] Fix issue with Reset --- .../components/Customize/DesignColorsPanel/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index aec1116fe..7005f03d9 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -30,6 +30,12 @@ const DesignColorsPanel = forwardRef( const slug = currentData.sitegen?.homepages?.active?.slug; if ( slug ) { const defaultDataToReset = defaultGlobalData[ slug ]; + currentData.sitegen.homepages.active.color.selectedPalette = + null; + currentData.sitegen.homepages.data[ + slug + ].color.selectedPalette = null; + setCurrentOnboardingData( currentData ); if ( defaultDataToReset ) { const updatedData = { @@ -55,12 +61,6 @@ const DesignColorsPanel = forwardRef( setSelectedPalette( null ); setCurrentOnboardingData( updatedData ); } - currentData.sitegen.homepages.active.color.selectedPalette = - null; - currentData.sitegen.homepages.data[ - slug - ].color.selectedPalette = null; - setCurrentOnboardingData( currentData ); } }; From 398431f3c2acd409f66f7e4e1d99fd5257c5df78 Mon Sep 17 00:00:00 2001 From: Vara Date: Wed, 14 Feb 2024 18:14:35 +0530 Subject: [PATCH 4/7] Revamp DesignColorsPanel code to make it more readable --- .../Customize/DesignColorsPanel/index.js | 133 ++++++++---------- 1 file changed, 56 insertions(+), 77 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index 7005f03d9..8e500a593 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -22,46 +22,38 @@ const DesignColorsPanel = forwardRef( ref ) => { const resetToDefaultColors = () => { - if ( isEditingCustomColors ) { - setSelectedPalette( 0 ); - setSelectedColor( colors[ 0 ] ); - setShowCustomColors( false ); - } const slug = currentData.sitegen?.homepages?.active?.slug; - if ( slug ) { - const defaultDataToReset = defaultGlobalData[ slug ]; - currentData.sitegen.homepages.active.color.selectedPalette = - null; - currentData.sitegen.homepages.data[ - slug - ].color.selectedPalette = null; - setCurrentOnboardingData( currentData ); - - if ( defaultDataToReset ) { - const updatedData = { - ...currentData, - sitegen: { - ...currentData.sitegen, - homepages: { - ...currentData.sitegen.homepages, - active: { - ...currentData.sitegen.homepages.active, - color: { - ...currentData.sitegen.homepages.active - .color, - palette: [ - ...defaultDataToReset.color.palette, - ], - }, - }, + if ( ! slug ) { + return; + } + const defaultDataToReset = defaultGlobalData[ slug ]; + if ( ! defaultDataToReset ) { + return; + } + const updatedData = { + ...currentData, + sitegen: { + ...currentData.sitegen, + homepages: { + ...currentData.sitegen.homepages, + active: { + ...currentData.sitegen.homepages.active, + color: { + ...currentData.sitegen.homepages.active.color, + selectedPalette: null, + palette: [ + ...defaultDataToReset.color.palette, + ], }, }, - }; - setSelectedColor( null ); - setSelectedPalette( null ); - setCurrentOnboardingData( updatedData ); - } - } + }, + }, + }; + + setSelectedColor( {} ); + setSelectedPalette( null ); + setShowCustomColors( false ); + setCurrentOnboardingData( updatedData ); }; useImperativeHandle( ref, () => ( { @@ -107,7 +99,7 @@ const DesignColorsPanel = forwardRef( const [ colors ] = useState( palettes ); const [ customColors, setCustomColors ] = useState( null ); - const [ selectedColor, setSelectedColor ] = useState( null ); + const [ selectedColor, setSelectedColor ] = useState( {} ); const [ showCustomColors, setShowCustomColors ] = useState( false ); const [ isEditingCustomColors, setIsEditingCustomColors ] = useState( false ); @@ -118,25 +110,19 @@ const DesignColorsPanel = forwardRef( const [ showColorPicker, setShowColorPicker ] = useState( false ); useEffect( () => { + const activeColor = currentData.sitegen.homepages.active.color; + if ( ! customColors ) { - const storedCustomColors = - currentData.sitegen.homepages.active.color.customColors; - if ( storedCustomColors ) { - setCustomColors( storedCustomColors ); - } else { - const defaultCustomColors = palettes[ 0 ]; - setCustomColors( defaultCustomColors ); - } + const customColorsToSet = activeColor.customColors; + setCustomColors( customColorsToSet || palettes[ 0 ] ); } + if ( ! selectedPalette ) { - const storedSelectedPalette = - currentData.sitegen.homepages.active.color.selectedPalette; - if ( storedSelectedPalette ) { - setSelectedPalette( storedSelectedPalette ); - if ( storedSelectedPalette === 'custom' ) { - setShowCustomColors( true ); - setSelectedCustomColors( true ); - } + const selectedPaletteToSet = activeColor.selectedPalette; + setSelectedPalette( selectedPaletteToSet ); + if ( selectedPaletteToSet === 'custom' ) { + setShowCustomColors( true ); + setSelectedCustomColors( true ); } } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -200,40 +186,33 @@ const DesignColorsPanel = forwardRef( return; } + const activeColor = currentData.sitegen.homepages.active.color; + if ( selectedPalette === 'custom' ) { - currentData.sitegen.homepages.data[ slug ].color.customColors = - selectedColor; - currentData.sitegen.homepages.active.color.customColors = - selectedColor; + activeColor.customColors = selectedColor; } - currentData.sitegen.homepages.data[ slug ].color.selectedPalette = - selectedPalette; - currentData.sitegen.homepages.active.color.selectedPalette = - selectedPalette; + + activeColor.selectedPalette = selectedPalette; const colorPaletteIndex = selectedPalette === 'custom' ? 0 : selectedPalette; - colorPalettes[ colorPaletteIndex ].primary = selectedColor.primary; - if ( colorPalettes[ colorPaletteIndex ].secondary ) { - colorPalettes[ colorPaletteIndex ].secondary = - selectedColor.secondary; - } else { - colorPalettes[ colorPaletteIndex ].base = - selectedColor.secondary; - } + const selectedPaletteColors = colorPalettes[ colorPaletteIndex ]; - colorPalettes[ colorPaletteIndex ].tertiary = - selectedColor.tertiary; + selectedPaletteColors.primary = selectedColor.primary; + selectedPaletteColors.secondary = selectedColor.secondary; + selectedPaletteColors.base = selectedColor.secondary; + selectedPaletteColors.tertiary = selectedColor.tertiary; - currentData.sitegen.homepages.data[ slug ].color.palette = - convertColorSchema( colorPalettes[ colorPaletteIndex ] ); - currentData.sitegen.homepages.active.color.palette = - convertColorSchema( colorPalettes[ colorPaletteIndex ] ); + activeColor.palette = convertColorSchema( selectedPaletteColors ); + currentData.sitegen.homepages.data[ slug ].color = activeColor; setCurrentOnboardingData( currentData ); }; useEffect( () => { - if ( selectedColor !== null && selectedPalette !== null ) { + if ( + Object.keys( selectedColor ).length !== 0 && + selectedPalette !== null + ) { handleUpdatePreviewSettings(); } // eslint-disable-next-line react-hooks/exhaustive-deps From f02913ca76eac726795e82d694d7ca7be4b8be65 Mon Sep 17 00:00:00 2001 From: Vara Date: Wed, 14 Feb 2024 18:37:21 +0530 Subject: [PATCH 5/7] Revamp DesignFontsPanel code to make it more readable --- .../Customize/DesignFontsPanel/index.js | 60 +++++++++---------- 1 file changed, 29 insertions(+), 31 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js index 73dedee59..6f5981406 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js @@ -192,16 +192,19 @@ const DesignFontsPanel = forwardRef( setStylesOfCurrentData(); setSelectedGroup( null ); const slug = currentData.sitegen?.homepages?.active?.slug; - if ( slug ) { - currentData.sitegen.homepages.data[ slug ].selectedFontGroup = - null; - currentData.sitegen.homepages.active.selectedFontGroup = null; - setCurrentOnboardingData( currentData ); + if ( ! slug ) { + return; } + currentData.sitegen.homepages.data[ slug ].selectedFontGroup = null; + currentData.sitegen.homepages.active.selectedFontGroup = null; + setCurrentOnboardingData( currentData ); }; const setStylesOfCurrentData = ( heading = '', body = '' ) => { const slug = currentData.sitegen?.homepages?.active?.slug; + if ( ! slug ) { + return; + } const styles = { blocks: [ { @@ -219,17 +222,14 @@ const DesignFontsPanel = forwardRef( ], }; - if ( slug ) { - currentData.sitegen.homepages.data[ slug ] = { - ...currentData.sitegen.homepages.data[ slug ], - styles, - }; - currentData.sitegen.homepages.active = { - ...currentData.sitegen.homepages.active, - styles, - }; - setCurrentOnboardingData( currentData ); - } + const updatedData = { + ...currentData.sitegen.homepages.data[ slug ], + styles, + }; + + currentData.sitegen.homepages.data[ slug ] = updatedData; + currentData.sitegen.homepages.active = updatedData; + setCurrentOnboardingData( currentData ); }; useImperativeHandle( ref, () => ( { @@ -274,22 +274,20 @@ const DesignFontsPanel = forwardRef( ); useEffect( () => { - if ( ! customFont.headings ) { - const storedCustomFonts = - currentData.sitegen.homepages.active.customFont; - if ( storedCustomFonts ) { - setCustomFont( storedCustomFonts ); - setSelectedCustomFont( storedCustomFonts ); - } + const activeCustomFont = + currentData.sitegen.homepages.active.customFont; + const storedSelectedGroup = + currentData.sitegen.homepages.active.selectedFontGroup; + + if ( ! customFont.headings && activeCustomFont ) { + setCustomFont( activeCustomFont ); + setSelectedCustomFont( activeCustomFont ); } - if ( ! selectedGroup ) { - const storedSelectedGroup = - currentData.sitegen.homepages.active.selectedFontGroup; - if ( storedSelectedGroup ) { - setSelectedGroup( storedSelectedGroup ); - if ( storedSelectedGroup === 'custom' ) { - setShowCustomFonts( true ); - } + + if ( ! selectedGroup && storedSelectedGroup ) { + setSelectedGroup( storedSelectedGroup ); + if ( storedSelectedGroup === 'custom' ) { + setShowCustomFonts( true ); } } // eslint-disable-next-line react-hooks/exhaustive-deps From 64cf19c83de1dd859da40b6a1edc4a3c698922c8 Mon Sep 17 00:00:00 2001 From: Vara Date: Fri, 16 Feb 2024 11:09:47 +0530 Subject: [PATCH 6/7] Fix issue with fonts in the preview page --- src/OnboardingSPA/steps/SiteGen/Preview/index.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js index 030a782ec..fed3f2747 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js @@ -191,6 +191,22 @@ const SiteGenPreview = () => { const data = homepages[ slug ]; const newPreviewSettings = cloneDeep( globalStyles[ 0 ] ); newPreviewSettings.settings.color.palette = data.color.palette; + const body = + data.styles?.blocks[ 0 ]?.[ 'core/body' ].typography.fontFamily; + const headings = + data.styles?.blocks[ 0 ]?.[ 'core/heading' ].typography + .fontFamily; + if ( newPreviewSettings.styles.typography ) { + newPreviewSettings.styles.typography.fontFamily = body; + } + if ( + newPreviewSettings.styles.blocks[ 'core/heading' ].typography + ) { + newPreviewSettings.styles.blocks[ + 'core/heading' + ].typography.fontFamily = headings; + } + let blockGrammar = ''; [ 'header', 'content', 'footer' ].forEach( ( part ) => { if ( part in data ) { From 52f9d205fe8ea3ae7ab0fa23c9bcdef26a0a40c4 Mon Sep 17 00:00:00 2001 From: Vara Date: Tue, 20 Feb 2024 12:22:46 +0530 Subject: [PATCH 7/7] Fix issue with preselected fonts --- .../Sidebar/components/Customize/DesignFontsPanel/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js index 6f5981406..5c9f21429 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js @@ -284,7 +284,10 @@ const DesignFontsPanel = forwardRef( setSelectedCustomFont( activeCustomFont ); } - if ( ! selectedGroup && storedSelectedGroup ) { + if ( + ! selectedGroup && + ( storedSelectedGroup || storedSelectedGroup === 0 ) + ) { setSelectedGroup( storedSelectedGroup ); if ( storedSelectedGroup === 'custom' ) { setShowCustomFonts( true );