Skip to content
Get help on Slack

Using block content with colored background in Sanity.io

8 replies
Last updated: Mar 18, 2021
Hi! I need help modelling something with block content. The use case is that I want a section of block content to have a coloured background. My first thought was to add a new "block content" type inside the block content, but multidimensional arrays are not supported. I could add a reference, but I'm concerned about the editing experience. Any other ideas?
Mar 18, 2021, 1:16 PM
That feels more like its an excerpt / explainer as it’s a structured piece of content. Have you considered doing something like you would for a youtube embed? https://www.sanity.io/guides/portable-text-how-to-add-a-custom-youtube-embed-block
Mar 18, 2021, 2:03 PM
Yeah, I managed to do it using something like that. Instead of using type "array" directly inside of the "array", I used a type "object" in between:
{
  name: "colored-section",
  title: "Colored section",
  type: "object",
  fields: [
    {
      ...createBlockContentSchema(sanityBasicBlockContentPreset),
      name: "content",
      title: "Content",
    },
  ],
}
It's a little ugly because it's an object with only one field, but it works. The only thing is that it doesn't render as rich text, so I might have to create a custom renderer there. It would be nice if Sanity had the concept of block "wrappers", so having an element "wrap" a piece of rich text.
Mar 18, 2021, 2:09 PM
Sound like what you’d like is a wrapper of multiple blocks?
Mar 18, 2021, 2:10 PM
As you’d have a title block, then paragraph block.
Mar 18, 2021, 2:10 PM
You’d need a custom renderer for what you are doing as you’ll need to fetch the block and then render the portableText in your output.
Mar 18, 2021, 2:12 PM
I used to work on a block editor and with too many levels and customisation it starts getting complicated.
Mar 18, 2021, 2:13 PM
I used to work on a block editor and with too many levels and customisation it starts getting complicated.
Yeah, I can imagine, once you get really deep you have to do a lot of customization. However, let's not forget that Sanity is giving you this flexibility in the first place, which I love.

Sound like what you’d like is a wrapper of multiple blocks?
Yes, exactly, and as far as I can see right now I'd need a custom renderer. Too bad, but I'll have to look into that
Mar 18, 2021, 3:05 PM
Thanks User!
Mar 18, 2021, 3:05 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?