Open navClose nav

Blocks

https://res.cloudinary.com/forestry-demo/image/fetch/c_limit,dpr_auto,f_auto,q_80,w_640/https://forestry.io/uploads/2018/04/blocks-content-ui.png

The Blocks field type is a repeatable array of field groups. Unlike the Repeatable Field Group, however, the field groups within a Blocks field do not all have to be the same.

When a user adds a block, they first select which type of block they wish to add. Blocks can be reordered in the UI by dragging and dropping.

Options

  • General
    • Label — the human-friendly label shown above the input field in the editor
    • Name — the key stored in your content’s front matter, used to access it in your templates
    • Description — a human-friendly description of what the field does and/or instructions for your editors
    • Hidden — hides the field in the editor; but allows developers to set default values or maintain the field for legacy purposes.
  • Blocks
  • Validation
    • Minimum — The minimum number of blocks that must be added to the field.
    • Maximum — The maximum number of blocks allowed for the field.

Templating

Items in the Blocks array will contain a template parameter that corresponds to the partial FMT they were created from.

The intended use is to iterate over the elements in your Blocks field and render different templates based on the value of the template field.

Hugo

Hugo’s partial function includes a file from the layout/partials directory and allows us to pass a context. Passing . from inside the loop will pass all of the individual block’s front matter into the partial template.

{{ range .Params.page_sections }}
    {{ if eq "hero-section" .template }}
        {{ partial "blocks/hero" . }}
    {{ end }}
    {{ if eq "call-to-action" .template }}
        {{ partial "blocks/cta" . }}
    {{ end }}
{{ end }}

Jekyll

In this Jekyll example, the individual block’s front matter will be available to the included template via the block variable.

{% for block in page.page_sections %}
    {% assign template = block.template %}
    {% case template %}
    {% when 'hero-section' %}
        {% include blocks/hero.html %}
    {% when 'call-to-action' %}
        {% include blocks/cta.html %}
    {% endcase %}
{% endfor %}

Config Files

You can configure this field in Front Matter Template Config Files as follows:

type: blocks
name: page_sections
label: Page Sections
template_types:
- example-fmt-1
- example-fmt-2

Example

page_sections:
    - template: hero-section
      title: Hello
      subtitle: World
    - template: call-to-action
      heading: Get Started
      button_url: https://forestry.io/signup
      button_text: Sign up for Forestry

Last updated on April 23, 2018