Blocks Edit Blog

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 div, .edit-image img, .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>

If you have any questions regarding implementation with your MJML code or with using Blocks Edit editable tags, you can reach out to support.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr