Developer

Making HTML templates editable in Blocks Edit

The Blocks Edit CMS framework is a simple library based on classes, styles, and attributes that you add to your HTML code to define editable features. However, with full flexibility comes great responsibility! While these set of properties are designed to work with any kind of custom-coded template, it may take some finessing to get right. In the same way HTML and CSS are conceptually simple, it's in the practice of using them that yields powerful results.

See also: Thinking in Blocks, on how to think about your HTML template's various parts.

Preview Mode: Try out a template's features after import without having to create emails. To go into Preview Mode, click on the title of your template in the dashboard. Any edits you make here are not saved.

Template versions: You can update a current template by uploading a new version of it using the 'Import new version' option in Preview Mode (accessible from clicking on the title of your template on the dashboard). New emails will be created based on the latest version. Any emails created from previous versions will continue to work, but with features only from the specific version each email was created from.

Cheat Sheet

The essential properties of the Blocks Edit editable framework

Below is an index of all the properties available.

edit

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

block-edit
-block-edit: true
-block-edit: false

text

Disables content from being edited in an element.

block-no-text
-block-text: false

min/max characters

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

block-minchar-#
-block-minchar: #
block-maxchar-#
-block-maxchar: #

bold

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

block-bold
block-no-bold
-block-bold: true
-block-bold: false

italics

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

block-italic
block-no-italic
-block-italic: true
-block-italic: false

link

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

block-link
block-no-link
-block-link: true
-block-link: false

image

Allows/disables replacing an image. Default: replacing image not allowed. More Info →

block-edit
block-image
block-no-image
-block-image: true
-block-image: false

background images

Allows replacing a background image. More Info →

block-background
block-no-background
-block-background: true
-block-background: false

component

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

block-component
-block-component: true

region

Group of elements and components that can be customized. More Info →

block-region
-block-region: true

repeat

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

block-repeat
-block-repeat: true

remove

Allows a region to be removed.

block-remove
-block-remove: true

section

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

block-section
-block-section: true