How to add a custom block content component type to Sanity Studio?

Absolutely! Adding custom block content components to Portable Text in Sanity Studio is pretty straightforward. Here's how to do it:

Define Your Custom Block Type

First, create your custom block as an object type in your schema. Here's an example of a YouTube embed block:

import {defineType, defineField} from 'sanity'

export const youtube = defineType({
  name: 'youtube',
  type: 'object',
  title: 'YouTube Embed',
  fields: [
    defineField({
      name: 'url',
      type: 'url',
      title: 'YouTube video URL',
    }),
  ]
})

Add It to Your Portable Text Field

Next, include your custom block in the of array of your Portable Text field in your document schema:

defineField({
  name: 'content',
  type: 'array',
  of: [
    {type: 'block'}, // Standard text blocks
    {type: 'youtube'}, // Your custom block
    {type: 'image'}, // You can add multiple custom types
  ]
})

Render It on the Frontend

When displaying the content, you'll need to provide a component for your custom block using @portabletext/react:

import {PortableText} from '@portabletext/react'

const ptComponents = {
  types: {
    youtube: ({value}) => (
      <iframe src={value.url} />
    ),
  }
}

// In your component
<PortableText components={ptComponents} value={content} />

Complete Guide

There's a great step-by-step guide for adding a YouTube embed block that walks through the entire process. The Portable Text editor configuration docs also cover this in detail.

Pro tip: If you'll be using the same custom blocks across multiple places in your app, create a centralized component with all your custom block definitions to avoid duplicating code.

Common custom block use cases include media embeds, code snippets, interactive charts, hero sections, product cards, and basically any specialized content you want to mix with your rich text!