Thinking in Blocks

What to take into consideration when making your HTML content editable in Blocks Edit

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.

Making content editable

At the base level is the content, individual text and images that you can start to enable 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.

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. 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

Regions are used for repeating blocks of content within sections, like a listing of items. You can also use them to allow for removing certain content areas. They are not added to the sidebar and are usually specific to a particular section. 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.

Implementation Support

Need help implementing your template? Here are some options: