Content Design Blog

On email design and content workflow

How-to: Using Blocks Edit tags in MJML email templates

If you use MJML to code your email templates, here's how to add Blocks Edit editable tags to your MJML template code.

How-to: Using Blocks Edit tags in MJML email templates

If you use MJML to develop your email templates, this guide will show you how you can add Blocks Edit editable tags to your template, directly within the MJML code. That way, you can use your compiled code as an editable BE template and more easily make updates to your template without worrying about redoing your BE tags each time.

Text and images

Add the following global CSS classes that will be used for text, images, and button text:

.edit-text img, .edit-image div, .edit-button a {
  -block-edit: true;
}

Then use edit-text, edit-image, and edit-button classes on MJML elements you want to add editable options to, like so:

<mj-text css-class="edit-text">Content text</mj-text> <mj-image css-class="edit-image" src="http://placehold.it/600x450" href="#" alt="Banner"></mj-image> <mj-button css-class="edit-button" href="#">Call to Action</mj-button>

In order to use the data-block attribute for stored content, use block-edit within tags in your mj-text:

<mj-text padding="0">
  <p class="block-edit" data-block="body-text">Content text</p>
</mj-text>

For images, use the standard HTML img tag instead of mj-image, with a wrapper of mj-text:

<mj-text padding="0">
  <a href="#"><img class="block-edit" data-block="banner" height="auto" src="http://placehold.it/600x450" style="border: 0; display: block; outline: none; text-decoration: none; height: auto; width: 100%; font-size: 13px;" width="600" alt="Banner" /></a>
</mj-text>

And for buttons, use the cross-client HTML technique instead of mj-button, with a wrapper of mj-text:

<mj-text padding="0">
  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="display: inline-block; border-collapse: separate; line-height: 100%;"><tbody style="display: inline-block;"><tr><td style="display: inline-block; border: none; cursor: auto; mso-padding-alt: 10px; background: #cccccc;">
    <a href="#" class="block-edit" data-block="cta" style="display: inline-block; background: #cccccc; margin: 0; padding: 10px; mso-padding-alt: 0px;" target="_blank">Call to Action</a>
  </td></tr></tbody></table>
</mj-text>

Sections

For block-section containers use the mj-raw element in order to include the data-group attribute:

<mj-raw><div class="block-section" data-group="basic"></mj-raw>
...
<mj-raw></div></mj-raw>

Components and regions

Add the following global CSS classes:

.edit-component < tr {
  -block-component: true;
}
.edit-region < tr {
  -block-region: true;
}
.edit-remove < tr {
  -block-remove: true;
}

Then use edit-component, edit-region, and edit-remove classes on MJML areas that you want to add component or region options for:

<mj-button css-class="edit-region edit-remove" href="#">Call to Action</mj-button>

Preview text

Just add this global CSS class for preview text:

body > div:first-child {
  -block-preview: true;
}

Navigation

If you use the mj-navbar tag, add this to your global CSS classes:

.edit-nav a {
  -block-edit: true;
}

Then use the edit-nav class on the MJML tag:

<mj-navbar base-url="#" hamburger="hamburger" css-class="edit-nav">
  <mj-navbar-link href="#">Nav item 1</mj-navbar-link>
</mj-navbar>

Limitation

One Blocks Edit option that at this point doesn't seem doable within MJML and would need to be added after compiling your MJML code is background images, primarily because of the additional required Outlook code.

Example template

Last month we released a new version of our Starter Email Template which we've open-sourced the code for on GitHub. We built the template using MJML and have included the MJML source code as part of the repo. It uses all of the techniques above in several different ways that you can refer to and see how it all works in practice.

If you have any questions regarding implementation with your MJML code or with BE tags implementation in general, you can reach out for Support. Our tags docs are also updated with new functionality details and code examples.

Photo of Ovi Demetrian Jr By Ovi Demetrian Jr

Share this post

Tweet | LinkedIn post | Facebook post | Email a team member