Commit 38f900c717f for woocommerce
commit 38f900c717f6f46d6891ebadb6a31e7c0bf8a816
Author: Pavel Dohnal <pavel.dohnal@automattic.com>
Date: Tue Nov 10 10:58:52 2026 +0100
Add full-email snapshot tests for the email renderer (#70805)
* Add full-email snapshot tests for the email renderer
Most email editor fixes change how a whole email renders, but tests only
checked single blocks or strings, and their full renders used the web
block output instead of the email block renderers. The new test wires
the email renderers as Bootstrap does and compares two complete emails
with stored HTML.
* Run email editor package tests on style and fixture changes
A change to the email theme.json or CSS alters every rendered email,
and the new snapshot fixtures are HTML, but the package test jobs ran
only for PHP and config changes.
* Snapshot the Cover block and the plain-text email
The plan's block list included Cover, and customers also read the
plain-text version, so both now show up in the snapshots.
* Run snapshot tests when the email template or text snapshots change
The default email template and the plain-text snapshots also decide the
test result. Line breaks between tags now go into the HTML snapshot only,
so the text snapshot keeps the text as sent.
* Update email snapshots for the inherited text font size
The Separator block PR (#70573) gives text blocks the font size they
inherit, so every paragraph and heading cell now carries font-size.
* Set only the email render callback in the snapshot test
set_props() resets a block type's attributes, so blocks used by later
tests in the same run could lose them. The test now sets just the
callback and restores the previous value in tearDown.
diff --git a/packages/php/email-editor/changelog/wooplug-8213-email-render-snapshots b/packages/php/email-editor/changelog/wooplug-8213-email-render-snapshots
new file mode 100644
index 00000000000..1777597fff8
--- /dev/null
+++ b/packages/php/email-editor/changelog/wooplug-8213-email-render-snapshots
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+Comment: Add full-email snapshot tests for the email renderer; no production change.
+
diff --git a/packages/php/email-editor/package.json b/packages/php/email-editor/package.json
index f9dafecf561..b784555448c 100644
--- a/packages/php/email-editor/package.json
+++ b/packages/php/email-editor/package.json
@@ -18,6 +18,7 @@
"test:unit": "composer run-script test:unit",
"test:php:ci": "pnpm test:unit && pnpm test:integration",
"test:integration": "composer run-script test:integration",
+ "test:update-email-snapshots": "wp-env run tests-cli --env-cwd=wp-content/plugins/email-editor env UPDATE_EMAIL_SNAPSHOTS=1 ./vendor/bin/phpunit --configuration phpunit-integration.xml.dist --filter Renderer_Snapshot_Test",
"build:composer-package": "bash tasks/build-package.sh"
},
"license": "GPL-2.0-or-later",
@@ -43,7 +44,12 @@
"composer.lock",
"**/*.php",
"phpunit*.xml.dist",
- ".wp-env.json"
+ ".wp-env.json",
+ "src/**/*.css",
+ "src/**/*.json",
+ "src/**/*.html",
+ "tests/**/*.html",
+ "tests/**/*.txt"
],
"testEnv": {
"start": "env:test",
@@ -66,7 +72,12 @@
"composer.lock",
"**/*.php",
"phpunit*.xml.dist",
- ".wp-env.json"
+ ".wp-env.json",
+ "src/**/*.css",
+ "src/**/*.json",
+ "src/**/*.html",
+ "tests/**/*.html",
+ "tests/**/*.txt"
],
"testEnv": {
"start": "env:test",
diff --git a/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/Renderer_Snapshot_Test.php b/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/Renderer_Snapshot_Test.php
new file mode 100644
index 00000000000..d6392216226
--- /dev/null
+++ b/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/Renderer_Snapshot_Test.php
@@ -0,0 +1,147 @@
+<?php
+/**
+ * This file is part of the WooCommerce Email Editor package
+ *
+ * @package Automattic\WooCommerce\EmailEditor
+ */
+
+declare(strict_types = 1);
+namespace Automattic\WooCommerce\EmailEditor\Engine\Renderer;
+
+use Automattic\WooCommerce\EmailEditor\Engine\Email_Editor;
+use Automattic\WooCommerce\EmailEditor\Integrations\Core\Initializer;
+
+/**
+ * Compares whole rendered emails with stored snapshots, so a change in one block or in the CSS
+ * inlining that alters other parts of the email shows up in review.
+ *
+ * After an intended change, run `pnpm test:update-email-snapshots` in the package and review
+ * the diff of the files under `snapshots/`.
+ */
+class Renderer_Snapshot_Test extends \Email_Editor_Integration_Test_Case {
+ /**
+ * Block types that got an email render callback in setUp, each with the callback it had before.
+ *
+ * @var array<int, array{\WP_Block_Type, mixed}>
+ */
+ private array $wired_block_types = array();
+
+ /**
+ * Set up before each test.
+ */
+ public function setUp(): void {
+ parent::setUp();
+ // The site theme differs between WordPress versions, so it is kept out of the snapshots.
+ add_filter( 'woocommerce_email_editor_site_style_sync_enabled', '__return_false' );
+ $this->di_container->get( Email_Editor::class )->initialize();
+ $this->wire_core_block_renderers();
+ }
+
+ /**
+ * Clean up after each test.
+ */
+ public function tearDown(): void {
+ foreach ( $this->wired_block_types as list( $block_type, $previous_callback ) ) {
+ $this->set_email_callback( $block_type, $previous_callback );
+ }
+ remove_filter( 'woocommerce_email_editor_site_style_sync_enabled', '__return_false' );
+ parent::tearDown();
+ }
+
+ /**
+ * Test the rendered email matches its snapshot.
+ *
+ * @dataProvider fixture_provider
+ * @param string $name Fixture and snapshot name.
+ */
+ public function testRenderedEmailMatchesSnapshot( string $name ): void {
+ $post_id = $this->factory->post->create(
+ array(
+ 'post_content' => (string) file_get_contents( __DIR__ . "/fixtures/{$name}.html" ), // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- Local fixture file.
+ )
+ );
+ $this->assertIsInt( $post_id );
+ $post = get_post( $post_id );
+ $this->assertInstanceOf( \WP_Post::class, $post );
+
+ $rendered = $this->di_container->get( Renderer::class )->render( $post, 'Subject', 'Preheader', 'en_US' );
+
+ $this->assertMatchesSnapshot( "{$name}.html", $this->normalize_html( $rendered['html'] ) );
+ $this->assertMatchesSnapshot( "{$name}.txt", $this->normalize_text( $rendered['text'] ) );
+ }
+
+ /**
+ * Compares the output with a stored snapshot, or stores it when updating snapshots.
+ *
+ * @param string $file Snapshot file name.
+ * @param string $actual Rendered output.
+ */
+ private function assertMatchesSnapshot( string $file, string $actual ): void {
+ $snapshot = __DIR__ . "/snapshots/{$file}";
+ if ( getenv( 'UPDATE_EMAIL_SNAPSHOTS' ) ) {
+ file_put_contents( $snapshot, $actual ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_system_operations_file_put_contents -- writes a test snapshot.
+ }
+
+ $this->assertFileExists( $snapshot, 'Snapshot missing. Run `pnpm test:update-email-snapshots` to create it.' );
+ $this->assertSame( file_get_contents( $snapshot ), $actual, 'The rendered email changed. If intended, run `pnpm test:update-email-snapshots` and commit the snapshot.' ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- Local snapshot file.
+ }
+
+ /**
+ * Fixtures with the blocks each snapshot covers.
+ *
+ * @return array<string, array{string}>
+ */
+ public function fixture_provider(): array {
+ return array(
+ 'core blocks' => array( 'core-blocks' ),
+ 'styled blocks' => array( 'styled-blocks' ),
+ );
+ }
+
+ /**
+ * Gives core blocks their email renderers, as Bootstrap does in production. Blocks are
+ * registered before the test starts, so the block settings filter can't do it here.
+ */
+ private function wire_core_block_renderers(): void {
+ $initializer = $this->di_container->get( Initializer::class );
+ $initializer->initialize();
+ foreach ( \WP_Block_Type_Registry::get_instance()->get_all_registered() as $block_type ) {
+ $settings = $initializer->update_block_settings( array( 'name' => $block_type->name ) );
+ if ( isset( $settings['render_email_callback'] ) ) {
+ $this->wired_block_types[] = array( $block_type, get_object_vars( $block_type )['render_email_callback'] ?? null );
+ $this->set_email_callback( $block_type, $settings['render_email_callback'] );
+ }
+ }
+ }
+
+ /**
+ * Sets only the email render callback of a block type. set_props() would also reset its attributes.
+ *
+ * @param \WP_Block_Type $block_type Block type.
+ * @param mixed $callback Email render callback, or null for none.
+ */
+ private function set_email_callback( \WP_Block_Type $block_type, $callback ): void {
+ $block_type->__set( 'render_email_callback', $callback );
+ }
+
+ /**
+ * Removes what differs between test environments and puts each tag on its own line,
+ * so a snapshot diff shows which part of the email changed.
+ *
+ * @param string $html Rendered email HTML.
+ */
+ private function normalize_html( string $html ): string {
+ // WordPress names this class with a counter or, in older versions, a hash.
+ $html = (string) preg_replace( '/\bwp-elements-[0-9a-f]+\b/', 'wp-elements-{{id}}', $html );
+ return $this->normalize_text( str_replace( '><', ">\n<", $html ) );
+ }
+
+ /**
+ * Removes the site URL, which differs between test environments.
+ *
+ * @param string $text Rendered email output.
+ */
+ private function normalize_text( string $text ): string {
+ return trim( str_replace( untrailingslashit( home_url() ), '{{site_url}}', $text ) ) . "\n";
+ }
+}
diff --git a/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/fixtures/core-blocks.html b/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/fixtures/core-blocks.html
new file mode 100644
index 00000000000..ce90132ee75
--- /dev/null
+++ b/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/fixtures/core-blocks.html
@@ -0,0 +1,81 @@
+<!-- wp:heading {"level":1} -->
+<h1 class="wp-block-heading">Your order is on its way</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Hi there, read our <a href="https://example.com/shipping">shipping policy</a> or reply to this email. Tracking: https://example.com/track/AVeryLongUnbreakableTrackingCodeThatShouldNotWidenTheEmailLayout1234567890</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:image {"width":"300px","sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full is-resized"><img src="https://example.com/image.jpg" alt="A parcel" style="width:300px"/><figcaption class="wp-element-caption">The parcel</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"66.66%"} -->
+<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:paragraph -->
+<p>Left column</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"33.33%"} -->
+<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:paragraph {"align":"right"} -->
+<p class="has-text-align-right">Right column</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+
+<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://example.com/order">View order</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->
+
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>First item</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Second item</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
+
+<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>Great service.</p>
+<!-- /wp:paragraph --><cite>A customer</cite></blockquote>
+<!-- /wp:quote -->
+
+<!-- wp:table -->
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>T-shirt</td><td>$20</td></tr></tbody></table></figure>
+<!-- /wp:table -->
+
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>Inside a group</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:cover {"url":"https://example.com/cover.jpg","dimRatio":50,"minHeight":200,"minHeightUnit":"px","layout":{"type":"constrained"}} -->
+<div class="wp-block-cover" style="min-height:200px"><img class="wp-block-cover__image-background" alt="" src="https://example.com/cover.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center">Text on a cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->
+
+<!-- wp:media-text {"mediaType":"image"} -->
+<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://example.com/media.jpg" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
+<p>Media and text</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->
+
+<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://example.com/shop">Shop again</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->
+
+<!-- wp:social-links -->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://example.com/facebook","service":"facebook"} /-->
+
+<!-- wp:social-link {"url":"https://example.com/instagram","service":"instagram"} /--></ul>
+<!-- /wp:social-links -->
diff --git a/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/fixtures/styled-blocks.html b/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/fixtures/styled-blocks.html
new file mode 100644
index 00000000000..66aa7541f60
--- /dev/null
+++ b/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/fixtures/styled-blocks.html
@@ -0,0 +1,23 @@
+<!-- wp:group {"style":{"color":{"background":"#f0f4ff"},"spacing":{"padding":{"top":"20px","bottom":"20px","left":"20px","right":"20px"}},"elements":{"link":{"color":{"text":"#cc0000"}}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group has-background has-link-color" style="background-color:#f0f4ff;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:heading {"textColor":"vivid-purple","fontFamily":"georgia"} -->
+<h2 class="wp-block-heading has-vivid-purple-color has-text-color has-georgia-font-family">Styled heading</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"backgroundColor":"pale-cyan-blue","fontSize":"large"} -->
+<p class="has-pale-cyan-blue-background-color has-background has-large-font-size">Paragraph with a palette background and a <a href="https://example.com/link">link inside a group with a link color</a>.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"textColor":"missing-palette-slug","style":{"color":{"text":"#336699"}}} -->
+<p class="has-missing-palette-slug-color has-text-color" style="color:#336699">Text color with a palette slug that does not exist</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"fontFamily":"courier-new"} -->
+<p class="has-courier-new-font-family">Monospace text</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
+<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"vivid-red","textColor":"white","style":{"border":{"radius":"8px"}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-vivid-red-background-color has-text-color has-background wp-element-button" href="https://example.com/cta" style="border-radius:8px">Call to action</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:group -->
diff --git a/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/snapshots/core-blocks.html b/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/snapshots/core-blocks.html
new file mode 100644
index 00000000000..ea8cc89f3eb
--- /dev/null
+++ b/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/snapshots/core-blocks.html
@@ -0,0 +1,894 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en-US">
+<head>
+
+
+ <title>Subject</title>
+ <meta charset="UTF-8">
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="format-detection" content="telephone=no">
+ <!-- Forced Styles -->
+
+<style type="text/css">@media screen and (max-width: 660px){.email-block-column-content{max-width: 100% !important;}.block{display: block; width: 100% !important;}.email-block-column{box-sizing: border-box;}.email-table-with-width{width: 100% !important;}.layout-flex-wrapper,.layout-flex-wrapper tbody,.layout-flex-wrapper tr{display: block !important; width: 100% !important;}.layout-flex-item{display: block !important; padding-bottom: 8px !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important;}.layout-flex-item table,.layout-flex-item td{box-sizing: border-box !important; display: block !important; width: 100% !important;}}</style>
+</head>
+<body dir="ltr" style="background-color: #fff; color: #1e1e1e; padding-top: 24px; padding-bottom: 24px; font-family: Inter,"Helvetica Neue",Arial,sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0; line-height: 1.5; font-size: 16px; direction: ltr; text-align: left; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-spacing: normal;">
+ <!--[if mso | IE]>
+<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="660px" style="width:660px">
+<tr>
+<td>
+<![endif]-->
+ <div class="email_layout_wrapper" style="background-color: #fff; color: #1e1e1e; padding-top: 24px; padding-bottom: 24px; font-family: Inter,"Helvetica Neue",Arial,sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0; line-height: 1.5; font-size: 16px; direction: ltr; text-align: left; box-sizing: border-box; margin: 0 auto; width: 100%; max-width: 660px;">
+ <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+ <tbody>
+ <tr>
+ <td class="email_preheader" height="1" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; direction: ltr; text-align: left; color: #fff; display: none; font-size: 1px; line-height: 1px; max-height: 0; max-width: 0; mso-hide: all; opacity: 0; overflow: hidden; -webkit-text-size-adjust: none; visibility: hidden;">
+ Preheader </td>
+ </tr>
+ <tr>
+ <td class="email_content_wrapper" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; direction: ltr; text-align: left; font-size: inherit;">
+ <div class="wp-site-blocks">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" class="email-block-group wp-block-group" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate; background-size: cover;">
+ <tbody>
+ <tr>
+ <td class="email-block-group-content" width="660px" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+ <!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate;">
+ <tbody>
+ <tr>
+ <td align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td style="padding-left:24px;padding-right:24px;">
+<![endif]-->
+<div class="email-root-padding is-layout-flow wp-block-post-content-is-layout-flow" style="padding-left: 24px; padding-right: 24px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate;">
+ <tbody>
+ <tr>
+ <td class="email-text-block wp-block-heading" align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; min-width: 100%; word-break: break-word; color: #1e1e1e; font-size: 16px; text-align: left;">
+<h1 class="wp-block-heading" style="margin-bottom: 0; margin-top: 0; font-style: normal; font-weight: 700; line-height: 1.2; font-size: 40px;">Your order is on its way</h1>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td style="padding-left:24px;padding-right:24px;">
+<![endif]-->
+<div class="email-root-padding" style="padding-left: 24px; padding-right: 24px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%" style="margin-top:16px;">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="margin-top: 16px;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate;">
+ <tbody>
+ <tr>
+ <td class="email-text-block " align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; min-width: 100%; word-break: break-word; color: #1e1e1e; font-size: 16px; text-align: left;">
+<p class="wp-block-paragraph" style="display: block; margin: 0;">Hi there, read our <a href="https://example.com/shipping" style="text-decoration: none;">shipping policy</a> or reply to this email. Tracking: https://example.com/track/AVeryLongUnbreakableTrackingCodeThatShouldNotWidenTheEmailLayout1234567890</p>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td style="padding-left:24px;padding-right:24px;">
+<![endif]-->
+<div class="email-root-padding" style="padding-left: 24px; padding-right: 24px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%" style="margin-top:16px;">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="margin-top: 16px;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: collapse; border-spacing: 0px; font-size: 0px; vertical-align: top; width: 100%;">
+ <tbody>
+ <tr>
+ <td align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" class="email-table-with-width" width="300px" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate; border-spacing: 0px; font-size: 0px; vertical-align: top; width: 300px;">
+ <tbody>
+ <tr>
+ <td class="email-image-cell" align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; overflow: hidden;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" class="email-image-border-wrapper" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate; border-spacing: 0px;">
+ <tbody>
+ <tr>
+ <td class="email-image-border-cell" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+<img decoding="async" width="300" src="https://example.com/image.jpg" alt="A parcel" style="border: 0; height: auto; -ms-interpolation-mode: bicubic; line-height: 100%; max-width: 100%; outline: none; text-decoration: none; width: 300px;">
+</td>
+ </tr>
+ </tbody>
+ </table>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" class="email-table-with-width" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: collapse; border-spacing: 0px; font-size: 0px; vertical-align: top; width: 100%;">
+ <tbody>
+ <tr>
+ <td style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; text-align: left; font-size: 16px;">
+<span class="wp-element-caption">The parcel</span>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td style="padding-left:24px;padding-right:24px;">
+<![endif]-->
+<div class="email-root-padding" style="padding-left: 24px; padding-right: 24px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%" style="margin-top:16px;">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="margin-top: 16px;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" class="email-block-columns wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex" align="center" style="mso-table-lspace: 0; mso-table-rspace: 0; flex-wrap: nowrap; width: 100%; border-collapse: separate; text-align: left; background-size: cover;">
+ <tbody>
+ <tr>
+ <td class="block wp-block-column email-block-column wp-block-column is-layout-flow wp-block-column-is-layout-flow" width="66.66%" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; vertical-align: top;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" class="email-block-column-content" width="100%" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; vertical-align: top;">
+ <tbody>
+ <tr>
+ <td align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; text-align: left;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate;">
+ <tbody>
+ <tr>
+ <td class="email-text-block " align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; min-width: 100%; word-break: break-word; color: #1e1e1e; font-size: 16px; text-align: left;">
+<p class="wp-block-paragraph" style="display: block; margin: 0;">Left column</p>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</td>
+ </tr>
+ </tbody>
+ </table>
+</td>
+
+<td class="block wp-block-column email-block-column wp-block-column is-layout-flow wp-block-column-is-layout-flow" width="33.33%" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; vertical-align: top;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" class="email-block-column-content" width="100%" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; vertical-align: top;">
+ <tbody>
+ <tr>
+ <td align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; text-align: left;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate;">
+ <tbody>
+ <tr>
+ <td class="email-text-block has-text-align-right" align="right" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; min-width: 100%; word-break: break-word; color: #1e1e1e; font-size: 16px; text-align: right;">
+<p class="has-text-align-right wp-block-paragraph" style="display: block; margin: 0;">Right column</p>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</td>
+ </tr>
+ </tbody>
+ </table>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td style="padding-left:24px;padding-right:24px;">
+<![endif]-->
+<div class="email-root-padding" style="padding-left: 24px; padding-right: 24px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<!--[if mso | IE]>
+<table align="left" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
+<tr>
+<td style="margin-top: 16px;text-align: left" >
+<![endif]-->
+ <div style="margin-top: 16px; text-align: left;">
+<table class="layout-flex-wrapper" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; display: inline-block; vertical-align: top;">
+<tbody>
+<tr>
+<td class="layout-flex-item" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; width: auto;">
+ <tbody>
+ <tr>
+ <td class="wp-block-button" align="center" valign="middle" role="presentation" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; color: #fff; background-color: #32373c; border-radius: 0px; border-width: 0; padding-top: calc(.667em + 2px); padding-right: calc(1.333em + 2px); padding-bottom: calc(.667em + 2px); padding-left: calc(1.333em + 2px); font-size: inherit; font-family: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; text-decoration: none; text-transform: inherit; letter-spacing: inherit; word-break: break-word; display: block;">
+<a class="button-link " href="https://example.com/order" target="_blank" style="text-decoration: none; color: #fff; display: block;">View order</a>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+ <!--[if mso | IE]>
+</td>
+</tr>
+</table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td style="padding-left:24px;padding-right:24px;">
+<![endif]-->
+<div class="email-root-padding" style="padding-left: 24px; padding-right: 24px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<div style="margin-top: 16px;">
+<ul class="wp-block-list" style="margin-bottom: 0; margin-top: 0; padding: 0 0 0 40px; font-size: 16px;">
+<li style="margin-bottom: 0; margin-top: 0;">First item</li>
+
+
+
+<li style="margin-bottom: 0; margin-top: 0;">Second item</li>
+</ul>
+</div>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td style="padding-left:24px;padding-right:24px;">
+<![endif]-->
+<div class="email-root-padding" style="padding-left: 24px; padding-right: 24px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%" style="margin-top:16px;">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="margin-top: 16px;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" class="email-block-quote wp-block-quote is-layout-flow wp-block-quote-is-layout-flow" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-color: currentColor; border-width: 0 0 0 1px; font-size: 20px; margin-right: 0; margin-left: 0; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; border-collapse: separate; background-size: cover; border-left-style: solid;">
+ <tbody>
+ <tr>
+ <td class="email-block-quote-content" width="100%" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate;">
+ <tbody>
+ <tr>
+ <td class="email-text-block " align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; font-size: 20px; min-width: 100%; word-break: break-word; color: #1e1e1e; text-align: left;">
+<p class="wp-block-paragraph" style="display: block; margin: 0;">Great service.</p>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%" style="margin-top:16px;">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="margin-top: 16px;">
+<p style="display: block; margin: 16px 0px 0px 0px;">
+<cite class="email-block-quote-citation" style="font-size: 13px; font-style: italic; font-weight: 300; display: block; margin: 0;">A customer</cite>
+</p>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td style="padding-left:24px;padding-right:24px;">
+<![endif]-->
+<div class="email-root-padding" style="padding-left: 24px; padding-right: 24px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%" style="margin-top:16px;">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="margin-top: 16px;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate;">
+ <tbody>
+ <tr>
+ <td class="email-table-block has-fixed-layout" align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; background: transparent;">
+<table border="1" cellpadding="8" cellspacing="0" role="presentation" width="100%" class="has-fixed-layout wp-block-table" style="mso-table-lspace: 0; mso-table-rspace: 0; margin-top: 0; margin-bottom: 0; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; table-layout: fixed; border-collapse: collapse; width: 100%; min-width: 100%; color: #1e1e1e; text-align: left;">
+<thead>
+<tr>
+<th valign="top" style="vertical-align: top; border: 1px solid #1e1e1e; padding: 8px; text-align: center; border-bottom: 3px solid #1e1e1e;">Product</th>
+<th valign="top" style="vertical-align: top; border: 1px solid #1e1e1e; padding: 8px; text-align: center; border-bottom: 3px solid #1e1e1e;">Price</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td valign="top" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; vertical-align: top; border: 1px solid #1e1e1e; padding: 8px; text-align: left;">T-shirt</td>
+<td valign="top" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; vertical-align: top; border: 1px solid #1e1e1e; padding: 8px; text-align: left;">$20</td>
+</tr>
+</tbody>
+</table>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%" style="margin-top:16px;">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="margin-top: 16px;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" class="email-block-group wp-block-group" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate; background-size: cover;">
+ <tbody>
+ <tr>
+ <td class="email-block-group-content" width="660px" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td style="padding-left:24px;padding-right:24px;">
+<![endif]-->
+<div class="email-root-padding" style="padding-left: 24px; padding-right: 24px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate;">
+ <tbody>
+ <tr>
+ <td class="email-text-block " align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; min-width: 100%; word-break: break-word; color: #1e1e1e; font-size: 16px; text-align: left;">
+<p class="wp-block-paragraph" style="display: block; margin: 0;">Inside a group</p>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td style="padding-left:24px;padding-right:24px;">
+<![endif]-->
+<div class="email-root-padding" style="padding-left: 24px; padding-right: 24px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%" style="margin-top:16px;">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="margin-top: 16px;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" class="email-block-cover wp-block-cover" align="center" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; width: 100%; border-collapse: collapse; text-align: center; min-height: 200px; background-image: url("https://example.com/cover.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat;">
+ <tbody>
+ <tr>
+ <td valign="middle" align="center" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+<div class="wp-block-cover" style="position: relative; display: inline-block; width: 100%; max-width: 100%;">
+<div class="wp-block-cover__inner-container" style="padding: 20px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate;">
+ <tbody>
+ <tr>
+ <td class="email-text-block has-text-align-center" align="center" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; min-width: 100%; word-break: break-word; color: #1e1e1e; font-size: 16px; text-align: center;">
+<p class="has-text-align-center wp-block-paragraph" style="display: block; margin: 0;">Text on a cover</p>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+</div>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td style="padding-left:24px;padding-right:24px;">
+<![endif]-->
+<div class="email-root-padding" style="padding-left: 24px; padding-right: 24px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%" style="margin-top:16px;">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="margin-top: 16px;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" class="email-block-media-text wp-block-media-text is-stacked-on-mobile" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; width: 100%; border-collapse: collapse; text-align: left;">
+ <tbody>
+ <tr>
+ <td valign="middle" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; width: 50%; padding: 10px; vertical-align: middle;">
+<img decoding="async" src="https://example.com/media.jpg" alt="" style="border: 0; height: auto; -ms-interpolation-mode: bicubic; line-height: 100%; max-width: 100%; outline: none; text-decoration: none;">
+</td>
+<td valign="middle" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; width: 50%; padding: 0 8%; vertical-align: middle;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate;">
+ <tbody>
+ <tr>
+ <td class="email-text-block " align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; min-width: 100%; word-break: break-word; color: #1e1e1e; font-size: 16px; text-align: left;">
+<p class="wp-block-paragraph" style="display: block; margin: 0;">Media and text</p>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td style="padding-left:24px;padding-right:24px;">
+<![endif]-->
+<div class="email-root-padding" style="padding-left: 24px; padding-right: 24px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<!--[if mso | IE]>
+<table align="left" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
+<tr>
+<td style="margin-top: 16px;text-align: left" >
+<![endif]-->
+ <div style="margin-top: 16px; text-align: left;">
+<table class="layout-flex-wrapper" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; display: inline-block; vertical-align: top;">
+<tbody>
+<tr>
+<td class="layout-flex-item" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; width: auto;">
+ <tbody>
+ <tr>
+ <td class="wp-block-button" align="center" valign="middle" role="presentation" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; color: #fff; background-color: #32373c; border-radius: 0px; border-width: 0; padding-top: calc(.667em + 2px); padding-right: calc(1.333em + 2px); padding-bottom: calc(.667em + 2px); padding-left: calc(1.333em + 2px); font-size: inherit; font-family: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; text-decoration: none; text-transform: inherit; letter-spacing: inherit; word-break: break-word; display: block;">
+<a class="button-link " href="https://example.com/shop" target="_blank" style="text-decoration: none; color: #fff; display: block;">Shop again</a>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+ <!--[if mso | IE]>
+</td>
+</tr>
+</table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td style="padding-left:24px;padding-right:24px;">
+<![endif]-->
+<div class="email-root-padding" style="padding-left: 24px; padding-right: 24px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%" style="margin-top:16px;">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="margin-top: 16px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="center">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" class="wp-block-social-links" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate; vertical-align: top;">
+ <tbody>
+ <tr role="presentation">
+ <td class="wp-block-social-links wp-block-social-links is-layout-flex wp-block-social-links-is-layout-flex" align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; min-width: 100%; vertical-align: middle; word-break: break-word; text-align: left;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="center">
+ <tbody>
+ <tr>
+ <![endif]-->
+<!--[if mso | IE]>
+<td>
+<![endif]-->
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="center" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; background-color: #0866ff; border-radius: 9999px; display: inline-table; float: none;">
+ <tbody>
+ <tr style="display: block; padding: 0.25em;">
+ <td style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; vertical-align: middle; font-size: 13px;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+ <tbody>
+ <tr>
+ <td style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; vertical-align: middle;">
+<a href="https://example.com/facebook" class="wp-block-social-link-anchor" style="color: #ffffff; text-decoration: none; text-transform: none; font-size: 13px;">
+ <img decoding="async" height="24px" src="{{site_url}}/wp-content/plugins/email-editor/src/Integrations/Core/Renderer/Blocks/icons/facebook/facebook-white.png" width="24px" alt="facebook icon" style="border: 0; height: auto; -ms-interpolation-mode: bicubic; line-height: 100%; max-width: 100%; outline: none; text-decoration: none; display: block; margin-right: 0;">
+ </a>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<!--[if mso | IE]>
+</td>
+<![endif]-->
+<!--[if mso | IE]>
+<td style="padding-left:16px;">
+<![endif]-->
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="center" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; background-color: #f00075; border-radius: 9999px; display: inline-table; float: none; margin-left: 16px;">
+ <tbody>
+ <tr style="display: block; padding: 0.25em;">
+ <td style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; vertical-align: middle; font-size: 13px;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+ <tbody>
+ <tr>
+ <td style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; vertical-align: middle;">
+<a href="https://example.com/instagram" class="wp-block-social-link-anchor" style="color: #ffffff; text-decoration: none; text-transform: none; font-size: 13px;">
+ <img decoding="async" height="24px" src="{{site_url}}/wp-content/plugins/email-editor/src/Integrations/Core/Renderer/Blocks/icons/instagram/instagram-white.png" width="24px" alt="instagram icon" style="border: 0; height: auto; -ms-interpolation-mode: bicubic; line-height: 100%; max-width: 100%; outline: none; text-decoration: none; display: block; margin-right: 0;">
+ </a>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<!--[if mso | IE]>
+</td>
+<![endif]-->
+<!--[if mso | IE]>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</td>
+ </tr>
+ </tbody>
+ </table>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div> </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+</td>
+</tr>
+</table>
+<![endif]-->
+
+</body>
+</html>
diff --git a/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/snapshots/core-blocks.txt b/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/snapshots/core-blocks.txt
new file mode 100644
index 00000000000..af863d254bf
--- /dev/null
+++ b/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/snapshots/core-blocks.txt
@@ -0,0 +1,36 @@
+Preheader
+
+Your order is on its way
+
+Hi there, read our [shipping policy](https://example.com/shipping) or reply to this email. Tracking: https://example.com/track/AVeryLongUnbreakableTrackingCodeThatShouldNotWidenTheEmailLayout1234567890
+
+[A parcel]
+The parcel
+
+Left column
+
+Right column
+
+[View order](https://example.com/order)
+
+- First item
+- Second item
+
+Great service.
+
+A customer
+
+Product Price
+T-shirt $20
+
+Inside a group
+
+Text on a cover
+
+Media and text
+
+[Shop again](https://example.com/shop)
+
+[facebook icon](https://example.com/facebook)
+
+[instagram icon](https://example.com/instagram)
diff --git a/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/snapshots/styled-blocks.html b/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/snapshots/styled-blocks.html
new file mode 100644
index 00000000000..b925c762728
--- /dev/null
+++ b/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/snapshots/styled-blocks.html
@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en-US">
+<head>
+
+
+ <title>Subject</title>
+ <meta charset="UTF-8">
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="format-detection" content="telephone=no">
+ <!-- Forced Styles -->
+
+<style type="text/css">@media screen and (max-width: 660px){.layout-flex-wrapper,.layout-flex-wrapper tbody,.layout-flex-wrapper tr{display: block !important; width: 100% !important;}.layout-flex-item{display: block !important; padding-bottom: 8px !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important;}.layout-flex-item table,.layout-flex-item td{box-sizing: border-box !important; display: block !important; width: 100% !important;}}</style>
+</head>
+<body dir="ltr" style="background-color: #fff; color: #1e1e1e; padding-top: 24px; padding-bottom: 24px; font-family: Inter,"Helvetica Neue",Arial,sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0; line-height: 1.5; font-size: 16px; direction: ltr; text-align: left; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-spacing: normal;">
+ <!--[if mso | IE]>
+<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="660px" style="width:660px">
+<tr>
+<td>
+<![endif]-->
+ <div class="email_layout_wrapper" style="background-color: #fff; color: #1e1e1e; padding-top: 24px; padding-bottom: 24px; font-family: Inter,"Helvetica Neue",Arial,sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0; line-height: 1.5; font-size: 16px; direction: ltr; text-align: left; box-sizing: border-box; margin: 0 auto; width: 100%; max-width: 660px;">
+ <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+ <tbody>
+ <tr>
+ <td class="email_preheader" height="1" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; direction: ltr; text-align: left; color: #fff; display: none; font-size: 1px; line-height: 1px; max-height: 0; max-width: 0; mso-hide: all; opacity: 0; overflow: hidden; -webkit-text-size-adjust: none; visibility: hidden;">
+ Preheader </td>
+ </tr>
+ <tr>
+ <td class="email_content_wrapper" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; direction: ltr; text-align: left; font-size: inherit;">
+ <div class="wp-site-blocks">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" class="email-block-group wp-block-group" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate; background-size: cover;">
+ <tbody>
+ <tr>
+ <td class="email-block-group-content" width="660px" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+ <!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate;">
+ <tbody>
+ <tr>
+ <td align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td style="padding-left:24px;padding-right:24px;">
+<![endif]-->
+<div class="email-root-padding is-layout-flow wp-block-post-content-is-layout-flow" style="padding-left: 24px; padding-right: 24px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" class="email-block-group wp-block-group has-background has-link-color wp-elements-{{id}}" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; background-color: #f0f4ff; border-collapse: separate; background-size: cover;">
+ <tbody>
+ <tr>
+ <td class="email-block-group-content" width="612px" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;">
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate;">
+ <tbody>
+ <tr>
+ <td class="email-text-block wp-block-heading has-vivid-purple-color has-text-color has-georgia-font-family" align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; font-family: Georgia,Times,"Times New Roman",serif; color: #9b51e0; min-width: 100%; word-break: break-word; font-size: 16px; text-align: left;">
+<h2 class="wp-block-heading has-vivid-purple-color has-text-color has-georgia-font-family" style="margin-bottom: 0; margin-top: 0; font-style: normal; font-weight: 700; line-height: 1.2; font-size: 32px; font-family: Georgia,Times,"Times New Roman",serif; color: #9b51e0;">Styled heading</h2>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%" style="margin-top:16px;">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="margin-top: 16px;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate;">
+ <tbody>
+ <tr>
+ <td class="email-text-block has-pale-cyan-blue-background-color has-background has-large-font-size" align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 16px 24px; background-color: #8ed1fc; font-size: 24px; min-width: 100%; word-break: break-word; color: #1e1e1e; text-align: left;">
+<p class="has-large-font-size wp-block-paragraph" style="display: block; margin: 0; font-size: 24px;">Paragraph with a palette background and a <a href="https://example.com/link" style="text-decoration: none; color: #c00;">link inside a group with a link color</a>.</p>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%" style="margin-top:16px;">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="margin-top: 16px;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate;">
+ <tbody>
+ <tr>
+ <td class="email-text-block has-missing-palette-slug-color has-text-color" align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; color: #336699; min-width: 100%; word-break: break-word; font-size: 16px; text-align: left;">
+<p class="has-missing-palette-slug-color has-text-color wp-block-paragraph" style="display: block; margin: 0; color: #336699;">Text color with a palette slug that does not exist</p>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%" style="margin-top:16px;">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="margin-top: 16px;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0; mso-table-rspace: 0; border-collapse: separate;">
+ <tbody>
+ <tr>
+ <td class="email-text-block has-courier-new-font-family" align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; font-family: "Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace; min-width: 100%; word-break: break-word; color: #1e1e1e; font-size: 16px; text-align: left;">
+<p class="has-courier-new-font-family wp-block-paragraph" style="display: block; margin: 0; font-family: "Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace;">Monospace text</p>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+
+<!--[if mso | IE]>
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left" width="100%">
+ <tbody>
+ <tr>
+ <td>
+<![endif]-->
+<div class="email-block-layout" style="">
+<!--[if mso | IE]>
+<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
+<tr>
+<td style="margin-top: 16px;text-align: center" >
+<![endif]-->
+ <div style="margin-top: 16px; text-align: center;">
+<table class="layout-flex-wrapper" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; display: inline-block; vertical-align: top;">
+<tbody>
+<tr>
+<td class="layout-flex-item" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; width: auto;">
+ <tbody>
+ <tr>
+ <td class="has-text-color has-background wp-block-button" align="center" valign="middle" role="presentation" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; border-width: 0; padding-top: calc(.667em + 2px); padding-right: calc(1.333em + 2px); padding-bottom: calc(.667em + 2px); padding-left: calc(1.333em + 2px); font-size: inherit; font-family: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; text-decoration: none; text-transform: inherit; letter-spacing: inherit; color: #ffffff; background-color: #cf2e2e; border-radius: 8px; word-break: break-word; display: block;">
+<a class="button-link has-text-color" href="https://example.com/cta" target="_blank" style="text-decoration: none; color: #ffffff; display: block;">Call to action</a>
+</td>
+ </tr>
+ </tbody>
+ </table>
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+ <!--[if mso | IE]>
+</td>
+</tr>
+</table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<!--[if mso | IE]>
+</td>
+ </tr>
+ </tbody>
+ </table>
+<![endif]-->
+</div> </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+</td>
+</tr>
+</table>
+<![endif]-->
+
+</body>
+</html>
diff --git a/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/snapshots/styled-blocks.txt b/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/snapshots/styled-blocks.txt
new file mode 100644
index 00000000000..c71c82ee6a3
--- /dev/null
+++ b/packages/php/email-editor/tests/integration/Engine/Renderer/Snapshots/snapshots/styled-blocks.txt
@@ -0,0 +1,11 @@
+Preheader
+
+Styled heading
+
+Paragraph with a palette background and a [link inside a group with a link color](https://example.com/link).
+
+Text color with a palette slug that does not exist
+
+Monospace text
+
+[Call to action](https://example.com/cta)