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: Custom colors & fonts in the SiteGen customize sidebar is not preserved #452

Merged
merged 7 commits into from
Feb 7, 2024
Merged

Fix: Custom colors & fonts in the SiteGen customize sidebar is not preserved #452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
390755d
Save custom colors in the current data
mr-vara Feb 1, 2024
ad1bd88
Store the custom fonts
mr-vara Feb 1, 2024
9f66ce7
Fix lint issues
mr-vara Feb 5, 2024
d9db3fe
Fix lint issues
mr-vara Feb 5, 2024
c2c35fc
Revamp some of the items
mr-vara Feb 6, 2024
2b6f7db
Revamp some of the items
mr-vara Feb 6, 2024
f54596f
Take custom data from active instead of data[slug]
mr-vara Feb 6, 2024
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
1 change: 1 addition & 0 deletions ...ngSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const ColorPaletteIcon = ( {
setShowCustomColors = null,
} ) => {
const conicGradient = `conic-gradient(${ colors[ idx ].primary } 90deg, ${ colors[ idx ].secondary } 90deg 150deg, ${ colors[ idx ].tertiary } 150deg 330deg, ${ colors[ idx ].primary } 330deg 360deg)`;

const baseClassName =
'nfd-onboarding-sidebar--customize__color-palette-icon';
const handleClick = () => {
Expand Down
67 changes: 47 additions & 20 deletions src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ const DesignColorsPanel = forwardRef(
}, [ currentData ] );

const colorPalettes = customizeSidebarData?.colorPalettes;

const palettePrimaryColors = Object.entries( colorPalettes[ 0 ] ).map(
( [ , color ] ) => ( {
name: __( 'Custom', 'wp-module-onboarding' ),
Expand All @@ -99,6 +100,7 @@ const DesignColorsPanel = forwardRef(
} );

const [ colors ] = useState( palettes );
const [ customColors, setCustomColors ] = useState( null );
const [ selectedColor, setSelectedColor ] = useState( null );
const [ showCustomColors, setShowCustomColors ] = useState( false );
const [ isEditingCustomColors, setIsEditingCustomColors ] =
Expand All @@ -108,18 +110,32 @@ const DesignColorsPanel = forwardRef(
const [ selectedPalette, setSelectedPalette ] = useState( null );
const [ colorPickerCalledBy, setColorPickerCalledBy ] = useState( '' );
const [ showColorPicker, setShowColorPicker ] = useState( false );
const customPaletteId = colors.length - 1;

useEffect( () => {
if ( ! customColors ) {
const storedCustomColors =
currentData.sitegen.homepages.active.color
.customColors;
if ( storedCustomColors ) {
setCustomColors( storedCustomColors );
} else {
const defaultCustomColors = palettes[ 0 ];
setCustomColors( defaultCustomColors );
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ currentData ] );

const handleApplyCustomColors = () => {
setSelectedCustomColors( true );
setIsEditingCustomColors( false );
setSelectedPalette( customPaletteId );
colors[ selectedPalette ] = selectedColor;
setSelectedPalette( 'custom' );
setCustomColors( selectedColor );
arunshenoy99 marked this conversation as resolved.
Show resolved Hide resolved
};

const handleEditCustomColors = () => {
setSelectedPalette( customPaletteId );
setSelectedColor( colors[ customPaletteId ] );
setSelectedPalette( 'custom' );
setSelectedColor( customColors );
setIsEditingCustomColors( true );
};

Expand Down Expand Up @@ -168,20 +184,31 @@ const DesignColorsPanel = forwardRef(
return;
}

colorPalettes[ selectedPalette ].primary = selectedColor.primary;
if ( colorPalettes[ selectedPalette ].secondary ) {
colorPalettes[ selectedPalette ].secondary =
if ( selectedPalette === 'custom' ) {
currentData.sitegen.homepages.data[ slug ].color.customColors =
arunshenoy99 marked this conversation as resolved.
Show resolved Hide resolved
selectedColor;
currentData.sitegen.homepages.active.color.customColors =
selectedColor;
}

const colorPaletteIndex =
selectedPalette === 'custom' ? 0 : selectedPalette;
colorPalettes[ colorPaletteIndex ].primary = selectedColor.primary;
if ( colorPalettes[ colorPaletteIndex ].secondary ) {
colorPalettes[ colorPaletteIndex ].secondary =
selectedColor.secondary;
} else {
colorPalettes[ selectedPalette ].base = selectedColor.secondary;
colorPalettes[ colorPaletteIndex ].base =
selectedColor.secondary;
}

colorPalettes[ selectedPalette ].tertiary = selectedColor.tertiary;
colorPalettes[ colorPaletteIndex ].tertiary =
selectedColor.tertiary;

currentData.sitegen.homepages.data[ slug ].color.palette =
convertColorSchema( colorPalettes[ selectedPalette ] );
convertColorSchema( colorPalettes[ colorPaletteIndex ] );
currentData.sitegen.homepages.active.color.palette =
convertColorSchema( colorPalettes[ selectedPalette ] );
convertColorSchema( colorPalettes[ colorPaletteIndex ] );
setCurrentOnboardingData( currentData );
};

Expand Down Expand Up @@ -215,12 +242,12 @@ const DesignColorsPanel = forwardRef(

<div style={ { marginLeft: '5px' } }>
<ColorPaletteIcon
key={ customPaletteId }
idx={ customPaletteId }
key={ 'custom' }
idx={ 'custom' }
selectedPalette={ selectedPalette }
setSelectedPalette={ setSelectedPalette }
setSelectedColor={ setSelectedColor }
colors={ colors }
colors={ { custom: customColors } }
/>
</div>
</div>
Expand Down Expand Up @@ -280,8 +307,8 @@ const DesignColorsPanel = forwardRef(
};

const handlePickYourOwnColors = () => {
setSelectedPalette( customPaletteId );
setSelectedColor( colors[ customPaletteId ] );
setSelectedPalette( 'custom' );
setSelectedColor( customColors );
setShowCustomColors( true );
if ( ! selectedCustomColors ) {
setIsEditingCustomColors( true );
Expand Down Expand Up @@ -318,9 +345,9 @@ const DesignColorsPanel = forwardRef(
label={
idx === 0
? __(
'Default',
'wp-module-onboarding'
)
'Default',
'wp-module-onboarding'
)
: ''
}
selectedPalette={ selectedPalette }
Expand Down
18 changes: 18 additions & 0 deletions src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,12 +268,30 @@ const DesignFontsPanel = forwardRef(
( style ) => style.font_content
);

useEffect( () => {
if ( ! customFont.headings ) {
const storedCustomFonts =
currentData.sitegen.homepages.active.customFont;
if ( storedCustomFonts ) {
setCustomFont( storedCustomFonts );
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ currentData ] );

const handleUpdatePreviewSettings = () => {
let headings;
let body;
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 =
arunshenoy99 marked this conversation as resolved.
Show resolved Hide resolved
customFont;
currentData.sitegen.homepages.active.customFont =
customFont;
}
} else {
headings = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].headings })`;
body = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].body })`;
Expand Down
Loading