How to add a grid wrapper section for RichTextEditor in Sanity PageBuilder?
I totally understand the panic! This is actually a pretty common page builder pattern issue, and there's a straightforward solution.
Yes, you can absolutely create a "Grid" or "Container" section type that wraps your RichTextEditor! This is a standard pattern for page builders in Sanity.
Solution: Create a Container/Grid Section Type
Add a new section type to your page builder array that acts as a wrapper:
{
name: 'pageBuilder',
type: 'array',
of: [
// Your existing sections...
{
name: 'containerSection',
title: 'Container Section',
type: 'object',
fields: [
{
name: 'maxWidth',
title: 'Max Width',
type: 'string',
options: {
list: [
{title: 'Narrow (prose)', value: 'narrow'},
{title: 'Medium', value: 'medium'},
{title: 'Wide', value: 'wide'},
{title: 'Full Width', value: 'full'}
]
},
initialValue: 'narrow'
},
{
name: 'content',
title: 'Content',
type: 'array',
of: [
{
type: 'block' // Your rich text editor
},
// You can add other content types here too
]
}
],
preview: {
select: {
maxWidth: 'maxWidth'
},
prepare({maxWidth}) {
return {
title: `Container Section (${maxWidth || 'narrow'})`
}
}
}
},
// Your other section types...
]
}In Your Frontend
Then in your rendering code, you'd handle it like:
{section._type === 'containerSection' && (
<div className={`container max-w-${section.maxWidth}`}>
<PortableText value={section.content} />
</div>
)}Alternative: Add Max Width to Existing Rich Text Section
If you already have a rich text section type, you could also just add a maxWidth field to it:
{
name: 'richTextSection',
type: 'object',
fields: [
{
name: 'maxWidth',
type: 'string',
options: {
list: ['narrow', 'medium', 'wide', 'full']
},
initialValue: 'full'
},
{
name: 'content',
type: 'array',
of: [{type: 'block'}]
}
]
}This way, for your Privacy & Policy page, editors can select "narrow" max-width, while other pages can use "full" or whatever makes sense.
You've got this! This is just a schema change and a small rendering adjustment. Should be totally doable before Monday. Good luck! 🚀
Show original thread24 replies
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.