The Blocks Edit CMS framework is a simple HTML API based on classes, styles, and attributes. Below is an index of all the options available. See also: Thinking in Blocks, on how to think about your HTML template's various parts.

template versions

You can update a current template by uploading a new version of it. New emails will be created based on the updated version. Any previously created emails will still work but use the specific previous version that it was originally created from.

Start with your current template

You don't need to build a new HTML template. You can use the last HTML template you worked on as a starting point. And you can always update your template to add functionality later.

Look for patterns

Find consistencies used in the design like layout pieces, repeating content formatting, headlines, buttons, etc. Then isolate them in your code. Blocks Edit works by copying and duplicating code that follows standard design and development practices.

Take apart the layout

Making things editable is essentially based on tagging parts to add functionality to. Blocks Edit Sections make up a template's layout, as modular parts stacked on top of each other. All defined sections are shown in the left sidebar and can be dragged in between other sections.

Gather elements

Blocks Edit Regions are used for repeating blocks of content within Sections, like a listing of items. They are not added to the sidebar and are usually specific to a particular Section's formatting. Blocks Edit Components are stand-alone pieces that can be used throughout a template, like buttons and headlines. They are also added to the sidebar to be dragged in anywhere there are other content pieces.

Add styling options

Sections, Regions and Components can have alternate versions to choose from, called Styles. This allows for switching out a different look for areas that contain the same kinds of content. For example, offering color options, but which are limited based on brand guidelines.

Make the text editable

Once you have the pieces for putting together a layout, it's time to go into the individual text and images and enable them for editing. To do this, add the 'block-edit' class or style to containers directly around text and on images themselves. You can limit bold and italics options, as well as the character count, and even disable links from being added to certain text.

Content

Pieces of text, images, and links

edit

To be used on individual HTML elements, making content within each editable.

• Use on 'img' elements to allow for uploading a new image
• Editable elements cannot have nested elements that are also editable
• For areas with multiple paragraphs, make the container editable instead of the individual paragraphs

Example

text

Disables content from being edited in an element.

min/max characters

Sets a character limit for content in an element. Default: unlimited.

bold

Allows/disables adding 'strong' element around content. Default: bold allowed.

italics

Allows/disables adding 'em' element around content. Default: italics allowed.

links

Allows/disables adding 'a' element around content for linking. Default: linking allowed.

For styling text links within content, Blocks Edit automatically picks up all link styles from the original template's sections and adds them as link options. Also includes alias option.

images

• When an image in a template is uploaded in place of a current one, an option to crop the image is given with the same proportions as the original source image
• If there is a 'height: auto' CSS style for the image, there is no cropping option; the image is scaled to the width of the source image with a proportional height of the new image
• The source of each individual image can by overriden with the image's URL option
• Includes option for alt text

Allows/disables replacing an image. Default: replacing image allowed.

tolkens

You can use email service provider tolkens/tags/variables throughout your template as you normally would and they will be read by your ESP when importing the final template into it to send out.

Example

stored content

Adding to HTML elements stores their content. This works with style functionality to update content across each style version.

• Each unique content piece requires its own variable name
• Using the same variable name on multiple content pieces will update content for all pieces when one is updated

Example

Components

Stand-alone functional elements

component

Stand-alone piece that can be added throughout a template.

• Is shown as part of a library on the left sidebar
• A Component can always be removed
• A dashed red line is shown where a Component can be dropped in
• A dashed red outline is shown when mousing over a Component along with its options

Example

style

Multiple versions of a Component that can be switched between.

• The same variable name should be used for all Style blocks that apply to its Component
• Style blocks should be adjacent to each other
• Numbered tabs are shown to switch between the available Styles
• Optionally, use Stored Content for content to get updated within each Style version

Example

Regions

Customizable areas

region

Group of elements and Components that can be customized.

• Regions cannot contain nested Regions
• A dashed red outline is shown when mousing over a Region along with its options

repeat

Allows duplicating a Region, making it part of a listing where each copy can be reordered or removed.

style

Multiple versions of a Region that can be switched between.

• The same variable name should be used for all Style blocks that apply to its Region
• Style blocks should be adjacent to each other
• Numbered tabs are shown to switch between the available Styles
• Optionally, use Stored Content for content to get updated within each Style version

Example

remove

Allows a Region to be removed.

Sections

Layout options

section

Areas of content stacked on top of each other that can be added in as part of a template's layout.

• Sections can be added in multiple times, reordered, and removed as needed
• Sections are stored and shown in a grid of thumbnails to choose from
• A dashed blue line is shown where a Section can be dropped in
• A solid blue outline is shown when mousing over a Section along with its options

style

Multiple versions of a Section that can be switched between.

• The same variable name should be used for all Style blocks that apply to its Section
• Style blocks should be adjacent to each other
• Numbered tabs are shown to switch between the available Styles
• Optionally, use Stored Content for content to get updated within each Style version

Example