Blocks

If Base is the foundation of a template, Blocks are the building-blocks to build up your template. It's individual modules you can have infinite of.

Only users with role Designer or Admin can access and edit Blocks

Blocks consists of the following elements:

• HTML/CSS code

• A series of Inputs

​When creating a Block, the user needs to think of that Block as a separate entity. It is something that can be inserted multiple times. Usually when implementing the Base template, the code considered as a Block will be nested in the Base code. In this situation we want to cut it out and separated into it's own Block.

Creating a Block

​From within the Template Editor, you can create a Block from the Left panel.

The Left panel is where you create a Block on the + button

Either by marking code inside the Base or by clicking the + icon a new Block will be created. If code has been marked, it will be cut out and pasted into the Block.

The user is marking code in the Base, and clicking the + button in the left panel to separate it into its own Block

Naming the Block

Next step is to give it a compelling name, for later use in both the Inputs and how the Block is displayed when Creating an email.

To create a name for Inputs, Insert the "Name" and "Key" in the Right panel. The "Name" Can be with capital letters and spaces as it's used for display only. They "Key" cannot, as it's used for the Liquid rules. We suggest however you name them more or less the same as not to create confusion later on.

Clicking the Pen in the Left Panel gives you the option to change the name of the Block and how it's displayed when Creating an email. It can be individually named for flexibility reasons.

In this example we named the block Hero in all places

Next step is to create the many Settings that makes up all the rules which we will go over in the next chapter.

Thumbnail

Inserting a thumbnail can be nice, to indicate to your users how that Block generally look, and give them an easier time navigating their options.

To upload a thumbnail for a Block, click on the Block in the Template Editor in the left hand side. Once done, click the tab called Thumbnail in the right hand side menu. There you will be able to upload a thumbnail image. Once done, click save.

In this example we're uploading a Thumbnail to a Block

This is how it appear in the Email Designer.

Block position logic

This section covers how a Block can react to its own position by checking which Block comes before or after it. Sometimes, you want a Block’s appearance or behavior to change depending on the order in which it's situated in the final email.

This is where Block Position Logic comes in: a feature that allows a Block to detect its neighboring Blocks and respond accordingly. The core concept here is that you have a series of objects targeting the directions around the Block. From there you can start creating your rules. Here are the variables:

{{ self.before_block }}
{{ self.block }}
{{ self.after_block }}

Put into practice we can then start listening for what comes before this particular Block. Here we're for instance making a rule for if the Block type, named "spacer" comes before our Block or after it and make a rounding of the border-radius accordingly.

{% assign is_after_spacer = self.before_block == "spacer" %}
{% assign is_before_spacer = self.after_block == "spacer" %}

{% if is_after_spacer %}
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
{% endif %}
{% if is_before_spacer %}
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
{% endif %}

Result

Let's try and expand on this logic, and look for if the Block is the last in the list of Blocks. With this logic we're creating a variable called "is_last_block", checking if the "self.after_block" object is empty, if so then in execute this design.

{% assign is_last_block = self.after_block == blank %}

    {% if is_last_block %}
      Background-color:#3a3b38;
      color: #ffffff;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
    {% endif %}
  

Result

Looking to control layout based on the entire Block order — like checking if a certain Block appears last in the sequence of Blocks? See how Block Position Logic works in the Base.