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

Add support for the site theme's color palette

Browse Source 
[MAILPOET-5741]
This commit is contained in:
Rostislav Wolny
2024-02-22 14:09:56 +01:00
committed by Rostislav Wolný
parent e5d11f99d4
commit 5f2b5e4bd4
3 changed files with 63 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,7 +54,7 @@ class SettingsController {
public function getSettings(): array {
$coreDefaultSettings = get_default_block_editor_settings();
$editorTheme = $this->getTheme();
$themeSettings = $editorTheme->get_settings();
$themeSettings = $this->themeController->getSettings();
// body selector is later transformed to .editor-styles-wrapper
// setting padding for bottom and top is needed because \WP_Theme_JSON::get_stylesheet() set them only for .wp-site-blocks selector

24
mailpoet/lib/EmailEditor/Engine/ThemeController.php
View File

@ -25,8 +25,18 @@ class ThemeController {
return $this->themeJson;
}
public function getSettings(): array {
$emailEditorThemeSettings = $this->getTheme()->get_settings();
$siteThemeSettings = WP_Theme_JSON_Resolver::get_theme_data()->get_settings();
$emailEditorThemeSettings['color']['palette']['theme'] = [];
if (isset($siteThemeSettings['color']['palette']['theme'])) {
$emailEditorThemeSettings['color']['palette']['theme'] = $siteThemeSettings['color']['palette']['theme'];
}
return $emailEditorThemeSettings;
}
public function getStylesheetForRendering(): string {
$emailThemeSettings = $this->getTheme()->get_settings();
$emailThemeSettings = $this->getSettings();
$cssPresets = '';
// Font family classes
@ -38,7 +48,8 @@ class ThemeController {
$cssPresets .= ".has-{$fontSize['slug']}-font-size { font-size: {$fontSize['size']}; } \n";
}
// Color palette classes
foreach ($emailThemeSettings['color']['palette']['default'] as $color) {
$colorDefinitions = array_merge($emailThemeSettings['color']['palette']['theme'], $emailThemeSettings['color']['palette']['default']);
foreach ($colorDefinitions as $color) {
$cssPresets .= ".has-{$color['slug']}-color { color: {$color['color']}; } \n";
$cssPresets .= ".has-{$color['slug']}-background-color { background-color: {$color['color']}; } \n";
}
@ -54,7 +65,7 @@ class ThemeController {
}
public function translateSlugToFontSize(string $fontSize): string {
$settings = $this->getTheme()->get_settings();
$settings = $this->getSettings();
foreach ($settings['typography']['fontSizes']['default'] as $fontSizeDefinition) {
if ($fontSizeDefinition['slug'] === $fontSize) {
return $fontSizeDefinition['size'];
@ -64,10 +75,11 @@ class ThemeController {
}
public function translateSlugToColor(string $colorSlug): string {
$settings = $this->getTheme()->get_settings();
foreach ($settings['color']['palette']['default'] as $colorDefinition) {
$settings = $this->getSettings();
$colorDefinitions = array_merge($settings['color']['palette']['theme'], $settings['color']['palette']['default']);
foreach ($colorDefinitions as $colorDefinition) {
if ($colorDefinition['slug'] === $colorSlug) {
return $colorDefinition['color'];
return strtolower($colorDefinition['color']);
}
}
return $colorSlug;

44
mailpoet/tests/integration/EmailEditor/Engine/ThemeControllerTest.php
View File

@ -12,6 +12,7 @@ class ThemeControllerTest extends \MailPoetTest {
public function testItGeneratesCssStylesForRenderer() {
$css = $this->themeController->getStylesheetForRendering();
// Font families
verify($css)->stringContainsString('.has-arial-font-family');
verify($css)->stringContainsString('.has-comic-sans-ms-font-family');
verify($css)->stringContainsString('.has-courier-new-font-family');
@ -39,6 +40,25 @@ class ThemeControllerTest extends \MailPoetTest {
verify($css)->stringContainsString('.has-medium-font-size');
verify($css)->stringContainsString('.has-large-font-size');
verify($css)->stringContainsString('.has-x-large-font-size');
// Font sizes
verify($css)->stringContainsString('.has-small-font-size');
verify($css)->stringContainsString('.has-medium-font-size');
verify($css)->stringContainsString('.has-large-font-size');
verify($css)->stringContainsString('.has-x-large-font-size');
// Colors
verify($css)->stringContainsString('.has-black-color');
verify($css)->stringContainsString('.has-black-background-color');
verify($css)->stringContainsString('.has-black-color');
verify($css)->stringContainsString('.has-black-background-color');
$this->checkCorrectThemeConfiguration();
if (wp_get_theme()->get('Name') === 'Twenty Twenty-One') {
verify($css)->stringContainsString('.has-yellow-background-color');
verify($css)->stringContainsString('.has-yellow-color');
}
}
public function testItCanTranslateFontSizeSlug() {
@ -54,5 +74,29 @@ class ThemeControllerTest extends \MailPoetTest {
verify($this->themeController->translateSlugToColor('white'))->equals('#ffffff');
verify($this->themeController->translateSlugToColor('cyan-bluish-gray'))->equals('#abb8c3');
verify($this->themeController->translateSlugToColor('pale-pink'))->equals('#f78da7');
$this->checkCorrectThemeConfiguration();
if (wp_get_theme()->get('Name') === 'Twenty Twenty-One') {
verify($this->themeController->translateSlugToColor('yellow'))->equals('#eeeadd');
}
}
public function testItLoadsColorPaletteFromSiteTheme() {
$this->checkCorrectThemeConfiguration();
$settings = $this->themeController->getSettings();
if (wp_get_theme()->get('Name') === 'Twenty Twenty-One') {
verify($settings['color']['palette']['theme'])->notEmpty();
}
}
/**
* This test depends on using Twenty Twenty-One or Twenty Nineteen theme.
* This method checks if the theme is correctly configured and trigger a failure if not
* to prevent silent failures in case we change theme configuration in the test environment.
*/
private function checkCorrectThemeConfiguration() {
$expectedThemes = ['Twenty Twenty-One', 'Twenty Nineteen'];
if (!in_array(wp_get_theme()->get('Name'), $expectedThemes)) {
$this->fail('Test depends on using Twenty Twenty-One or Twenty Nineteen theme. If you changed the theme, please update the test.');
}
}
}