Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive

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?