Blocks

In Storyblok, a block is a piece of content. A block can be an entire entry (a story), or it can be just one piece of an entry.

There are three categories of blocks:

• Content type
• Nestable
• Universal

Content type blocks are stories. An example of a content type block would be a post, article, or page. Every blank Storyblok space comes with a page content type.

Nestable blocks are children of other blocks. An example of a nestable block would be text, image, or hero. They are dynamic building blocks to create rich content layouts.

Universal blocks can be used as both content type blocks and nestable blocks. An example of a universal block is a CTA, which can be used as a standalone story and an element on a page or in a blog post.

Tip

For guidance on using stories to create and manage content — including how to edit blocks and how to create preset blocks to pre-fill content — refer to the Visual Editor manual.

All blocks in a space are organized in the Block Library. Blocks in the library can be organized using folders and tags, which can then be used to restrict access when creating content.

To create a new block, open the Block Library, select + New Block, and choose the type.

Add fields

To add blocks to any content type, open Fields and add a Blocks field.

There are many other fields you can use to compose your blocks. To learn more about them, check the Fields documentation.

Set name

The Technical name is the ID that will be used for the block in the API response. The technical name will also be used to generate a display name if a display name is not provided.

Caution

Changes to the technical name may take a few minutes to propagate. Ensure editors have saved their work and exited the editor before making such changes. If branches are present, the change will only appear on the preview branch until the other branches are deployed.

The Display name is the name that will appear for editors. Ensure this name is short and easy to understand.

The Description is used to describe the block for editors. Ensure it's short and easy to understand.

Create previews

Blocks support a preview field, which will appear in the overview, and a screenshot, which appears when editors select a new component.

Blocks also support creating a preview template using the Squirrelly 8 templating language, which looks like this:

<div>{{it.text}}</div>
{{@image(it.image.filename)/}}

All fields are available on the it object. The preview template allows div, span, strong, ul, li, and p tags, as well as class attributes.

<div class="text-red">{{it.error}}</div>

Data from linked stories isn't available in the preview template.

The following Squirrelly helpers are available:

• @image()
• @it()
• @each()
• @foreach()

View history

Every block type has a version history, which records the changes to the block. Old block versions can be restored and previewed in the Block Library.

Related resources

Components in the Management API

Component Folders in the Management API