🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Previewing Portable Text

How to configure previews of Portable Text in the Studio

Sometimes you want to use the content from a block array in previews. Here's an example of how to get the first block text from a block array, concatenate the text from its spans and use as title for a preview:

{
  type: 'object',
  name: 'someTypeWithBlockArray'
  fields: [
    {
      name: 'blocks',
      type: 'array',
      of: [
        {type: 'block'}
      ]
    }
  ],
  preview: {
    select: {
      blocks: 'blocks'
    },
prepare(value) {
const block = (value.blocks || []).find(block => block._type === 'block')
return {
title: block
? block.children
.filter(child => child._type === 'span')
.map(span => span.text)
.join('')
: 'No title'
}
}
} }

Was this article helpful?