Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Use global styles aka user theme for editor styles

Browse Source 
[MAILPOET-6335]
This commit is contained in:
Rostislav Wolny
2024-12-09 16:21:37 +01:00
committed by Aschepikov
parent 8f512a7967
commit de03e84eb4
2 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/js/email-editor/src/hooks/use-email-css.ts
View File

@ -14,10 +14,10 @@ import { useGlobalStylesOutputWithConfig } from '../private-apis';
*/
import deepmerge from 'deepmerge';
import { EmailStyles, storeName } from '../store';
import { useEmailTheme } from './use-email-theme';
import { useUserTheme } from './use-user-theme';
export function useEmailCss() {
const { templateTheme } = useEmailTheme();
const { userTheme } = useUserTheme();
const { editorTheme } = useSelect(
( select ) => ( {
editorTheme: select( storeName ).getTheme(),
@ -30,13 +30,13 @@ export function useEmailCss() {
deepmerge.all( [
{},
editorTheme || {},
templateTheme || {},
userTheme || {},
] ) as EmailStyles,
[ editorTheme, templateTheme ]
[ editorTheme, userTheme ]
);
const [ styles ] = useGlobalStylesOutputWithConfig( mergedConfig );
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return [ styles ];
return [ styles || [] ];
}

19
packages/js/email-editor/src/hooks/use-email-styles.ts
View File

@ -2,7 +2,7 @@ import deepmerge from 'deepmerge';
import { useSelect } from '@wordpress/data';
import { useCallback } from '@wordpress/element';
import { storeName, TypographyProperties } from '../store';
import { useEmailTheme } from './use-email-theme';
import { useUserTheme } from './use-user-theme';
interface ElementProperties {
typography: TypographyProperties;
@ -68,10 +68,11 @@ export function setImmutably( setObject, setPath, value ): typeof setObject {
}
export const useEmailStyles = (): EmailStylesData => {
const { templateTheme, updateTemplateTheme } = useEmailTheme();
// const { templateTheme, updateTemplateTheme } = useEmailTheme();
const { userTheme, updateUserTheme } = useUserTheme();
// This is email level styling stored in post meta.
const styles = templateTheme?.styles;
const styles = userTheme?.styles;
// Default styles from theme.json.
const { styles: defaultStyles } = useSelect( ( select ) => ( {
@ -82,25 +83,25 @@ export const useEmailStyles = (): EmailStylesData => {
const updateStyles = useCallback(
( newStyles ) => {
const newTheme = {
...templateTheme,
...userTheme,
styles: newStyles,
};
updateTemplateTheme( newTheme );
updateUserTheme( newTheme );
},
[ updateTemplateTheme, templateTheme ]
[ updateUserTheme, userTheme ]
);
// Update an email style prop.
const updateStyleProp = useCallback(
( path, newValue ) => {
const newTheme = setImmutably(
templateTheme,
userTheme,
[ 'styles', ...path ],
newValue
);
updateTemplateTheme( newTheme );
updateUserTheme( newTheme );
},
[ updateTemplateTheme, templateTheme ]
[ updateUserTheme, userTheme ]
);
return {