Bloq Templates

Added in version 4.6.0.

A non-editable template is distinguished by the dashed border around the bloqs.

Bloq templates are designed to do two things:

  1. Speed up content management by building pages quicker.

  2. Give you, the developer or designer, more control over how content is created.

As a developer, you can create a template that is collection of bloqs that can be added to an entry with a single click. Most sites have re-usable content patterns. Simple patterns can be built using a single bloq, but bigger, or more complex patterns, may require the uses of several bloqs. Some patterns may share bloqs as well. By using a bloq template, you can pre-build these re-usable patterns. Templates do not allow pre-populating of content, just the definition of the template itself. If you're familiar with atomic design, each bloq is the equivalent of a molecule. A single bloq consists of multiple atoms, or fields. Bloq templates, on the other hand, let you define a template, or an organism.

Bloq templates do not require you to change your front-end template file code. You can start using bloq templates on existing sites using bloqs you already have defined. Just create a new bloq template, and assign bloqs that you want to use in the template. Those same bloqs can still be added separately to a field as long as they're selected in the field's settings.

Editable Templates

When an editable template is inserted into an entry, it inserts multiple bloqs just like if you had inserted each bloq individually, except it inserts them all at once. The content editor can than remove, clone, or re-order those bloqs just as they could any other bloq. This also means they can choose to not use the design pattern that you have put in place. In some cases this may be desired. An editable template is useful for common, but flexible, content patterns. Since they can be modified they do not have a unique visual appearance like a non-editable template.

Non-Editable Templates

A non-editable template means that when the template is inserted into an entry, none of the bloqs within the template can be removed, cloned, or re-ordered. The template is fixed, and will always present itself that way. This is the strictest use of a bloq template. After all you created the template for a reason. It has a pre-defined and expected structure, and you always want it to appear this way without any modifications. All non-editable templates are contained inside of the hidden Template Wrapper, and are distinguished by the dashed border around the bloqs (as seen in the screenshot above).

Template Wrapper

Each non-editable bloq template is wrapped in a hidden Bloq called the Template Wrapper. If you inspect the database you will see this hidden bloq. On the entry publish page it is presented differently than other bloqs, but all the bloqs within the wrapper are fixed. When rendering bloqs in a front-end template file, you don't have to add any special code for this wrapper bloq. The bloqs within the template will render as expected without it. However, if you do want to use the Template Wrapper in your front-end template file, you can use the following tag pair to style it.

<!-- This tag pair is not required. If it is not added to your template file,
then the {bloqs:children} tag will output all the bloqs in the template. -->
{__template_wrapper}
<div class="wrapper">
{bloqs:children}
</div>
{/__template_wrapper}
<!-- Code for the bloqs that may or may not appear inside of the bloq template -->
{bloq_text_content}
<div class="text-content">
... {some_atom} ...
{bloqs:children}
</div>
{/bloq_text_content}
{bloq_video_content}
<div class="video-content">
... {another_atom} ...
{bloqs:children}
</div>
{/bloq_video_content}

Bloq Templates and non-nested fields

If you create a template that has nested fields, as pictured above, and you add the template to a Bloqs field that is not set to nestable, the bloqs will save, but it will lose it's nestable structure and flatten out. For this reason it is best to not assign a nested template to a non-nested field.