GrapesJS editor destroying greater-than sign (>) selector in MJML email template

Product Support
1

Your software
My Mautic version is: 4.01
My PHP version is: 7.4.3
My Database type and version is: 8.0.26-0ubuntu0.20.04.3

Your problem
My problem is: If have and need statements like this in the MJML:
@media only screen and (max-width:743px) {
.plr-9p > table > tbody > tr td{
padding-left:3%!important;
padding-right:3%!important;
}
but the editor is butchering it into
@media only screen and (max-width:743px) {
.plr-9p &# 62; table &# 62; tbody &# 62; tr td{
padding-left:3%!important;
padding-right:3%!important;
}

i.e. HTML-escaping the “greater than” (I manually inserted the blank in &# 62; to prevent the forum from “unbutchering” the string :slight_smile: )

These errors are showing in the log: n/a

Steps I have tried to fix the problem:

2

I think this is not related to our implementation of Grapesjs. I just tested with one of our default templates on the official demo of mjml and grapesjs. The part in the footer does not get bold and big in Grapesjs - but it does with mjml:

image
image1920×1098 116 KB

See for yourself:
https://mjml.io/try-it-live/
https://grapesjs.com/demo-mjml.html

I used this template:

<mjml>
  <mj-head>
    <mj-style>
      table tr > td p{
      font-weight: bold;
      font-size: 30px;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-raw>
      <!-- Company Header -->
    </mj-raw>
    <mj-section background-color="#f0f0f0">
      <mj-column>
        <mj-text font-style="bold" font-size="24px" color="#6f6f6f">My Company
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-raw>
      <!-- Confirm  text -->
    </mj-raw>
    <mj-section background-color="#fafafa">
      <mj-column width="400px">
        <mj-text font-style="bold" font-size="22px" font-family="Helvetica Neue" color="#626262">Please confirm your subscription!
        </mj-text>
        <mj-button background-color="#F45E43" font-style="bold" href="https://aivie.ch">Yes, subscribe me to the list
        </mj-button>
        <mj-text color="#525252" font-size="16px" line-height="1.5">If you received this email by mistake, simply delete it. You won't be subscribed if you don't click the confirmation link above.

          For questions about this list, please contact:
          email@email.com
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-raw>
      <!-- Confirm  text -->
    </mj-raw>
    <mj-section background-color="#fafafa">
      <mj-column width="400px">
        <mj-text color="#525252" line-height="1.2">
          <p>Company Name

            Beautiful City
          </p>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Maybe raise an issue with Grapesjs mjml?
Maybe it is possible to use different CSS rules? IMO that would be the easiest solution.

3

That’s what we did as a workaround, indeed!

However, thinks like this can drive you nuts if you are not aware of them.
I think if this is Mautic’s email templating engine going forward, it should ideally work flawlessly,
or if nothing else we should provide a comprehensive and clear list of known issues (“currently unsupported things - avoid these in your MJML template!”), maybe with hints for workarounds, and ideally with a link to a Github issue either on the Mautic end or on the GrapesJS end.
Don’t you think? :slight_smile:

4

Yes, I absolutely agree. I think this is another one of these

(Still working on the workaround)

But where should we do this? I guess a section in the documentation would be a good place? Similar to this Troubleshooting emails | Mautic

5

imho yes exactly, should be part of the docs!
@rcheesley ?

6

We have a section on the builders page for known issues:

Please feel free to make a PR to add any missing information :slight_smile:

7

Are you referring to this section?

Known bugs / issues

Please use the issue queue on the GitHub repository to find the latest updates and report bugs with the plugin. Be sure to search first in case someone has already reported the bug.

So far this is purely meta, if I am not mistaken - but yes, this should be the right place to explicitly list all the things that people should avoid (or be aware of).

8

Yes, we do have some information here:

where we state that there are certain things you can’t use in your themes, but this is more aimed at the theme builders.

We did used to call out specific bugs we knew of when the builder was in beta, but we decided it was more sensible to make those a label on GitHub because otherwise the docs was getting outdated quite quickly.

So tl;dr if we need to add some information like this to the docs about things which you can’t do, we should add it to this page. Maybe having a section on how to use custom CSS and what you need to know if you are going to do that.