Skip to content
Storyblok Documentation Docs

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 used 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.

All blocks in a space are listed in the Block Library. Use folders and tags to organize blocks or control access within the editor.

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

Add fields

Section titled “Add fields”

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

Storyblok supports many other fields you can use to compose blocks. To learn more, check the Fields documentation.

Set name

Section titled “Set name”

The Technical name is listed as the value of the component (block) key in the API response.

The Technical name also serves as the Display name if one isn't provided.

The Display name is visible in the editor. To help users quickly recognize it, pick a short and descriptive name.

The Description provides additional information about the block. A brief, clear description lets users understand the block's use case.

Create previews

Section titled “Create previews”

Blocks support a preview field that appears in the overview, and a screenshot that appears when editors select the block in the editor.

Blocks can include preview templates based on the Squirrelly 8 templating language. Below is an example snippet:

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

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

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

The following Squirrelly helpers are available:

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

Data from linked stories isn't available in preview templates.

View history

Section titled “View history”

Every block has a version history, which records the changes made to it over time. View and restore previous versions in the Block Library.

Section titled “Related resources”

Get in touch with the Storyblok community

DiscordGitHubYouTubeBlueSkyX.comLinkedIn