Commit 76addadc2bd for woocommerce
commit 76addadc2bda8f8ee0a2752a9fa876dfc565e7ac
Author: Allison Levine <1689238+allilevine@users.noreply.github.com>
Date: Tue Jul 21 16:37:43 2026 -0400
fix(email-editor): stop email galleries from floating and eating the gap below them (#66833)
* fix(email-editor): stop email galleries from floating and eating the gap below them
The gallery wrapper table emitted align="left" (from the default text align),
which email clients render as float:left. That pulled the gallery out of normal
flow, so the block after it (e.g. a heading) failed to clear it and rendered with
no vertical gap — noticeably less space than after a non-floated image.
Drop the align attribute; horizontal alignment is already carried by the
text-align declaration in the wrapper's inline styles, so alignment is preserved
while the gallery stays in normal flow. The image renderer already avoids this by
mapping full/wide to align="center" (which does not float).
Adds a regression test asserting the gallery wrapper table carries no
float-triggering align attribute while retaining text-align.
Part of NL-736 / NL-742.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VtoLgUASMqdJG9TjJn7a1J
* test(email-editor): parse gallery wrapper with WP_HTML_Tag_Processor
Address review: locate the wrapper table via WP_HTML_Tag_Processor (the mandated
HTML pattern in this package) instead of a preg_match on the raw tag, and assert
align is absent (get_attribute returns null) with text-align present in style.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VtoLgUASMqdJG9TjJn7a1J
---------
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
diff --git a/packages/php/email-editor/changelog/fix-nl-742-gallery-float-spacing b/packages/php/email-editor/changelog/fix-nl-742-gallery-float-spacing
new file mode 100644
index 00000000000..36d79de7b01
--- /dev/null
+++ b/packages/php/email-editor/changelog/fix-nl-742-gallery-float-spacing
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Keep email galleries in normal document flow so the block after a gallery (e.g. a heading) keeps its vertical spacing. The gallery wrapper table's align="left" rendered as a float in email clients, pulling the gallery out of flow so the following block failed to clear it. Alignment is preserved via the existing text-align CSS.
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-gallery.php b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-gallery.php
index e80db83e26c..5381ca3b6ce 100644
--- a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-gallery.php
+++ b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-gallery.php
@@ -426,10 +426,15 @@ class Gallery extends Abstract_Block_Renderer {
);
// Apply class and style attributes to the wrapper table.
+ //
+ // Intentionally omit the `align` attribute. `align="left"` (or "right") on a table renders as
+ // `float: left` in email clients, taking the gallery out of normal flow — the block that follows
+ // (e.g. a heading) then fails to clear it and butts up against the gallery with no vertical gap.
+ // Horizontal alignment is already carried by the `text-align` declaration in $block_styles['css'],
+ // so dropping the attribute preserves alignment while keeping the gallery in normal flow.
$table_attrs = array(
'class' => 'email-block-gallery ' . Html_Processing_Helper::clean_css_classes( $original_wrapper_classname ),
'style' => $block_styles['css'],
- 'align' => $rendering_context->get_default_text_align(),
'width' => '100%',
);
diff --git a/packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Gallery_Test.php b/packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Gallery_Test.php
index d57cdf98c3c..f6e9d07ea79 100644
--- a/packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Gallery_Test.php
+++ b/packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Gallery_Test.php
@@ -108,6 +108,37 @@ class Gallery_Test extends \Email_Editor_Integration_Test_Case {
$this->assertStringContainsString( 'image3.jpg', $rendered );
}
+ /**
+ * The gallery wrapper table must not carry an `align="left"`/`align="right"` attribute: those
+ * render as `float` in email clients, pulling the gallery out of normal flow so the following
+ * block (e.g. a heading) fails to clear it and loses its vertical gap. Horizontal alignment must
+ * instead come from the `text-align` CSS declaration, which keeps the gallery in normal flow.
+ */
+ public function testItDoesNotFloatWrapperTableWithAlignAttribute(): void {
+ $rendered = $this->gallery_renderer->render( '', $this->parsed_gallery, $this->rendering_context );
+
+ // Locate the gallery wrapper table by its class. Parsing the tag with WP_HTML_Tag_Processor is
+ // more robust than matching the raw HTML string, and matches the convention used elsewhere here.
+ $processor = new \WP_HTML_Tag_Processor( $rendered );
+ $this->assertTrue(
+ $processor->next_tag(
+ array(
+ 'tag_name' => 'table',
+ 'class_name' => 'email-block-gallery',
+ )
+ ),
+ 'Expected a gallery wrapper table with the email-block-gallery class.'
+ );
+
+ // No float-triggering align attribute on the wrapper table ( get_attribute() is null when absent ).
+ $this->assertNull( $processor->get_attribute( 'align' ) );
+
+ // Alignment is preserved via the text-align CSS declaration instead, keeping the block in normal flow.
+ $style = $processor->get_attribute( 'style' );
+ $this->assertIsString( $style );
+ $this->assertStringContainsString( 'text-align', $style );
+ }
+
/**
* Test it handles different column counts
*/