Prepare styles in store for sidebar
[MAILPOET-5638]
This commit is contained in:
@ -48,7 +48,7 @@ export function BlockEditor() {
|
|||||||
canUserEditMedia,
|
canUserEditMedia,
|
||||||
hasFixedToolbar,
|
hasFixedToolbar,
|
||||||
focusMode,
|
focusMode,
|
||||||
layoutStyles,
|
styles,
|
||||||
layout,
|
layout,
|
||||||
} = useSelect(
|
} = useSelect(
|
||||||
(select) => ({
|
(select) => ({
|
||||||
@ -63,7 +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'),
|
||||||
layoutStyles: select(storeName).getLayoutStyles(),
|
styles: select(storeName).getStyles(),
|
||||||
layout: select(storeName).getLayout(),
|
layout: select(storeName).getLayout(),
|
||||||
}),
|
}),
|
||||||
[],
|
[],
|
||||||
@ -86,7 +86,7 @@ export function BlockEditor() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
// This will be set by the user in the future in email or global styles.
|
// This will be set by the user in the future in email or global styles.
|
||||||
const layoutBackground = layoutStyles.background;
|
const layoutBackground = styles.layout.background;
|
||||||
|
|
||||||
let inlineStyles = useResizeCanvas(previewDeviceType);
|
let inlineStyles = useResizeCanvas(previewDeviceType);
|
||||||
// UseResizeCanvas returns null if the previewDeviceType is Desktop.
|
// UseResizeCanvas returns null if the previewDeviceType is Desktop.
|
||||||
@ -94,7 +94,7 @@ export function BlockEditor() {
|
|||||||
inlineStyles = {
|
inlineStyles = {
|
||||||
height: 'auto',
|
height: 'auto',
|
||||||
margin: '4rem auto', // 4em top/bottom to place the email document nicely vertically in canvas. Same value is used for title in WP Post editor.
|
margin: '4rem auto', // 4em top/bottom to place the email document nicely vertically in canvas. Same value is used for title in WP Post editor.
|
||||||
width: layoutStyles.width,
|
width: styles.layout.width,
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexFlow: 'column',
|
flexFlow: 'column',
|
||||||
};
|
};
|
||||||
|
@ -1,10 +1,6 @@
|
|||||||
import { mainSidebarEmailTab } from './constants';
|
import { mainSidebarEmailTab } from './constants';
|
||||||
import { State } from './types';
|
import { State } from './types';
|
||||||
import {
|
import { getEditorLayout, getEditorSettings, getEmailStyles } from './settings';
|
||||||
getEditorLayout,
|
|
||||||
getEditorSettings,
|
|
||||||
getEmailLayoutStyles,
|
|
||||||
} from './settings';
|
|
||||||
|
|
||||||
export function getInitialState(): State {
|
export function getInitialState(): State {
|
||||||
const searchParams = new URLSearchParams(window.location.search);
|
const searchParams = new URLSearchParams(window.location.search);
|
||||||
@ -21,7 +17,7 @@ export function getInitialState(): State {
|
|||||||
},
|
},
|
||||||
postId,
|
postId,
|
||||||
editorSettings: getEditorSettings(),
|
editorSettings: getEditorSettings(),
|
||||||
layoutStyles: getEmailLayoutStyles(),
|
styles: getEmailStyles(),
|
||||||
layout: getEditorLayout(),
|
layout: getEditorLayout(),
|
||||||
autosaveInterval: 60,
|
autosaveInterval: 60,
|
||||||
preview: {
|
preview: {
|
||||||
|
@ -125,8 +125,8 @@ export function getPreviewState(state: State): State['preview'] {
|
|||||||
return state.preview;
|
return state.preview;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getLayoutStyles(state: State): State['layoutStyles'] {
|
export function getStyles(state: State): State['styles'] {
|
||||||
return state.layoutStyles;
|
return state.styles;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getLayout(state: State): State['layout'] {
|
export function getLayout(state: State): State['layout'] {
|
||||||
|
@ -1,15 +1,11 @@
|
|||||||
import {
|
import { EmailEditorSettings, EmailStyles, EmailEditorLayout } from './types';
|
||||||
EmailEditorSettings,
|
|
||||||
EmailLayoutStyles,
|
|
||||||
EmailEditorLayout,
|
|
||||||
} from './types';
|
|
||||||
|
|
||||||
export function getEditorSettings(): EmailEditorSettings {
|
export function getEditorSettings(): EmailEditorSettings {
|
||||||
return window.MailPoetEmailEditor.editor_settings as EmailEditorSettings;
|
return window.MailPoetEmailEditor.editor_settings as EmailEditorSettings;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getEmailLayoutStyles(): EmailLayoutStyles {
|
export function getEmailStyles(): EmailStyles {
|
||||||
return window.MailPoetEmailEditor.email_layout_styles as EmailLayoutStyles;
|
return window.MailPoetEmailEditor.email_styles as EmailStyles;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getEditorLayout(): EmailEditorLayout {
|
export function getEditorLayout(): EmailEditorLayout {
|
||||||
|
@ -25,14 +25,19 @@ export type ExperimentalSettings = {
|
|||||||
|
|
||||||
export type EmailEditorSettings = EditorSettings & ExperimentalSettings;
|
export type EmailEditorSettings = EditorSettings & ExperimentalSettings;
|
||||||
|
|
||||||
export type EmailLayoutStyles = {
|
export type EmailStyles = {
|
||||||
width: string;
|
layout: {
|
||||||
background: string;
|
background: string;
|
||||||
padding: {
|
padding: {
|
||||||
bottom: string;
|
bottom: string;
|
||||||
left: string;
|
left: string;
|
||||||
right: string;
|
right: string;
|
||||||
top: string;
|
top: string;
|
||||||
|
};
|
||||||
|
width: string;
|
||||||
|
};
|
||||||
|
colors: {
|
||||||
|
background: string;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -53,7 +58,7 @@ export type State = {
|
|||||||
};
|
};
|
||||||
postId: number;
|
postId: number;
|
||||||
editorSettings: EmailEditorSettings;
|
editorSettings: EmailEditorSettings;
|
||||||
layoutStyles: EmailLayoutStyles;
|
styles: EmailStyles;
|
||||||
layout: EmailEditorLayout;
|
layout: EmailEditorLayout;
|
||||||
autosaveInterval: number;
|
autosaveInterval: number;
|
||||||
preview: {
|
preview: {
|
||||||
|
@ -5,7 +5,7 @@ interface Window {
|
|||||||
api_version: string;
|
api_version: string;
|
||||||
current_wp_user_email: string;
|
current_wp_user_email: string;
|
||||||
editor_settings: unknown; // Can't import type in global.d.ts. Typed in getEditorSettings() in store/settings.ts
|
editor_settings: unknown; // Can't import type in global.d.ts. Typed in getEditorSettings() in store/settings.ts
|
||||||
email_layout_styles: unknown; // Can't import type in global.d.ts. Typed in getEmailLayoutStyles() in store/settings.ts
|
email_styles: unknown; // Can't import type in global.d.ts. Typed in getEmailStyles() in store/settings.ts
|
||||||
editor_layout: unknown; // Can't import type in global.d.ts. Typed in getEmailLayout() in store/settings.ts
|
editor_layout: unknown; // Can't import type in global.d.ts. Typed in getEmailLayout() in store/settings.ts
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -58,7 +58,7 @@ class EmailEditor {
|
|||||||
'api_version' => esc_js($apiVersion),
|
'api_version' => esc_js($apiVersion),
|
||||||
'current_wp_user_email' => esc_js($currentUserEmail),
|
'current_wp_user_email' => esc_js($currentUserEmail),
|
||||||
'editor_settings' => $this->settingsController->getSettings(),
|
'editor_settings' => $this->settingsController->getSettings(),
|
||||||
'email_layout_styles' => $this->settingsController->getEmailLayoutStyles(),
|
'email_styles' => $this->settingsController->getEmailStyles(),
|
||||||
'editor_layout' => $this->settingsController->getLayout(),
|
'editor_layout' => $this->settingsController->getLayout(),
|
||||||
]
|
]
|
||||||
);
|
);
|
||||||
|
@ -19,7 +19,7 @@ class EmailApiController {
|
|||||||
*/
|
*/
|
||||||
public function getEmailData(): array {
|
public function getEmailData(): array {
|
||||||
return [
|
return [
|
||||||
'layout_styles' => $this->settingsController->getEmailLayoutStyles(),
|
'layout_styles' => $this->settingsController->getEmailStyles(),
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -42,7 +42,7 @@ class Renderer {
|
|||||||
$parser = new \WP_Block_Parser();
|
$parser = new \WP_Block_Parser();
|
||||||
$parsedBlocks = $parser->parse($post->post_content); // phpcs:ignore Squiz.NamingConventions.ValidVariableName.MemberNotCamelCaps
|
$parsedBlocks = $parser->parse($post->post_content); // phpcs:ignore Squiz.NamingConventions.ValidVariableName.MemberNotCamelCaps
|
||||||
|
|
||||||
$layoutStyles = $this->settingsController->getEmailLayoutStyles();
|
$layoutStyles = $this->settingsController->getEmailStyles()['layout'];
|
||||||
$themeData = $this->settingsController->getTheme()->get_data();
|
$themeData = $this->settingsController->getTheme()->get_data();
|
||||||
$contentBackground = $themeData['styles']['color']['background'] ?? $layoutStyles['background'];
|
$contentBackground = $themeData['styles']['color']['background'] ?? $layoutStyles['background'];
|
||||||
$contentFontFamily = $themeData['styles']['typography']['fontFamily'];
|
$contentFontFamily = $themeData['styles']['typography']['fontFamily'];
|
||||||
|
@ -94,26 +94,37 @@ class SettingsController {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @return array{width: string, background: string, padding: array{bottom: string, left: string, right: string, top: string}}
|
* @return array{
|
||||||
|
* layout: array{width: string,background: string,padding: array{bottom: string, left: string, right: string, top: string}},
|
||||||
|
* colors: array{background: string},
|
||||||
|
* typography: array[]
|
||||||
|
* }
|
||||||
*/
|
*/
|
||||||
public function getEmailLayoutStyles(): array {
|
public function getEmailStyles(): array {
|
||||||
return [
|
return [
|
||||||
'width' => self::EMAIL_WIDTH,
|
'layout' => [
|
||||||
'background' => self::EMAIL_LAYOUT_BACKGROUND,
|
'background' => self::EMAIL_LAYOUT_BACKGROUND,
|
||||||
'padding' => [
|
'width' => self::EMAIL_WIDTH,
|
||||||
'bottom' => self::FLEX_GAP,
|
'padding' => [
|
||||||
'left' => self::FLEX_GAP,
|
'bottom' => self::FLEX_GAP,
|
||||||
'right' => self::FLEX_GAP,
|
'left' => self::FLEX_GAP,
|
||||||
'top' => self::FLEX_GAP,
|
'right' => self::FLEX_GAP,
|
||||||
|
'top' => self::FLEX_GAP,
|
||||||
|
],
|
||||||
|
],
|
||||||
|
'colors' => [
|
||||||
|
'background' => '#000000',
|
||||||
|
],
|
||||||
|
'typography' => [
|
||||||
],
|
],
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
public function getLayoutWidthWithoutPadding(): string {
|
public function getLayoutWidthWithoutPadding(): string {
|
||||||
$layoutStyles = $this->getEmailLayoutStyles();
|
$layoutStyles = $this->getEmailStyles();
|
||||||
$width = $this->parseNumberFromStringWithPixels($layoutStyles['width']);
|
$width = $this->parseNumberFromStringWithPixels($layoutStyles['layout']['width']);
|
||||||
$width -= $this->parseNumberFromStringWithPixels($layoutStyles['padding']['left']);
|
$width -= $this->parseNumberFromStringWithPixels($layoutStyles['layout']['padding']['left']);
|
||||||
$width -= $this->parseNumberFromStringWithPixels($layoutStyles['padding']['right']);
|
$width -= $this->parseNumberFromStringWithPixels($layoutStyles['layout']['padding']['right']);
|
||||||
return "{$width}px";
|
return "{$width}px";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -51,8 +51,8 @@ class Columns implements BlockRenderer {
|
|||||||
|
|
||||||
$align = $parsedBlock['attrs']['align'] ?? null;
|
$align = $parsedBlock['attrs']['align'] ?? null;
|
||||||
if ($align !== 'full') {
|
if ($align !== 'full') {
|
||||||
$layoutPaddingLeft = $settingsController->getEmailLayoutStyles()['padding']['left'];
|
$layoutPaddingLeft = $settingsController->getEmailStyles()['layout']['padding']['left'];
|
||||||
$layoutPaddingRight = $settingsController->getEmailLayoutStyles()['padding']['right'];
|
$layoutPaddingRight = $settingsController->getEmailStyles()['layout']['padding']['right'];
|
||||||
} else {
|
} else {
|
||||||
$layoutPaddingLeft = '0px';
|
$layoutPaddingLeft = '0px';
|
||||||
$layoutPaddingRight = '0px';
|
$layoutPaddingRight = '0px';
|
||||||
|
@ -88,14 +88,16 @@ class RendererTest extends \MailPoetTest {
|
|||||||
],
|
],
|
||||||
]);
|
]);
|
||||||
$settingsControllerMock = $this->createMock(SettingsController::class);
|
$settingsControllerMock = $this->createMock(SettingsController::class);
|
||||||
$settingsControllerMock->method('getEmailLayoutStyles')->willReturn([
|
$settingsControllerMock->method('getEmailStyles')->willReturn([
|
||||||
'width' => '123px',
|
'layout' => [
|
||||||
'background' => '#123456',
|
'width' => '123px',
|
||||||
'padding' => [
|
'background' => '#123456',
|
||||||
'left' => '1px',
|
'padding' => [
|
||||||
'right' => '2px',
|
'left' => '1px',
|
||||||
'top' => '3px',
|
'right' => '2px',
|
||||||
'bottom' => '4px',
|
'top' => '3px',
|
||||||
|
'bottom' => '4px',
|
||||||
|
],
|
||||||
],
|
],
|
||||||
]);
|
]);
|
||||||
$settingsControllerMock->method('getTheme')->willReturn($themeJsonMock);
|
$settingsControllerMock->method('getTheme')->willReturn($themeJsonMock);
|
||||||
|
@ -8,10 +8,14 @@ use MailPoet\EmailEditor\Engine\ThemeController;
|
|||||||
class SettingsControllerTest extends \MailPoetUnitTest {
|
class SettingsControllerTest extends \MailPoetUnitTest {
|
||||||
public function testItGetsMainLayoutStyles(): void {
|
public function testItGetsMainLayoutStyles(): void {
|
||||||
$settingsController = new SettingsController($this->makeEmpty(ThemeController::class));
|
$settingsController = new SettingsController($this->makeEmpty(ThemeController::class));
|
||||||
$layoutStyles = $settingsController->getEmailLayoutStyles();
|
$styles = $settingsController->getEmailStyles();
|
||||||
verify($layoutStyles)->arrayHasKey('width');
|
verify($styles)->arrayHasKey('layout');
|
||||||
|
verify($styles)->arrayHasKey('colors');
|
||||||
|
verify($styles)->arrayHasKey('typography');
|
||||||
|
$layoutStyles = $styles['layout'];
|
||||||
verify($layoutStyles)->arrayHasKey('background');
|
verify($layoutStyles)->arrayHasKey('background');
|
||||||
verify($layoutStyles)->arrayHasKey('padding');
|
verify($layoutStyles)->arrayHasKey('padding');
|
||||||
|
verify($layoutStyles)->arrayHasKey('width');
|
||||||
}
|
}
|
||||||
|
|
||||||
public function testItGetsCorrectLayoutWidthWithoutPadding(): void {
|
public function testItGetsCorrectLayoutWidthWithoutPadding(): void {
|
||||||
|
Reference in New Issue
Block a user