Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix typography live preview not reflecting previous selections on refresh #227

Merged
merged 1 commit into from
May 4, 2023
+28 −77
Merged

Fix typography live preview not reflecting previous selections on refresh #227

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 28 additions & 77 deletions src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
import { useState, useEffect, useRef } from '@wordpress/element';

import { store as nfdOnboardingStore } from '../../../store';
import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes';
import { getThemeFonts } from '../../../utils/api/themes';
import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT } from '../../../../constants';

Expand All @@ -12,7 +12,6 @@ const DesignTypography = () => {
const [ isLoaded, setIsLoaded ] = useState( false );
const [ selectedFont, setSelectedFont ] = useState();
const [ fontPalettes, setFontPalettes ] = useState();
const [ isAccordionClosed, setIsAccordionClosed ] = useState( true );

const { storedPreviewSettings, currentData, themeStatus } = useSelect(
( select ) => {
Expand All @@ -34,19 +33,12 @@ const DesignTypography = () => {
} = useDispatch( nfdOnboardingStore );

const getFontStylesAndPatterns = async () => {
const fontPalettes = await getThemeFonts();
if ( fontPalettes?.error ) {
const fonts = await getThemeFonts();
if ( fonts?.error ) {
return updateThemeStatus( THEME_STATUS_INIT );
}
setFontPalettes( fontPalettes?.body );
setFontPalettes( fonts?.body );

if ( currentData?.data?.typography?.slug !== '' ) {
handleClick(
currentData?.data?.typography?.slug,
storedPreviewSettings,
fontPalettes?.body
);
}
const stylesCustom = storedPreviewSettings?.settings?.styles[ 0 ]?.css;
if ( stylesCustom ) {
// Loads in all CSS variables related to fontFamily
Expand All @@ -59,20 +51,27 @@ const DesignTypography = () => {
setIsLoaded( true );
};

useEffect( () => {
if (
currentData?.data?.typography?.slug !== '' &&
fontPalettes !== undefined
) {
setSelectedFont( currentData?.data?.typography?.slug );
handleClick( currentData?.data?.typography?.slug );
}
}, [ fontPalettes, storedPreviewSettings ] );

useEffect( () => {
if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus )
getFontStylesAndPatterns();
}, [ isLoaded, themeStatus ] );

const handleClick = async (
fontStyle,
selectedGlobalStyle = storedPreviewSettings,
fontPalettesCopy = fontPalettes
) => {
const handleClick = async ( fontStyle ) => {
setSelectedFont( fontStyle );

// Changes the Global Styles to Recompute css properties
const globalStylesCopy = selectedGlobalStyle;
const globalStylesCopy = storedPreviewSettings;
const fontPalettesCopy = fontPalettes;

if (
globalStylesCopy?.styles?.typography?.fontFamily &&
Expand Down Expand Up @@ -118,45 +117,28 @@ const DesignTypography = () => {
currentData.data.typography.data = fontPalettesCopy[ fontStyle ];

updatePreviewSettings(
// eslint-disable-next-line react-hooks/rules-of-hooks
useGlobalStylesOutput( globalStylesCopy, storedPreviewSettings )
);
setCurrentOnboardingData( currentData );
};

async function resetFonts() {
setSelectedFont( '' );
const globalStyles = await getGlobalStyles();
let selectedGlobalStyle;
if ( currentData?.data?.theme?.variation ) {
selectedGlobalStyle = globalStyles.body.filter(
( globalStyle ) =>
globalStyle.title === currentData.data.theme.variation
)[ 0 ];
} else if ( globalStyles.body[ 0 ]?.id === 0 ) {
selectedGlobalStyle = globalStyles.body[ 0 ];
}
updatePreviewSettings(
useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings )
);

currentData.data.typography.slug = '';
currentData.data.typography.data = [];
setCurrentOnboardingData( currentData );
}

function buildPalettes() {
const paletteRenderedList = [];
for ( const fontStyle in fontPalettes ) {
return Object.keys( fontPalettes ).map( ( fontStyle, idx ) => {
const splitLabel = fontPalettes[ fontStyle ]?.label.split( '&', 2 );
if ( splitLabel.length === 0 ) continue;
paletteRenderedList.push(
if ( splitLabel.length === 0 ) return null;
return (
<div
key={ fontStyle }
tabIndex={ idx + 1 }
role="button"
className={ `font-palette drawer-palette--button ${
selectedFont == fontStyle
selectedFont === fontStyle
? 'font-palette-selected drawer-palette--button--selected'
: ''
} ` }
onClick={ ( e ) => handleClick( fontStyle ) }
onClick={ () => handleClick( fontStyle ) }
onKeyDown={ () => handleClick( fontStyle ) }
>
<div
className="font-palette__icon drawer-palette--button__text"
Expand Down Expand Up @@ -192,44 +174,13 @@ const DesignTypography = () => {
</div>
</div>
);
}

return paletteRenderedList;
}

function buildCustomPalette() {
return (
<div className="custom-font-palette">
<div
className="custom-font-palette__top"
onClick={ ( e ) =>
setIsAccordionClosed( ! isAccordionClosed )
}
>
<div className="custom-font-palette__top-text">
SELECT CUSTOM FONTS
</div>
{ isAccordionClosed && (
<div className="custom-font-palette__top-icon">+</div>
) }
{ ! isAccordionClosed && (
<div className="custom-font-palette__top-icon">-</div>
) }
</div>
</div>
);
} );
}

return (
<div ref={ drawerFontOptions } className="theme-fonts--drawer">
<h2>{ __( 'Font Palettes', 'wp-module-onboarding' ) }</h2>
{ /* { selectedFont &&
<div className='theme-fonts--drawer--reset' onClick={resetFonts}>
<div>Reset Button</div>
</div>
} */ }
{ fontPalettes && buildPalettes() }
{ /* { fontPalettes && buildCustomPalette() } */ }
</div>
);
};
Expand Down