Get help on Discord

How to Use the "of" property in a "block" schema type

5 replies
Last updated: Apr 2, 2020
I'm struggling to find guides/tutorials relating to the "block" schema type using the "of" property? I seem to be missing a trick. Can anyone point me in the right direction? Thanks.

https://www.sanity.io/docs/block-type#of-d0f97ffa1dd9
AI Update

I totally get the confusion here! The of property in the block schema can be a bit tricky because it's used in two different contexts, and the documentation doesn't always make this super clear.

When you define a Portable Text field, you're actually creating an array that can contain blocks and other content types. The of property at the array level defines what types can be in that array (like {type: 'block'}, {type: 'image'}, etc.).

But then the block type itself also has an of property! This is where it gets interesting. The of property on the block type defines inline objects - custom content that appears within your text paragraphs, not as separate blocks.

Here's a practical example:

defineField({
  name: 'content',
  type: 'array',
  of: [
    {
      type: 'block',
      // This 'of' defines inline objects within text
      of: [
        {
          type: 'object',
          name: 'inlineProduct',
          fields: [
            {name: 'productId', type: 'string'}
          ]
        }
      ],
      // 'marks' defines annotations (like links)
      marks: {
        annotations: [
          {
            name: 'link',
            type: 'object',
            fields: [
              {name: 'href', type: 'url'}
            ]
          }
        ]
      }
    },
    {type: 'image'} // This is a separate block, not inline
  ]
})

The key distinction:

  • Inline objects (defined in block.of) appear within text spans - think of them like inline components embedded in a paragraph
  • Annotations (defined in block.marks.annotations) are decorators on text selections - like links, highlights, or citations
  • Block-level objects (defined in the array's of) are separate content blocks that sit between paragraphs

For practical guides on working with these concepts, check out:

The inline objects feature (that of property on blocks) is less commonly documented because annotations are usually the better choice for most inline use cases. If you're trying to add something like inline links or citations, you'll want to use annotations instead!

something like this?

{
      title: "Body Copy",
      name: "bodyCopy",
      type: "array",
      of: [{ type: "block" }, { type: "inlineImage" }]
    }
to really use portable text its an 
array
type 
of
... then add your types ... in this example that is 
block
and a custom object i made called 
inlineImage
user N
Thanks for the quick response!
I'm looking at 
inline
content within 
block
type.
From the docs the 
block
type 
of
property states:"An array of inline content types that you can place in running text from the Insert menu."

What types are considered inline? I thought 
string
would be one? I can't use type 
span
for some reason.
The example in the docs has:

{
title: 'Rich text',
type: 'array',
of: [
{
type: 'block',
of: [
{type: 'footnote'}
]
}
]
}

But no explanation of 
footnote
type.
I was hoping to inject like a placeholder. For example, you want to inject the site name without the need to manually enter it.

I tried the following:

blot.js

`{
title: 'Blot',
name: 'blot',
type: 'string',
options: {
list: [
{ title: 
My Site Name
, value: 'site_name' }, ...
]}`

document.js


{
  title: 'Body Text',
  name: 'body',

type: 'array',
  of: [
    {
      type: 'block',
      of: [
        {type: 'blot'}
      ]
    }
  ]
}
ahh, i'm tracking .. i think 
blot
in this case would likely need to be another type in the array, possibly even as a 
reference
type, since that's what you're actually trying to do.. reference the type of 
blot
Thanks
user N
that worked like a charm!
I changed it to the following:


{
  type: 'block'
  of: [
     { type: 'reference', to: [{ type: 'some_document'}] }
  ]
}

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?