Implementation Guide

This guide provides an overview of the CSS classes/styles to use to make content in a template editable when imported into Blocks Edit. You can import either your template's HTML file or a ZIP archive that includes images used in your template. When you're ready to export, any updated images will be included as well.

Making content editable

block

block

or

-block-edit: true

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

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

remove

block-remove

or

-block-remove: true

Allows the element to be removed.

repeat

block-repeat

or

-block-repeat: true

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

region

block-region

or

-block-region: true

Displays box around a group of elements that lets the user know which parts of the template can be modified.

  • Add 'remove' option to allow for removing entire region blocks and its containing elements
  • Add 'repeat' to allow for duplicating entire region blocks

Images

For styling text links within content, just add an example link within an editable region and Blocks Edit will replicate the style for any additional link added within that region. The same thing applies for any specific styling for bold and italic text.

Additional options

The default options for standard elements are:

h1, h2, h3, h4, h5, h6

No text formatting, just editing and linking.

p

Text editing, formatting and linking.

img

Ability to replace image, specify an image URL, add a link, and set alt text.

To overwrite the default options, add the following classes or styles:

bold

block-bold

or

-block-bold: true


block-no-bold

or

-block-bold: false

Allows/disables adding 'strong' element around content.

italics

block-italic

or

-block-italic: true


block-no-italic

or

-block-italic: false

Allows/disables adding 'em' element around content.

linking

block-link

or

-block-link: true


block-no-link

or

-block-link: false

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

text

block-text

or

-block-text: true


block-no-text

or

-block-text: false

Allows/disables content from being edited in an element.

min/max characters

block-minchar-#

or

-block-minchar: #


block-maxchar-#

or

-block-maxchar: #

Sets a character limit for content in an element.