Commit dcb246cea17 for woocommerce
commit dcb246cea1763c6a6056e809836c3ee13e53565e
Author: Ann <annchichi@users.noreply.github.com>
Date: Mon Aug 10 11:26:53 2026 +0800
[Email Editor] Fix spacing below block email buttons (#67466)
* Add design for email button spacing fix
* Document precedent for email button spacing fix
* Add plan for email button spacing fix
* Fix spacing below block email buttons
* Add changelog entry for email button spacing fix
* Remove internal email spacing planning documents
diff --git a/packages/php/email-editor/changelog/fix-button-wrapper-spacing b/packages/php/email-editor/changelog/fix-button-wrapper-spacing
new file mode 100644
index 00000000000..8d74bdc1660
--- /dev/null
+++ b/packages/php/email-editor/changelog/fix-button-wrapper-spacing
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Prevent inline button wrapper tables from leaving extra baseline space below buttons in rendered block emails.
diff --git a/packages/php/email-editor/src/Engine/Renderer/ContentRenderer/Layout/class-flex-layout-renderer.php b/packages/php/email-editor/src/Engine/Renderer/ContentRenderer/Layout/class-flex-layout-renderer.php
index 897f90de36b..a6cc67a4983 100644
--- a/packages/php/email-editor/src/Engine/Renderer/ContentRenderer/Layout/class-flex-layout-renderer.php
+++ b/packages/php/email-editor/src/Engine/Renderer/ContentRenderer/Layout/class-flex-layout-renderer.php
@@ -60,7 +60,7 @@ class Flex_Layout_Renderer {
// MS Outlook doesn't support style attribute in divs so we conditionally wrap the buttons in a table and repeat styles.
$output_html = sprintf(
'<!--[if mso | IE]><table align="%2$s" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%%"><tr><td style="%1$s" ><![endif]-->
- <div style="%1$s"><table class="layout-flex-wrapper" style="display:inline-block"><tbody><tr>',
+ <div style="%1$s"><table class="layout-flex-wrapper" style="display:inline-block;vertical-align:top"><tbody><tr>',
esc_attr( $styles ),
esc_attr( $justify )
);
diff --git a/packages/php/email-editor/tests/integration/Engine/Renderer/ContentRenderer/Layout/Flex_Layout_Renderer_Test.php b/packages/php/email-editor/tests/integration/Engine/Renderer/ContentRenderer/Layout/Flex_Layout_Renderer_Test.php
index 3e6390ef433..7290d0d3782 100644
--- a/packages/php/email-editor/tests/integration/Engine/Renderer/ContentRenderer/Layout/Flex_Layout_Renderer_Test.php
+++ b/packages/php/email-editor/tests/integration/Engine/Renderer/ContentRenderer/Layout/Flex_Layout_Renderer_Test.php
@@ -67,6 +67,31 @@ class Flex_Layout_Renderer_Test extends \Email_Editor_Integration_Test_Case {
$this->assertStringContainsString( 'Dummy 2', $output );
}
+ /**
+ * Test the single-row wrapper's vertical alignment.
+ *
+ * @testdox Should top-align the single-row wrapper to avoid baseline spacing below its content.
+ */
+ public function test_it_top_aligns_the_single_row_wrapper(): void {
+ $parsed_block = array(
+ 'innerBlocks' => array(
+ array(
+ 'blockName' => 'dummy/block',
+ 'innerHTML' => 'Dummy 1',
+ ),
+ ),
+ 'email_attrs' => array(),
+ );
+
+ $output = $this->renderer->render_inner_blocks_in_layout( $parsed_block, $this->rendering_context );
+
+ $this->assertStringContainsString(
+ 'style="display:inline-block;vertical-align:top"',
+ $output,
+ 'The inline wrapper table should opt out of baseline alignment.'
+ );
+ }
+
/**
* Test it handles justifying the content.
*/