Fix saving styles to save only user-edited props

There was a typo in StylesColorPanel property, and we were passing incorrect values.
StylesColorPanel.value expects user set values
StylesColorPanel.inheritedValue expects merged styles
See b66f9ff095/packages/edit-site/src/components/global-styles/screen-colors.js (L23-L28)
[MAILPOET-6335]
This commit is contained in:
Rostislav Wolny
2024-12-11 15:19:47 +01:00
committed by Aschepikov
parent b5e8cf84c8
commit c908cabcf6
3 changed files with 8 additions and 6 deletions

View File

@ -17,7 +17,7 @@ import { useEmailStyles } from '../../../hooks';
import { storeName } from '../../../store';
export function ScreenColors(): JSX.Element {
const { styles, defaultStyles, updateStyles } = useEmailStyles();
const { userStyles, styles, updateStyles } = useEmailStyles();
const theme = useSelect( ( select ) => select( storeName ).getTheme(), [] );
return (
@ -30,8 +30,8 @@ export function ScreenColors(): JSX.Element {
) }
/>
<StylesColorPanel
value={ styles }
inheritValue={ defaultStyles }
value={ userStyles }
inheritedValue={ styles }
onChange={ updateStyles }
settings={ theme?.settings }
panelId="colors"

View File

@ -27,6 +27,7 @@ export interface StyleProperties {
interface EmailStylesData {
styles: StyleProperties;
userStyles: StyleProperties;
defaultStyles: StyleProperties;
updateStyleProp: ( path, newValue ) => void;
updateStyles: ( newStyles: StyleProperties ) => void;
@ -144,8 +145,9 @@ export const useEmailStyles = (): EmailStylesData => {
);
return {
styles: deepmerge.all( [ defaultStyles || {}, styles || {} ] ),
defaultStyles,
styles: deepmerge.all( [ defaultStyles || {}, styles || {} ] ), // Merged styles
userStyles: userTheme?.styles, // Styles defined by user
defaultStyles, // Default styles from editors theme.json
updateStyleProp,
updateStyles,
};