What to take into consideration when making your HTML content editable in Blocks Edit
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.
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.
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.
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.
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.
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.