WooNooW/BASIC_CARD_COMPLETE.md

✅ Basic Card Type & Newline Fixes Complete!

Problems Solved! 🎉

1. ✅ Newlines preserved - Text no longer collapses into one line
2. ✅ Basic card type added - Plain text sections without styling
3. ✅ No content loss - All content can be wrapped in cards

---

What Was Fixed

1. Newline Parsing ✅

Problem: Markdown newlines were collapsed, making everything inline

Solution: Updated markdown-utils.ts to:

• Preserve paragraph breaks (double newlines)
• Add <br> tags for single newlines within paragraphs
• Properly close and open <p> tags

Result:

Order Number: #12345
Customer: John Doe

Now renders as:

<p>
Order Number: #12345<br>
Customer: John Doe
</p>

---

2. Basic Card Type ✅

What It Is:

• A new card type: [card type="basic"]
• No background color
• No border
• No padding
• Just plain text in a section

Why It's Useful:

• Wrap footer text without styling
• Ensure all content is in blocks (no loss)
• Give users a "plain text" option
• Makes templates more structured

CSS:

.card-basic {
  background: none;
  border: none;
  padding: 0;
  margin: 16px 0;
}

---

3. Template Footer Updates 📝

Old Pattern:

---

Need help? Contact {support_email}
© {current_year} {site_name}

New Pattern:

[card type="basic"]

Need help? Contact {support_email}

[/card]

Changes:

• ✅ Removed © {current_year} {site_name} (already in global footer)
• ✅ Wrapped support text in [card type="basic"]
• ✅ Removed standalone --- separators
• ✅ Staff templates: Removed footer entirely

---

Files Modified

1. admin-spa/src/lib/markdown-utils.ts

• Fixed newline handling
• Proper paragraph and line break parsing
• Better list handling

2. admin-spa/src/components/EmailBuilder/types.ts

• Added 'basic' to CardType

3. admin-spa/src/components/EmailBuilder/EmailBuilder.tsx

• Added "Basic (Plain Text)" option to card type selector

4. admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx

• Added CSS for .card-basic (no styling)

5. includes/Email/DefaultTemplates.php (needs manual update)

• See TEMPLATE_UPDATE_SCRIPT.md for all changes
• 17 templates need footer updates

---

How Basic Card Works

In Markdown:

[card type="basic"]

This is plain text.
No background, no border, no padding.

Just content.

[/card]

Renders As:

<div class="card card-basic">
<p>This is plain text.<br>
No background, no border, no padding.</p>
<p>Just content.</p>
</div>

Displays As:

This is plain text.
No background, no border, no padding.

Just content.

(No visual styling - just text!)

---

Benefits

✅ For Content:

• All content wrapped in blocks
• No content loss in converter
• Structured templates

✅ For Users:

• Can add plain text sections
• No forced styling
• More flexible templates

✅ For Developers:

• Cleaner template structure
• Easier to parse
• Better maintainability

---

Card Type Comparison

Type	Background	Border	Padding	Use Case
basic	None	None	None	Plain text, footers
default	White	Gray	Yes	Standard content
hero	Gradient	None	Yes	Headers, highlights
success	Gradient	None	Yes	Confirmations
info	Light blue	Blue	Yes	Information
warning	Light yellow	Orange	Yes	Warnings

---

Next Steps

Manual Template Updates Required:

You need to update includes/Email/DefaultTemplates.php:

1. Open the file
2. Follow TEMPLATE_UPDATE_SCRIPT.md
3. Update all 17 template footers
4. Remove copyright lines
5. Wrap support text in [card type="basic"]

Estimated time: 10-15 minutes

Or: I can help you do it programmatically if you prefer!

---

Testing Checklist

✅ Newlines:

• Text with newlines displays correctly
• Paragraphs separated properly
• Line breaks within paragraphs work

✅ Basic Card:

• Can select "Basic (Plain Text)" in editor
• No background/border/padding applied
• Content displays as plain text
• Works in preview

✅ Templates:

• Update all template footers
• Test customer templates
• Test staff templates
• Verify no content loss

---

Summary

Feature	Status
Newline parsing	✅ Fixed
Basic card type	✅ Added
Card type selector	✅ Updated
Preview CSS	✅ Updated
Template updates	📝 Manual needed

Almost done! Just need to update the template footers! 🚀