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 deepmerge from 'deepmerge';
import { EmailStyles, storeName } from '../store'; import { EmailStyles, storeName } from '../store';
import { useEmailTheme } from './use-email-theme'; import { useUserTheme } from './use-user-theme';
export function useEmailCss() { export function useEmailCss() {
const { templateTheme } = useEmailTheme(); const { userTheme } = useUserTheme();
const { editorTheme } = useSelect( const { editorTheme } = useSelect(
( select ) => ( { ( select ) => ( {
editorTheme: select( storeName ).getTheme(), editorTheme: select( storeName ).getTheme(),
@ -30,13 +30,13 @@ export function useEmailCss() {
deepmerge.all( [ deepmerge.all( [
{}, {},
editorTheme || {}, editorTheme || {},
templateTheme || {}, userTheme || {},
] ) as EmailStyles, ] ) as EmailStyles,
[ editorTheme, templateTheme ] [ editorTheme, userTheme ]
); );
const [ styles ] = useGlobalStylesOutputWithConfig( mergedConfig ); const [ styles ] = useGlobalStylesOutputWithConfig( mergedConfig );
// eslint-disable-next-line @typescript-eslint/no-unsafe-return // 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 { useSelect } from '@wordpress/data';
import { useCallback } from '@wordpress/element'; import { useCallback } from '@wordpress/element';
import { storeName, TypographyProperties } from '../store'; import { storeName, TypographyProperties } from '../store';
import { useEmailTheme } from './use-email-theme'; import { useUserTheme } from './use-user-theme';
interface ElementProperties { interface ElementProperties {
typography: TypographyProperties; typography: TypographyProperties;
@ -68,10 +68,11 @@ export function setImmutably( setObject, setPath, value ): typeof setObject {
} }
export const useEmailStyles = (): EmailStylesData => { 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. // This is email level styling stored in post meta.
const styles = templateTheme?.styles; const styles = userTheme?.styles;
// Default styles from theme.json. // Default styles from theme.json.
const { styles: defaultStyles } = useSelect( ( select ) => ( { const { styles: defaultStyles } = useSelect( ( select ) => ( {
@ -82,25 +83,25 @@ export const useEmailStyles = (): EmailStylesData => {
const updateStyles = useCallback( const updateStyles = useCallback(
( newStyles ) => { ( newStyles ) => {
const newTheme = { const newTheme = {
...templateTheme, ...userTheme,
styles: newStyles, styles: newStyles,
}; };
updateTemplateTheme( newTheme ); updateUserTheme( newTheme );
}, },
[ updateTemplateTheme, templateTheme ] [ updateUserTheme, userTheme ]
); );
// Update an email style prop. // Update an email style prop.
const updateStyleProp = useCallback( const updateStyleProp = useCallback(
( path, newValue ) => { ( path, newValue ) => {
const newTheme = setImmutably( const newTheme = setImmutably(
templateTheme, userTheme,
[ 'styles', ...path ], [ 'styles', ...path ],
newValue newValue
); );
updateTemplateTheme( newTheme ); updateUserTheme( newTheme );
}, },
[ updateTemplateTheme, templateTheme ] [ updateUserTheme, userTheme ]
); );
return { return {