Content Building: Example - Reusable Components

In our other example you can see that flat content entries are quite common, but from time to time they are not enough. To help you out we've introduced reusable and unlimited nestable components in Storyblok.

1. Check your Goals/Designs

The post detail page should again contain a title, image, content, date and an author's name. Let's assume the article now should end with a grid with two columns containing a headline and an image.

2. Pinpoint your content schema

As in the earlier example we will now try to find the fields we want to use in our content type for creating the page shown in the above step. Since we can now see a set of fields that is reused multiple times as columns in a grid we can utilize the "blocks" field type to allow reusable and nestable Components.

3. Configure your content types

Same as before we would recommend to create a folder with the default content-type set to yours. The fields we're going to use are mainly the same, but additionally we will add one more field of the type "blocks" to use (and create) reuseable and nestable components.

| Field | Description | |---------|--------------| | title | The title field will hold the headline of the post. The headline is mostly short so a simple text field-type should do the trick | | date | Below the title field, we’ll need a date field with the field-type "date", that will be used to display the date of the post. | | content | The content of the post is the place to put your content. To allow a rich-text editing experience we recommend to use the field-type "markdown". | | author | For author we will need to add a reference to other content entries, to do so we will use the 'single-choice' option with the source type 'Stories' to reference other content entries. | | columns | A field of type "blocks" that we will utilize to add multiple instances of the our "column" component, you can create and nest as many components as you like using this field type | {: .uk-table.uk-table-striped.table.table--left.uk-table-hover }

Each of those column entries are clickable and after pressing them you can fill in the fields defined for that one type of component - headline and image.

Combining that structure with our visual editor results in the screen below. It allows your editors to visually edit their content and reduce errors.

To give your editors more freedom while creating content you could also create a component for the richtext content instead of a static field. They would be able to reuse all components you allow them in that specific content type, so they can not only create text based sites but also complex marketing pages with grids, sliders without a developer creating another content type because the layout has changed.