Commit d5c729f5ec for woocommerce
commit d5c729f5ec25a3d4ef5ea2ba3f758aeb751ce983
Author: Seun Olorunsola <30554163+triple0t@users.noreply.github.com>
Date: Mon Dec 1 08:20:41 2025 +0100
Update email template design and improve structure for better styling control (#62051)
* Revert hardcoded email editor header font sizes
* Wrap the WooEmailTemplate in a group block for easier style application.
* Wrap the post-content block of the WooEmailTemplate in a group block for easier style application.
* Update email template structure and adjust font size translations in tests
- Wrap the post-content block in a group block for improved styling in the email template.
- Modify font size translations for 'large', 'x-large', and add 'xx-large' in the Theme_Controller_Test.
- Update content rendering tests to reflect changes in post-content block usage.
* Prevent `contentSize` not found error
* Add changelog files
* Unify post-content block lock settings by making sure the remover is disabled for the Woo Email Template.
* Revert style h1 to h6 removal
diff --git a/packages/js/email-editor/src/components/template-select/template-list.tsx b/packages/js/email-editor/src/components/template-select/template-list.tsx
index 9abad81f88..3755daad3e 100644
--- a/packages/js/email-editor/src/components/template-select/template-list.tsx
+++ b/packages/js/email-editor/src/components/template-select/template-list.tsx
@@ -64,7 +64,9 @@ function TemplateListBox( {
styles.reduce( ( acc, style ) => {
return acc + ( style.css ?? '' );
}, '' ) +
- `.is-root-container { width: ${ layout.contentSize }; margin: 0 auto; }`;
+ `.is-root-container { width: ${
+ layout?.contentSize || '660px'
+ }; margin: 0 auto; }`;
if ( selectedCategory === 'recent' && templates.length === 0 ) {
return <TemplateNoResults />;
diff --git a/packages/js/email-editor/src/hooks/use-email-css.ts b/packages/js/email-editor/src/hooks/use-email-css.ts
index d60a2c6d4a..a3abc170d1 100644
--- a/packages/js/email-editor/src/hooks/use-email-css.ts
+++ b/packages/js/email-editor/src/hooks/use-email-css.ts
@@ -60,7 +60,9 @@ export function useEmailCss() {
let rootContainerStyles = '';
if ( layout && deviceType !== 'Mobile' ) {
- rootContainerStyles = `display:flow-root; width:${ layout?.contentSize }; margin: 0 auto;box-sizing: border-box;max-width: 100%;`;
+ rootContainerStyles = `display:flow-root; width:${
+ layout?.contentSize || '660px'
+ }; margin: 0 auto;box-sizing: border-box;max-width: 100%;`;
}
const padding = mergedConfig.styles?.spacing?.padding;
if ( padding ) {
diff --git a/packages/php/email-editor/changelog/wooprd-968-update-design-of-notification-email-template-and-contents b/packages/php/email-editor/changelog/wooprd-968-update-design-of-notification-email-template-and-contents
new file mode 100644
index 0000000000..30a6028677
--- /dev/null
+++ b/packages/php/email-editor/changelog/wooprd-968-update-design-of-notification-email-template-and-contents
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Update email editor core default styles.
diff --git a/packages/php/email-editor/src/Engine/Templates/email-general.html b/packages/php/email-editor/src/Engine/Templates/email-general.html
index 9dd8385c27..0c5174000d 100644
--- a/packages/php/email-editor/src/Engine/Templates/email-general.html
+++ b/packages/php/email-editor/src/Engine/Templates/email-general.html
@@ -1 +1,5 @@
-<!-- wp:core/post-content {"lock":{"move":true,"remove":true},"layout":{"type":"default"}} /-->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group">
+ <!-- wp:post-content {"lock":{"move":true,"remove":true},"layout":{"type":"default"}} /-->
+</div>
+<!-- /wp:group -->
diff --git a/packages/php/email-editor/src/Engine/theme.json b/packages/php/email-editor/src/Engine/theme.json
index 385116e3ec..e3af49c993 100644
--- a/packages/php/email-editor/src/Engine/theme.json
+++ b/packages/php/email-editor/src/Engine/theme.json
@@ -200,14 +200,19 @@
},
{
"name": "large",
- "size": "28px",
+ "size": "24px",
"slug": "large"
},
{
"name": "extra-large",
- "size": "42px",
+ "size": "32px",
"slug": "x-large"
- }
+ },
+ {
+ "name": "extra-extra-large",
+ "size": "40px",
+ "slug": "xx-large"
+ }
]
},
"useRootPaddingAwareAlignments": true
@@ -242,24 +247,22 @@
"fontFamily": "Arial, 'Helvetica Neue', Helvetica, sans-serif",
"fontWeight": "400",
"fontStyle": "normal",
- "lineHeight": "1.5"
+ "lineHeight": "1.2"
}
},
- "h1": {
+ "h1": {
"typography": {
- "fontSize": "42px",
- "fontWeight": "700",
- "fontStyle": "normal"
+ "fontSize": "40px"
}
},
"h2": {
"typography": {
- "fontSize": "42px"
+ "fontSize": "32px"
}
},
"h3": {
"typography": {
- "fontSize": "28px"
+ "fontSize": "24px"
}
},
"h4": {
@@ -269,28 +272,14 @@
},
"h5": {
"typography": {
- "fontSize": "13px"
+ "fontSize": "14px"
}
},
"h6": {
"typography": {
- "fontSize": "13px"
+ "fontSize": "12px"
}
- },
- "button": {
- "color": {
- "background": "#32373c",
- "text": "#ffffff"
- },
- "spacing": {
- "padding": {
- "bottom": "0.7em",
- "left": "1.4em",
- "right": "1.4em",
- "top": "0.7em"
- }
- }
- }
+ }
}
}
}
diff --git a/packages/php/email-editor/src/Integrations/Core/theme.json b/packages/php/email-editor/src/Integrations/Core/theme.json
index f8339d689d..d9f659c115 100644
--- a/packages/php/email-editor/src/Integrations/Core/theme.json
+++ b/packages/php/email-editor/src/Integrations/Core/theme.json
@@ -25,7 +25,7 @@
}
},
"typography": {
- "fontSize": "28px"
+ "fontSize": "20px"
},
"elements": {
"cite": {
diff --git a/packages/php/email-editor/tests/integration/Engine/Renderer/ContentRenderer/Content_Renderer_Test.php b/packages/php/email-editor/tests/integration/Engine/Renderer/ContentRenderer/Content_Renderer_Test.php
index 548eb026b8..43c1702edf 100644
--- a/packages/php/email-editor/tests/integration/Engine/Renderer/ContentRenderer/Content_Renderer_Test.php
+++ b/packages/php/email-editor/tests/integration/Engine/Renderer/ContentRenderer/Content_Renderer_Test.php
@@ -54,7 +54,7 @@ class Content_Renderer_Test extends \Email_Editor_Integration_Test_Case {
public function testItRendersContent(): void {
$template = new \WP_Block_Template();
$template->id = 'template-id';
- $template->content = '<!-- wp:core/post-content /-->';
+ $template->content = '<!-- wp:post-content /-->';
$content = $this->renderer->render(
$this->email_post,
$template
@@ -68,7 +68,7 @@ class Content_Renderer_Test extends \Email_Editor_Integration_Test_Case {
public function testItInlinesContentStyles(): void {
$template = new \WP_Block_Template();
$template->id = 'template-id';
- $template->content = '<!-- wp:core/post-content /-->';
+ $template->content = '<!-- wp:post-content /-->';
$rendered = $this->renderer->render( $this->email_post, $template );
$paragraph_styles = $this->getStylesValueForTag( $rendered, 'p' );
$this->assertIsString( $paragraph_styles );
diff --git a/packages/php/email-editor/tests/integration/Engine/Theme_Controller_Test.php b/packages/php/email-editor/tests/integration/Engine/Theme_Controller_Test.php
index d7fd7b90c3..5b58496b51 100644
--- a/packages/php/email-editor/tests/integration/Engine/Theme_Controller_Test.php
+++ b/packages/php/email-editor/tests/integration/Engine/Theme_Controller_Test.php
@@ -131,8 +131,9 @@ class Theme_Controller_Test extends \Email_Editor_Integration_Test_Case {
public function testItCanTranslateFontSizeSlug(): void {
$this->assertEquals( '13px', $this->theme_controller->translate_slug_to_font_size( 'small' ) );
$this->assertEquals( '16px', $this->theme_controller->translate_slug_to_font_size( 'medium' ) );
- $this->assertEquals( '28px', $this->theme_controller->translate_slug_to_font_size( 'large' ) );
- $this->assertEquals( '42px', $this->theme_controller->translate_slug_to_font_size( 'x-large' ) );
+ $this->assertEquals( '24px', $this->theme_controller->translate_slug_to_font_size( 'large' ) );
+ $this->assertEquals( '32px', $this->theme_controller->translate_slug_to_font_size( 'x-large' ) );
+ $this->assertEquals( '40px', $this->theme_controller->translate_slug_to_font_size( 'xx-large' ) );
$this->assertEquals( 'unknown', $this->theme_controller->translate_slug_to_font_size( 'unknown' ) );
}
diff --git a/packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Renderer_Test.php b/packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Renderer_Test.php
index 29ed496ce4..2b2e5870d9 100644
--- a/packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Renderer_Test.php
+++ b/packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Renderer_Test.php
@@ -77,11 +77,6 @@ class Renderer_Test extends \Email_Editor_Integration_Test_Case {
$rendered = $this->renderer->render( $email_post, 'Subject', '', 'en' );
$button_html = $this->extractBlockHtml( $rendered['html'], 'wp-block-button', 'td' );
$this->assertStringContainsString( 'color: #fff', $button_html );
- $this->assertStringContainsString( 'padding-bottom: .7em;', $button_html );
- $this->assertStringContainsString( 'padding-left: 1.4em;', $button_html );
- $this->assertStringContainsString( 'padding-right: 1.4em;', $button_html );
- $this->assertStringContainsString( 'padding-top: .7em;', $button_html );
- $this->assertStringContainsString( 'background-color: #32373c', $button_html );
}
/**
diff --git a/plugins/woocommerce/changelog/wooprd-968-update-design-of-notification-email-template-and-contents b/plugins/woocommerce/changelog/wooprd-968-update-design-of-notification-email-template-and-contents
new file mode 100644
index 0000000000..dcb68b861b
--- /dev/null
+++ b/plugins/woocommerce/changelog/wooprd-968-update-design-of-notification-email-template-and-contents
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Update WooEmailTemplate to simplify style application.
diff --git a/plugins/woocommerce/src/Internal/EmailEditor/EmailTemplates/WooEmailTemplate.php b/plugins/woocommerce/src/Internal/EmailEditor/EmailTemplates/WooEmailTemplate.php
index e01aa45463..6756f70a1f 100644
--- a/plugins/woocommerce/src/Internal/EmailEditor/EmailTemplates/WooEmailTemplate.php
+++ b/plugins/woocommerce/src/Internal/EmailEditor/EmailTemplates/WooEmailTemplate.php
@@ -48,15 +48,19 @@ class WooEmailTemplate {
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|20","right":"var:preset|spacing|20"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--20)">
' . $this->get_site_logo_or_title() . '
+
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group">
+<!-- wp:post-content {"lock":{"move":true,"remove":true},"layout":{"type":"default"}} /-->
</div>
<!-- /wp:group -->
-<!-- wp:post-content {"lock":{"move":true,"remove":false},"layout":{"type":"default"}} /-->
-
<!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|20","left":"var:preset|spacing|20","top":"var:preset|spacing|10","bottom":"var:preset|spacing|10"}}}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"align":"center","fontSize":"small","style":{"border":{"top":{"color":"var:preset|color|cyan-bluish-gray","width":"1px","style":"solid"},"right":[],"bottom":[],"left":[]},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}},"color":{"text":"#787c82"},"elements":{"link":{"color":{"text":"#787c82"}}}}} -->
<p class="has-text-align-center has-text-color has-link-color has-small-font-size" style="border-top-color:var(--wp--preset--color--cyan-bluish-gray);border-top-style:solid;border-top-width:1px;color:#787c82;padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20)">You received this email because you shopped at <!--[woocommerce/site-title]--></p>
<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+</div>
<!-- /wp:group -->
';
}
@@ -73,9 +77,9 @@ class WooEmailTemplate {
if ( ! empty( $custom_logo ) ) {
// Use Site logo if available.
- return '<!-- wp:site-logo {"width":130, "isLink":false} /-->';
+ return '<!-- wp:site-logo {"width":130,"isLink":false,"align":"center","style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10"}}}} /-->';
}
- return '<!-- wp:site-title {"level":2} /-->';
+ return '<!-- wp:site-title {"level":2,"textAlign":"center","style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10"}}}} /-->';
}
}