MJML default head attributes

Author: pierre-b

CHANGELOG.md

@@ -8,6 +8,8 @@ All notable changes to this project will be documented in this file.
 - **Templates**: Added ability to translate email templates to languages configured in workspace settings
 - **Contacts**: Fixed invalid "Blacklisted" status option in change status dropdown, replaced with valid "Bounced" and "Complained" statuses (#285)
 - **SMTP**: Added configurable EHLO hostname for SMTP connections. Some SMTP servers reject `EHLO localhost`; users can now set a custom hostname (e.g., their domain) via the `SMTP_EHLO_HOSTNAME` env var, setup wizard, or workspace integration settings. Defaults to the SMTP host value when empty.
+- **Transactional Notifications**: Fixed delivery stats (sent, delivered, failed, bounced) always showing 0 by linking messages to their originating notification via a new `transactional_notification_id` column
+- **Email Builder**: Fixed `<mj-attributes>` global styles not applying in preview and sent emails (#282)
 
 ## [27.4] - 2026-03-01
 

console/src/components/email_builder/blocks/MjAttributesBlock.tsx

@@ -50,7 +50,12 @@ export class MjAttributesBlock extends BaseEmailBlock {
 
   getValidChildTypes(): MJMLComponentType[] {
     // mj-attributes can contain attribute elements for any MJML component type
-    return ['mj-text', 'mj-button', 'mj-image', 'mj-section', 'mj-column', 'mj-wrapper', 'mj-body']
+    return [
+      'mj-all', 'mj-class',
+      'mj-text', 'mj-button', 'mj-image', 'mj-section', 'mj-column',
+      'mj-wrapper', 'mj-body', 'mj-divider', 'mj-spacer', 'mj-social',
+      'mj-social-element', 'mj-group'
+    ]
   }
 
   /**

console/src/components/email_builder/types.ts

@@ -24,6 +24,8 @@ export type MJMLComponentType =
   | 'mj-style'
   | 'mj-title'
   | 'mj-raw'
+  | 'mj-all'
+  | 'mj-class'
 
 // Common attribute interfaces
 export interface PaddingAttributes {

pkg/notifuse_mjml/converter_test.go

@@ -738,3 +738,65 @@ func TestFormatSingleAttribute(t *testing.T) {
 		})
 	}
 }
+
+func TestEndToEnd_MjAttributesGlobalsPreserved(t *testing.T) {
+	// Build full tree via JSON: mjml > head > mj-attributes > [mj-all, mj-text] + body > section > column > mj-text
+	fullJSON := `{
+		"id": "mjml-1",
+		"type": "mjml",
+		"children": [
+			{
+				"id": "head-1",
+				"type": "mj-head",
+				"children": [
+					{
+						"id": "attrs-1",
+						"type": "mj-attributes",
+						"children": [
+							{"id":"all-1","type":"mj-all","attributes":{"fontFamily":"Helvetica"}},
+							{"id":"text-def","type":"mj-text","attributes":{"color":"#333333"}}
+						]
+					}
+				]
+			},
+			{
+				"id": "body-1",
+				"type": "mj-body",
+				"children": [
+					{
+						"id": "section-1",
+						"type": "mj-section",
+						"children": [
+							{
+								"id": "column-1",
+								"type": "mj-column",
+								"children": [
+									{"id":"text-1","type":"mj-text","content":"Hello"}
+								]
+							}
+						]
+					}
+				]
+			}
+		]
+	}`
+
+	block, err := UnmarshalEmailBlock([]byte(fullJSON))
+	if err != nil {
+		t.Fatalf("Failed to unmarshal: %v", err)
+	}
+
+	// Convert to MJML string
+	mjmlOutput := ConvertJSONToMJML(block)
+
+	// Behavior: mj-all appears in the MJML output with its attributes
+	if !strings.Contains(mjmlOutput, `<mj-all font-family="Helvetica"`) {
+		t.Errorf("Expected mj-all with font-family in output, got:\n%s", mjmlOutput)
+	}
+
+	// Behavior: body mj-text with no stored attributes produces a tag without inline attributes
+	// (so mj-attributes globals can take effect at render time)
+	if !strings.Contains(mjmlOutput, `<mj-text>Hello</mj-text>`) {
+		t.Errorf("Expected body mj-text without inline attributes, got:\n%s", mjmlOutput)
+	}
+}

pkg/notifuse_mjml/model.go

@@ -33,6 +33,8 @@ const (
 	MJMLComponentMjStyle          MJMLComponentType = "mj-style"
 	MJMLComponentMjTitle          MJMLComponentType = "mj-title"
 	MJMLComponentMjRaw            MJMLComponentType = "mj-raw"
+	MJMLComponentMjAll            MJMLComponentType = "mj-all"
+	MJMLComponentMjClass          MJMLComponentType = "mj-class"
 )
 
 // Common attribute interfaces
@@ -564,40 +566,25 @@ func UnmarshalEmailBlock(data []byte) (EmailBlock, error) {
 		children[i] = child
 	}
 
-	// Merge with defaults
-	mergedAttrs := mergeAttributesWithDefaults(blockJSON.Type, blockJSON.Attributes)
+	// Preserve stored attributes as-is (no defaults injected during deserialization)
+	attrs := blockJSON.Attributes
+	if attrs == nil {
+		attrs = make(map[string]interface{})
+	}
 
 	// Create base block
 	base := &BaseBlock{
 		ID:         blockJSON.ID,
 		Type:       blockJSON.Type,
 		Children:   children,
-		Attributes: mergedAttrs,
+		Attributes: attrs,
 		Content:    blockJSON.Content,
 	}
 
 	// Return typed wrapper based on component type
 	return createTypedBlock(base), nil
 }
 
-// mergeAttributesWithDefaults merges default attributes with provided attributes
-func mergeAttributesWithDefaults(componentType MJMLComponentType, attrs map[string]interface{}) map[string]interface{} {
-	defaults := GetDefaultAttributes(componentType)
-	if attrs == nil {
-		return defaults
-	}
-	merged := make(map[string]interface{})
-	// Copy defaults first
-	for k, v := range defaults {
-		merged[k] = v
-	}
-	// Override with provided attributes
-	for k, v := range attrs {
-		merged[k] = v
-	}
-	return merged
-}
-
 // createTypedBlock creates a typed block wrapper for a BaseBlock
 func createTypedBlock(base *BaseBlock) EmailBlock {
 	switch base.Type {
@@ -633,6 +620,10 @@ func createTypedBlock(base *BaseBlock) EmailBlock {
 		return &MJRawBlock{BaseBlock: base}
 	case MJMLComponentMjAttributes:
 		return &MJAttributesBlock{BaseBlock: base}
+	case MJMLComponentMjAll:
+		return &MJAttributeElementBlock{BaseBlock: base}
+	case MJMLComponentMjClass:
+		return &MJAttributeElementBlock{BaseBlock: base}
 	case MJMLComponentMjBreakpoint:
 		return &MJBreakpointBlock{BaseBlock: base}
 	case MJMLComponentMjFont:
@@ -723,7 +714,15 @@ var ValidChildrenMap = map[MJMLComponentType][]MJMLComponentType{
 	MJMLComponentMjSpacer:         {},
 	MJMLComponentMjSocialElement:  {},
 	MJMLComponentMjRaw:            {},
-	MJMLComponentMjAttributes:     {},
+	MJMLComponentMjAttributes: {
+		MJMLComponentMjAll, MJMLComponentMjClass,
+		MJMLComponentMjText, MJMLComponentMjButton, MJMLComponentMjImage,
+		MJMLComponentMjSection, MJMLComponentMjColumn, MJMLComponentMjWrapper,
+		MJMLComponentMjBody, MJMLComponentMjDivider, MJMLComponentMjSpacer,
+		MJMLComponentMjSocial, MJMLComponentMjSocialElement, MJMLComponentMjGroup,
+	},
+	MJMLComponentMjAll:            {},
+	MJMLComponentMjClass:          {},
 	MJMLComponentMjBreakpoint:     {},
 	MJMLComponentMjFont:           {},
 	MJMLComponentMjHtmlAttributes: {},