Building Blocks with DML

August 30, 2019

Dyspatch blocks are modular, responsive, customizable, and easy to build with Dyspatch Markup Language (DML). Once a block is created and saved to a theme you can use it in the visual editor to create email templates quickly.

Using DML to Build Blocks

We built DML to make coding responsive email template blocks fast and simple. Design your block with structural DML tags like <dys-column> and add common email elements with DML tags like text <dys-text>, images <dys-img>, and buttons <dys-button>. You can also use DML to create dynamic blocks and add personalizations, like variables @{variable_name}.

The blocks you build with DML will be available in the visual editor and used to create new email templates. Templates created from blocks can then be easily exported from Dyspatch into any of our supported export languages.

Create a Block

On the Themes & Blocks page select the Create drop-down menu and choose New Block to get started on a brand new block for your organization. Selecting new block from the create drop-down menu

Starting in the Block Editor

A new block will already have the basic DML structure in the Block Editor. The block editor starting DML ready to go

Style with Attributes

Each DML tag has attributes for adding style to the element. Using the attributes available for a <dys-text> tag we can make the text larger, add color, and assign a font to customize the style of this element. The block editor with attributes added to the dys-text for styling

Making Content Editable

Add an editable attribute with a unique name to allow template creators to customize the content in the visual editor.

the block editor with an editable attribute added to the dys-text

The editable attribute is available for many DML and HTML elements, allowing you to control which content in the block will be available for customization in the visual editor. For example, an editable attribute added to a <dys-img> tag will only allow the src, alt text, and href to be editable in the visual editor.

When an editable attribute is added to an element, the content becomes placeholder text that will be visible and editable in the visual editor. Without the editable attribute the content saved in the block will be locked in and unavailable for editing in the visual editor.

Each editable attribute requires a name that is unique to the block.

DML Templating

Add personalization and templating logic to your block with DML. DML supports variables @{variable_name} and expressions, like if statements <dys-if cond="conditional_name"></dys-if>. Find out more about DML templating here.

The logic you add using DML can be exported as any of our supported export languages, so you can easily use your Dyspatch templates in multiple email sending platforms. a variable and an if statement in the block editor

Sample Data

On the Sample Data tab add test data to preview your block and test you block's templating logic with the same kind of data you would use to send your emails. Read more about Sample Data here. data in the sample data tab in the block editor {'firstname':'Rowan','membership': true}

Add Block to Themes

Add your block to any of the themes your team will want use it with in the visual editor. You can view which themes your block is already available with on the Themes tab in the block editor. The theme tab in the block editor shows which themes the block is in

Check out our DML documentation

Head over to our DML docs to read more about DML and see more examples.

Didn't find what you're looking for?

Ask our support team, we're here to help!

Contact Support