Bloq Components

Added in version 4.6.0 as Bloq Templates Renamed in version 4.8.0 to Bloq Components

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

Bloq components 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 component 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 component, you can pre-build these re-usable patterns. Components do not allow pre-populating of content, just the definition of the component 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 components, on the other hand, let you define a template, or an organism.

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

Editable Components

When an editable component 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 component 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 component.

Non-Editable Components

A non-editable, which is the default state, component means that when the component is inserted into an entry, none of the bloqs within the component can be removed, cloned, or re-ordered. The component is fixed, and will always present itself that way. This is the strictest use of a bloq component. After all you created the component for a reason. It has a pre-defined and expected structure, and you always want it to appear this way without any modifications.

Bloq Components and non-nested fields

If you create a bloq component and you assign it to a Bloqs channel field that is not set to nestable, the field will automatically be set to nestable. If you disable the nestable setting on the Bloqs channel field and save an entry containing bloq components, then the nesting structure will be lost and your bloqs will flatten out, thus affecting the presentation on the front-end and within the control panel.