Your software
Your problem
Create an email using the builder.
Fill in mj-text designated elements.
Add photo.
Save, close the builder.
Open builder again, bottom mj-text elemens are now hidden.
Click preview, it’s all visible in the preview.
See below for screenshots and code.
Email theme: email.mjml.twig
<mjml>
<mj-body>
<mj-section data-section-wrapper="1">
<mj-column width="600px" data-slot-container="1">
<!-- Company Header -->
<mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
<mj-raw>
<div>
Hi {contactfield=firstname},
<br>This is the SF STYLE email template.
<br>
<br>{signature}
<br>
<br>
</div>
<mj-raw>
</mj-text>
<mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
<mj-raw>
PHOTO
</mj-raw>
</mj-text>
<mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
<mj-raw>
SIGNATURE
</mj-raw>
</mj-text>
<mj-text color="#838383" font-size="12px" padding="8px" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" >
{unsubscribe_text}
</mj-text>
<mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
<mj-raw>
<hr/>
</mj-raw>
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
These errors are showing in the log:
Steps I have tried to fix the problem:
Code from the builder:
<mjml>
<mj-body>
<mj-section data-section-wrapper="1">
<mj-column width="600px" data-slot-container="1">
<!-- Company Header -->
<mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
...
</mj-text>
<mj-image src="https://m.example.com/media/images/img_0411_cropped_med_cropped.png" align="left" id="iv4sv" width="100px"/>
<mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
<mj-raw>
PHOTO
</mj-raw>
</mj-text>
<mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
<p>Jakob
<br>Tel: 070 721 07 37
<br>linkedin.com/in/jakobpersson
</p>
</mj-text>
<mj-text color="#838383" font-size="12px" padding="8px" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
{unsubscribe_text}
</mj-text>
<mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
<mj-raw>
<hr>
</mj-raw>
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
It would appear that the mj-image tag breaks the builder. Removing the image solves the problem.
The issue seems specific to themes written in MJML – or my theme specifically. I cannot reproduce it using Blank, for example.
I used a responsive variant of Blank I’ve made and the builder now works. The mj-image component does not cause the builder to fail rendering subsequent components.
Those problems are WYSIWYG problems and not really Mautic.
It was like that +25yrs ago. And it is still a thing today (don’t hold your breath while waiting for a fix).
Most “Drag & Drop” gui are bloating the code when adding/removing items.
This will eventually bring some unwanted side effects as you described.
The fix:
It’s not in CKEditor, it’s in GrapesJS. The problem seems to be with the mj-image block/tag and rendering it in the builder. I recreated the same template using HTML and it works. I suspect it’s because the MJML renderer isn’t complete yet.
That’s pretty much my understanding of a wysiwig.
Works fine - until you have conflicting code where it won’t execute the same from within the editor, the web or the email.
Clean up your code and those “missing” elements that are overlapping in the editor will show up.
The mj-image block was added by using the image block in the builder (GrapesJS). If that generates faulty markup, it’s the builder’s fault.
I applied this patch to the dev branch and used the JS files to replace the ones in the default 5.0.3 release, and it seems to work. The dev version (5.x branch) has some strange issues and throws iconv() errors at me. The 5.0.3 version seems stable enough.
system
April 10, 2024, 7:39pm
11
This topic was automatically closed 36 hours after the last reply. New replies are no longer allowed.
