There are many cases where we want to define specific inline content depending on a user’s country, device, or journey stage. There are ways to do this with variables in PHP and other frameworks. But inline blocks in Portable Text make more possible than the usual variables!
Did you know that you can, for example, dynamically load product prices depending on a user’s location, add any special offers that may apply to them, and add an icon that links to local vendors?
Here is how you can do it!
This uses V3 but can easily be implemented in V2 by using the fields etc. in the old way to define schemas.
You might be familiar with how to add custom blocks for the Portable Text Editor by combining the type: 'block' with other object types like image.
import { defineType } from 'sanity'
export default defineType({
name: 'content',
type: 'array',
title: 'Content',
of: [
{
type: 'block'
},
{
type: 'image'
}
]
})But did you know you can also implement inline blocks by adding the of property and an array of object types to the block object field definition?
Let’s say you wanted to embed a reference to an author in running text. Then, the schema definition would look something like this:
import { defineType } from 'sanity'
export default defineType({
name: 'blockContent',
type: 'array',
of: [
{ type: 'block',
of: [
{name: 'authorReference',
type: 'reference',
to: [{type: 'author'}]
}
]
}
]
})
As you can see in the JSON below, authorReference is on the same as the rest of the text. This is very different from annotations and their output.
"content": [
{
"_key": "f6c1d654f9f4",
"_type": "block",
"children": [
{
"_key": "887fd31a6817",
"_type": "span",
"marks": [],
"text": "This is how an inline reference to an author, "
},
{
"_key": "39d95d603c1a",
"_type": "authorReference",
"_ref": "9b8382ae-69f7-4161-a0e2-e8a86b15d616"
},
{
"_key": "0db93e64f0ed",
"_type": "span",
"marks": [],
"text": ", would look like."
}
],
"markDefs": [],
"style": "normal"
}
]Now that we have the author reference embedded inline with the text we need to be able to resolve the reference so we can serialise the Portable Text output in our front-end.
In order to do so, we have to make sure, we resolve authorReference in our query:
*[_type == 'post']{
...,
// get the content array
content[]{
// if the type is block...
_type == 'block' => {
...,
// get the childrens array, and...
children[]{
...,
// if a childrens type is our author reference,...
_type == 'authorReference' => {
...,
// create a new key value pair named "authorName" with the value name value of the referenced author document
"authorName": @->.name
}
}
}
}
}Output:
...,
{
"_key": "9d95d603c1a",
"_ref": "9b8382ae-69f7-4161-a0e2-e8a86b15d616",
"_type": "authorReference",
"authorName": "Saskia Bobinska"
},
...Sanity replaces rigid content systems with a developer-first operating system. Define schemas in TypeScript, customize the editor with React, and deliver content anywhere with GROQ. Your team ships in minutes while you focus on building features, not maintaining infrastructure.
Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.
Streamline your array edit workflow by enabling smooth navigation through array items within the default edit modal. This guide walks you through building a clean, user-friendly solution for your Sanity Studio.
Discover the power of Portable Text with this essential guide. From data structure, serialisation to validation strategies, you'll learn everything you need to harness its potential.
Ever used a PTE and thought you would like it to take up less space and be focusable without activating it? Now you can!
Help you editors restore deleted documents in a dataset using a webhook and a singleton bin document type.
