Skip to content
Get help on Slack

Creating a flexible content module with different blocks using arrays in Sanity.io.

22 replies
Last updated: Jul 14, 2020
Hey, how would I go about creating a an array where u chose between a number of objects... basically I want to create a "flexible content" module, with diff blocks to choose from, preferebly not using a rich text editor.
Jul 14, 2020, 7:45 PM
like a page builder?
Jul 14, 2020, 7:50 PM
yeh pretty much, not sure if u have tried but comparable to ACF flexible content for WP, or Matrix fields for Craft CMS
Jul 14, 2020, 7:50 PM
i would make each of your "options" an object component
and setup an array in your document that uses those objects
Jul 14, 2020, 7:50 PM
yeah, ok... i've done this a few times in sanity
Jul 14, 2020, 7:51 PM
something like this
Jul 14, 2020, 7:51 PM
yeh exactly
Jul 14, 2020, 7:52 PM
yeah, so thats just the 
array
type
Jul 14, 2020, 7:52 PM
So would it just be adding more obejcts to this?
Jul 14, 2020, 7:52 PM
    {
      title: 'Images',
      name: 'images',
      type: 'array',
      of: [{
        type: 'object',
        fields: [
          { name: 'image', type: 'image', title: 'Image' },
          { name: 'w', type: 'string', title: 'Width' },
          { name: 'o', type: 'string', title: 'Offset' },
          { name: 'effect', type: 'string', title: 'Effect' },
        ]
      }]
    }
Jul 14, 2020, 7:52 PM
are they all part of the "Images" object?
Jul 14, 2020, 7:53 PM
yeh well images would be "flexible content" or someting
Jul 14, 2020, 7:53 PM
so what i've done is built an object called 
page builder
Jul 14, 2020, 7:53 PM
and then just dropped in the components i want to use in it
Jul 14, 2020, 7:54 PM
here's the code for the builder
Jul 14, 2020, 7:54 PM
export default {
  title: 'Component Builder',
  name: 'pageBuilder',
  type: 'array',
  of: [
    {
      type: 'copyBlock'
    },
    {
      type: 'inlineImage'
    },
    {
      type: 'video'
    },
    {
      type: 'grid'
    },
    {
      type: 'contentGrid'
    },
    {
      type: 'accordion'
    },
    {
      type: 'mondrian'
    },
    {
      type: 'wonderfulThings'
    },
    {
      type: 'specialComponents'
    },
    {
      title: 'Custom Link',
      type: 'specialLink'
    }
  ],
}
Jul 14, 2020, 7:54 PM
and then in my document (called Page in this case) i just add the builder in
Jul 14, 2020, 7:54 PM
add it as a field, like so

{
      title: 'Page Builder',
      name: 'componentList',
      type: 'pageBuilder'
    },
Jul 14, 2020, 7:55 PM
then in studio when i choose one from teh array its pops up the appropriate input fields
Jul 14, 2020, 7:55 PM
dope, great. this is very helpful👍
Jul 14, 2020, 7:56 PM
looks like this with a few items added
Jul 14, 2020, 7:56 PM
and then you can drag/drop to re-order as needed
Jul 14, 2020, 7:56 PM
great, worked fine:) thx a lot
Jul 14, 2020, 9:04 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?