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 might be a CTA: it can be used as a standalone story, and it can also be used as an element on a page or in a blog post.
For guidance on using stories to create and manage content, please refer to our editor guide.
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 block usage when creating content.
To create a new block, go to your Block Library, click New Block, and choose your type.
Add fields
To add blocks to a content type, the content type will need to have a blocks field. In the content type editor, go to Fields and add a Blocks field. (Tip: You can also add a blocks field to nestable and universal blocks.)
There are many other fields you can use to compose your blocks. To learn more about them, see our 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.
Changes to the technical name may take a few minutes to propagate. Ensure editors have saved 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 is is short and easy to understand.
Create previews
Blocks have an option to select a preview field, which will appear in the overview. Blocks can also have a screenshot, which appears when the editor chooses a new component.
Blocks also have an option to create 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 and class attributes. Styles can be applied with blok ink classes:
<div class="text-red">{{it.error}}</div>Data from linked stories is not 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.