✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

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?