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

Move layout background colors to theme.json

Browse Source 
[MAILPOET-5640]
This commit is contained in:
Jan Lysý
2024-03-13 18:07:07 +01:00
committed by Jan Lysý
parent 2ea6bca7a3
commit 6f87dd6b01
5 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
mailpoet/assets/js/src/email-editor/engine/components/block-editor/block-editor.tsx
View File

@@ -48,6 +48,7 @@ export function BlockEditor() {
canUserEditMedia, canUserEditMedia,
hasFixedToolbar, hasFixedToolbar,
focusMode, focusMode,
styles,
layout, layout,
} = useSelect( } = useSelect(
(select) => ({ (select) => ({
@@ -62,6 +63,7 @@ export function BlockEditor() {
canUserEditMedia: select(coreStore).canUser('create', 'media'), canUserEditMedia: select(coreStore).canUser('create', 'media'),
hasFixedToolbar: select(storeName).isFeatureActive('fixedToolbar'), hasFixedToolbar: select(storeName).isFeatureActive('fixedToolbar'),
focusMode: select(storeName).isFeatureActive('focusMode'), focusMode: select(storeName).isFeatureActive('focusMode'),
styles: select(storeName).getStyles(),
layout: select(storeName).getLayout(), layout: select(storeName).getLayout(),
}), }),
[], [],
@@ -79,8 +81,7 @@ export function BlockEditor() {
{ id: postId }, { id: postId },
); );
// This is color of the wrapper and we need to decide if it is configurable or not. const layoutBackground = styles.color.background.layout;
const layoutBackground = '#cccccc';
let inlineStyles = useResizeCanvas(previewDeviceType); let inlineStyles = useResizeCanvas(previewDeviceType);
// Adjust the inline styles for desktop preview. We want to set email width and center it. // Adjust the inline styles for desktop preview. We want to set email width and center it.

2
mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/preview.tsx
View File

@@ -64,7 +64,7 @@ export function Preview({
[], [],
); );
const backgroundColor = styles.color.background; const backgroundColor = styles.color.background.content;
const headingFontFamily = styles.elements.h1.typography.fontFamily; const headingFontFamily = styles.elements.h1.typography.fontFamily;
const headingColor = styles.elements.h1.color.text; const headingColor = styles.elements.h1.color.text;
const headingFontWeight = styles.elements.h1.typography.fontWeight; const headingFontWeight = styles.elements.h1.typography.fontWeight;

5
mailpoet/assets/js/src/email-editor/engine/store/types.ts
View File

@@ -37,7 +37,10 @@ export type EmailStyles = {
}; };
}; };
color: { color: {
background: string; background: {
content: string;
layout: string;
};
text: string; text: string;
}; };
elements: { elements: {

8
mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php
View File

@@ -17,9 +17,6 @@ class Renderer {
const TEMPLATE_FILE = 'template.html'; const TEMPLATE_FILE = 'template.html';
const TEMPLATE_STYLES_FILE = 'template.css'; const TEMPLATE_STYLES_FILE = 'template.css';
/** @var string This color is used as a wrapper of the rendered email */
const LAYOUT_COLOR = '#cccccc';
/** /**
* @param \MailPoetVendor\CSS $cssInliner * @param \MailPoetVendor\CSS $cssInliner
*/ */
@@ -38,7 +35,8 @@ class Renderer {
$themeStyles = $this->settingsController->getEmailStyles(); $themeStyles = $this->settingsController->getEmailStyles();
$padding = $themeStyles['spacing']['padding']; $padding = $themeStyles['spacing']['padding'];
$contentBackground = $themeStyles['color']['background']; $contentBackground = $themeStyles['color']['background']['content'];
$layoutBackground = $themeStyles['color']['background']['layout'];
$contentFontFamily = $themeStyles['typography']['fontFamily']; $contentFontFamily = $themeStyles['typography']['fontFamily'];
$renderedBody = $this->contentRenderer->render($post); $renderedBody = $this->contentRenderer->render($post);
@@ -50,7 +48,7 @@ class Renderer {
// Replace style settings placeholders with values // Replace style settings placeholders with values
$template = str_replace( $template = str_replace(
['{{width}}', '{{layout_background}}', '{{content_background}}', '{{content_font_family}}', '{{padding_top}}', '{{padding_right}}', '{{padding_bottom}}', '{{padding_left}}'], ['{{width}}', '{{layout_background}}', '{{content_background}}', '{{content_font_family}}', '{{padding_top}}', '{{padding_right}}', '{{padding_bottom}}', '{{padding_left}}'],
[$layout['contentSize'], self::LAYOUT_COLOR, $contentBackground, $contentFontFamily, $padding['top'], $padding['right'], $padding['bottom'], $padding['left']], [$layout['contentSize'], $layoutBackground, $contentBackground, $contentFontFamily, $padding['top'], $padding['right'], $padding['bottom'], $padding['left']],
$template $template
); );

5
mailpoet/lib/EmailEditor/Engine/theme.json
View File

@@ -191,7 +191,10 @@
} }
}, },
"color": { "color": {
"background": "#ffffff", "background": {
"layout": "#f0f0f0",
"content": "#ffffff"
},
"text": "#000000" "text": "#000000"
}, },
"typography": { "typography": {