My Mautic version is: 4.4.3
My PHP version is: 7.4
My Database type and version is: mysql
My problem is:
When creating an e-mail and selecting “code mode” as a theme the builder button on the right upper corner is greyed out, the builder itself not being accessible. GrapesJS is installed and running an I have also cleared the cache. So we cannot use the builder to adapt e-mails we made previously nor create new ones with “code mode”.
These errors are showing in the log: none
Steps I have tried to fix the problem: check GrapesJS and clear cache
As far as I could see there is no solution to this problem on the forum yet. Could anybody lend a hand / advise us what to do?
Hi,
The code mode in Mautic 4.4.x versions works the following way:
if you choose the codemode, you have to stick with codemode
if you want to make changes in the code of an email you built with the viseal builder, you can click on the edit code button and do so.
Plz note, that emails created with the visual editor will be subject of changes based on the twig files of that specific theme. The twig files overwarite and add code to the final email.
Thank you for your reply.
I understand your explanation. Previously, however, it was possible to edit the code via the builder. Now in 4.4.x it seems only possible to work on the code via the tab “Advanced” in the template. In the earlier Mautic versions you could do and subsequently check changes to the code in the builder. That is not possible anymore. It would be nice to have that option again.
We mainly worked in html because some clients had certain special wishes which we then tried to solve in the code (although we are no specialists). Generally, we used to start from the blank template to create our e-mails. Since we run 4.4.x, however, we found that the e-mails are not wel rendered in e-mail clients. It seems part of the code in the header/footer gets lost or is not read. We therefore switched to the other themes (mostly Brienz and Paprika) which are MJML and work fine. Having a blank MJML theme in Mautic would be a bonus to us.
So, we do not have an immediate problem if we want to create new e-mails. It has only become more difficult to adapt existing ones or to reuse existing e-mails.
Hi @joeyk - Maybe I mis-understood you. Are you saying if a single email is created in “Code Mode” (if it worked for us) that we would never be able to use one of the included email templates?
We have some custom email designs that we modify with Xcode and just want to use them in Mautic.
Our work-around was to use the “Blank” template then in the builder select “Edit Code” and wipe all the contents and paste our own code into the email.
This works but seems a weird way to have to do this.
Hello John,
There are 5 ways to create an email in Mautic:
GrapesJS Builder
Code Mode only
If you use this option, you will get the 100% identically coded email as you pasted into that field.
But you can’t visually edit it.
HTML builder
Each email has to have a template. Each template consists of multiple files. These files describe the BASIS of the head, body, footer, style of the email. If the email is created as HTML, then you will have a HTML email.
You can edit this email with the builder, and visually change it. You can also change the code in HTML (This is important → HTML). But not all the code. Some html is hardcoded into the template of this email. The default Mautic HTML emails are created for the Legacy builder, they contain sections, which are not used by the GrapesJS builder. GrapesJS will be able to use that HTML and do as best as possible, but you’ll see some difference between the on-screen version and the final, sent version of the email.
MJML Builder
This is the same as the previous one, but it behaves differently when it edits emails written in MJML. The template of an MJML email is written in MJML but a HTML file has to be also present. (Mautic let’s you upload a template only if you have an HTML file as well, which is not used.)
The code editor insicde MJML also expects MJML. Once you save this email, the MJML code is saved in a saparate mjml table, and the html is converted and saved at the same place where other HTML emails are saved.
This editor also uses multiple files from the template: head, body, etc. Those files have an impact on the final look of the email.
The first MJML templates Mautic shipped with were kinda sucky, (I did them) and we try to fix everything for M5. Brienz was already uploaded, and we have also Confirmme and Paprika ready, just need to add them to Github.
As the GrapesJS was evolving during M4 development, the blocks behavour changed, head elements were added, etc. The templates had to be adjusted during this evolution.
Now I can say, that the MJML is the most advanced way to edit an email in Mautic.
Legacy Builder
You can activate these by turning off the GrapesJS builder among the Plugins.
Legacy HTML code mode
You can just edit the code, and you’ll get back exactly the same email as you uploaded the code for.
No other files will overwrite / change / influence your code.
Legacy Visual builder
This builder was changed for a reason.
You need to specify the blocks in a special way in order for you to have to ability to customize their content. The blocks cannot be moved / duplicated freely, unless the template is done in a very specific way.
To sum up:
If you have base templates that have almost no hardcoded head and style, then you can use the code editor in the GrapesJS to create emails. The _Blank one is not your friend.
@joeyk - Thank you for the reply. That is some good information. However these do not explain why the “Code Mode” button isn greyed out in the email and landing pages areas.
Thank you for the extensive explanation!
I think that what John means is that if you select the Code Mode template (as indicated in the picture and with GrapesJS activated) then you do not have an option anymore to go to the builder (as with Legacy builder); the button in the upper right corner is greyed out. So that basicly leaves you with two options.
GrapesJS activated: select code mode and change code in tab Advanced or prepare it outside Mautic and then import the code under the tab.
GrapesJs deactivated: use the Legacy builder as previously.
As I mentioned previously, we did find a work-around by just starting with another template (Blank in our case) and then using “edit Code” then deleting all the existing code then pasting our own code.
Thanks for the clarification.
The code mode template only allows codemode, this is why the builder is greyed out.
The Blank will make some changes to the code you add with edit Code.
J
Hi,
It’s not your fault, the email creation process is somewhat work of dr Frankenstein, but only because we want to ensure the best options to everyone.
The currently confusing situation will be solved in the future.
And yes the code mode email will be processed and tracking / unsub / webview is also added.
