Content Schema

The contentSchema property passed to defineBlock defines the fields for the block in the CMS, that merchants can fill with their own content.

The schema is an object and contains the fields object, where the keys are the name's of the fields, and the values the other options of a field.

The content schema als contains the subschemas property, which is an object defining the subschemas (bloks) available in Storyblok (the CMS).

export default defineBlock({
  ...
  contentSchema: {
    fields: {
      title: {
        type: 'text',
        preview: 'This is a title',
        isTranslatable?: true,
        isRequired: true,
      },
      category: {
        type: 'select',
        preview: 'news',
        options: [
          { value: 'news', label: 'News articles' },
          { value: 'tips', label: 'Tips & Tricks' },
        ],
      },
      publishedAt: {
        type: 'date',
        preview: '2022-12-12 08:12',
        withTime: true,
      },
      headerImage: {
        type: 'image',
        preview:
          'https://images.unsplash.com/photo-1669962367460-00b711b2e3f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=700&q=80',
      },
      readMore: {
        type: 'link',
        preview: 'https://google.com',
      },
      description: {
        type: 'richText',
        toolbar: ['bold', 'italic', 'underline', 'link'],
        isTranslatable?: true,
      },
      cards: {
        type: 'subschema',
        allowed: ['card'],
        max: 3,
        preview: [
          {
            subschema: 'card',
            value: {
              cardTitle: 'Card title',
              cardImage:
                'https://a.storyblok.com/f/145828/5000x3333/564e281ca1/force-majeure-du8abwm5z2g-unsplash.jpg',
              cardButtons: [
                {
                  subschema: 'button',
                  value: {
                    text: 'Button',
                    link: 'https://a.storyblok.com/f/145828/5000x3333/564e281ca1/force-majeure-du8abwm5z2g-unsplash.jpg',
                  },
                },
              ],
            },
          },
        ],
      },
    },
    subschemas: {
      button: {
        fields: {
          text: {
            type: 'text',
            label: 'Text',
            isTranslatable?: true,
            isRequired: true,
            maxLength: 40,
          },
          link: {
            type: 'link',
            label: 'Link',
            isTranslatable?: true,
            isRequired: true,
          },
        },
      },
      card: {
        fields: {
          cardImage: {
            type: 'image',
            label: 'Image',
            isRequired: true,
          },
          cardTitle: {
            type: 'text',
            label: 'Title',
            isTranslatable?: true,
            isRequired: true,
          },
          cardButtons: {
            type: 'subschema',
            label: 'Buttons',
            isRequired: false,
            max: 2,
            allowed: ['button'],
          },
        },
      },
    },
  }
});

Supported fields

The table below shows the supported content fields. The example return values shows the format that the content will be returned in by useBlockState.

Type	Example return value
"date"	"2022-12-12T07:12:00.000Z"
"image"	{ "id": 123, "alt": "Alt text", "name": "Name", "focus": null, "title": "Title", "filename": "https://images.unsplash.com/photo-1669962367460-00b711b2e3f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=700&q=80", "copyright": "", "fieldtype": "asset" }
"link"	{ "id": "", "url": "https://google.com", "linktype": "url", "fieldtype": "multilink" }
"richText"	{ "type": "doc", "content": [ { "type": "paragraph", "content": [ { "text": "Rich text", "type": "text" } ] } ] }
"select"	"news"
"subschema"	[ { "subschema": "card", "value": { "cardTitle": "Card title", "cardImage": { "id": 123, "alt": "Alt text", "name": "Name", "focus": null, "title": "Title", "filename": "https://a.storyblok.com/f/145828/5000x3333/564e281ca1/force-majeure-du8abwm5z2g-unsplash.jpg", "copyright": "", "fieldtype": "asset" }, "cardButtons": [ { "subschema": "button", "value": { "text": "Button", "link": { "id": "", "url": "https://a.storyblok.com/f/145828/5000x3333/564e281ca1/force-majeure-du8abwm5z2g-unsplash.jpg", "linktype": "url", "fieldtype": "multilink" } } } ] } } ]
"text"	"Text"

Typings

type ContentSchemaField =
  | {
      type: "date";
      description?: string;
      isRequired?: boolean;
      isTranslatable?: boolean;
      label?: string;
      preview?: string;
      withTime?: boolean;
    }
  | {
      type: "image";
      description?: string;
      isRequired?: boolean;
      isTranslatable?: boolean;
      label?: string;
      preview?: string;
    }
  | {
      type: "link";
      description?: string;
      isRequired?: boolean;
      isTranslatable?: boolean;
      label?: string;
      preview?: string;
    }
  | {
      type: "richText";
      description?: string;
      isRequired?: boolean;
      isTranslatable?: boolean;
      label?: string;
      preview?: string;
      toolbar: Array<string>;
    }
  | {
      type: "select";
      description?: string;
      isRequired?: boolean;
      isTranslatable?: boolean;
      label?: string;
      options: Array<{
        label: string;
        value: string;
      }>;
      preview?: string;
    }
  | {
      type: "subschema";
      allowed: Array<string>;
      description?: string;
      isRequired?: boolean;
      isTranslatable?: boolean;
      label?: string;
      max?: number;
      preview?: string;
    }
  | {
      type: "text";
      description?: string;
      isRequired?: boolean;
      isTranslatable?: boolean;
      label?: string;
      maxLength?: number;
      preview?: string;
    };

type ContentSchema = {
  fields: {
    [name: string]: ContentSchemaField;
  };
  subschemas?: {
    [name: string]: {
      displayName?: string;
      fields: {
        [name: string]: ContentSchemaField;
      };
    };
  };
};