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

@ -111,7 +111,7 @@ class EditorPageRenderer {
'is_premium_plugin_active' => (bool)$this->servicesChecker->isPremiumPluginActive(), 'is_premium_plugin_active' => (bool)$this->servicesChecker->isPremiumPluginActive(),
'current_wp_user_email' => esc_js($currentUserEmail), 'current_wp_user_email' => esc_js($currentUserEmail),
'editor_settings' => $this->settingsController->get_settings(), 'editor_settings' => $this->settingsController->get_settings(),
'editor_theme' => $this->themeController->get_theme()->get_raw_data(), 'editor_theme' => $this->themeController->get_base_theme()->get_raw_data(),
'user_theme_post_id' => $this->userTheme->get_user_theme_post()->ID, 'user_theme_post_id' => $this->userTheme->get_user_theme_post()->ID,
'urls' => [ 'urls' => [
'listings' => admin_url('admin.php?page=mailpoet-newsletters'), 'listings' => admin_url('admin.php?page=mailpoet-newsletters'),

View File

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

View File

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