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

Use the same format for styles as it is in theme.json

Browse Source 
This should be the first step to using theme.json format in DB and merging more style configurations to the final one.
[MAILPOET-5640]
This commit is contained in:
Jan Lysý
2024-03-08 10:11:14 +01:00
committed by Jan Lysý
parent c415f1efce
commit 5ceef236bf
21 changed files with 195 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
mailpoet/lib/EmailEditor/Engine/SettingsController.php
View File

@ -26,18 +26,6 @@ class SettingsController {
*/
const EMAIL_WIDTH = '660px';
/**
* Color of email layout background.
* @var string
*/
const EMAIL_LAYOUT_BACKGROUND = '#cccccc';
/**
* Gap between blocks in flex layouts
* @var string
*/
const FLEX_GAP = '16px';
private ThemeController $themeController;
/**
@ -59,7 +47,6 @@ class SettingsController {
$contentVariables = 'body {';
$contentVariables .= 'padding-bottom: var(--wp--style--root--padding-bottom);';
$contentVariables .= 'padding-top: var(--wp--style--root--padding-top);';
$contentVariables .= '--wp--style--block-gap:' . self::FLEX_GAP . ';';
$contentVariables .= '}';
$settings = array_merge($coreDefaultSettings, self::DEFAULT_SETTINGS);
@ -93,44 +80,29 @@ class SettingsController {
/**
* @return array{
* layout: array{width: string,background: string,padding: array{bottom: string, left: string, right: string, top: string}},
* colors: array{background: string},
* typography: array[]
* spacing: array{
* blockGap: string,
* padding: array{bottom: string, left: string, right: string, top: string}
* },
* color: array{
* background: array{layout: string, content: string}
* },
* typography: array{
* fontFamily: string
* }
* }
*/
public function getEmailStyles(): array {
return [
'layout' => [
'background' => self::EMAIL_LAYOUT_BACKGROUND,
'width' => self::EMAIL_WIDTH,
'padding' => [
'bottom' => self::FLEX_GAP,
'left' => self::FLEX_GAP,
'right' => self::FLEX_GAP,
'top' => self::FLEX_GAP,
],
],
'colors' => [
'background' => '#ffffff',
],
'typography' => [
],
// Value are only for purpose of displaying in the preview component in style sidebar
'elements' => [
'h1' => [
'color' => '#000000',
'fontWeight' => 'bold',
'fontFamily' => "Arial, 'Helvetica Neue', Helvetica, sans-serif",
],
],
];
$theme = $this->getTheme();
return $theme->get_data()['styles'];
}
public function getLayoutWidthWithoutPadding(): string {
$layoutStyles = $this->getEmailStyles();
$width = $this->parseNumberFromStringWithPixels($layoutStyles['layout']['width']);
$width -= $this->parseNumberFromStringWithPixels($layoutStyles['layout']['padding']['left']);
$width -= $this->parseNumberFromStringWithPixels($layoutStyles['layout']['padding']['right']);
$styles = $this->getEmailStyles();
$layout = $this->getLayout();
$width = $this->parseNumberFromStringWithPixels($layout['contentSize']);
$width -= $this->parseNumberFromStringWithPixels($styles['spacing']['padding']['left']);
$width -= $this->parseNumberFromStringWithPixels($styles['spacing']['padding']['right']);
return "{$width}px";
}