Using block content with colored background in Sanity.io
8 replies
Last updated: Mar 18, 2021
L
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
R
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
L
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:
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.
{ name: "colored-section", title: "Colored section", type: "object", fields: [ { ...createBlockContentSchema(sanityBasicBlockContentPreset), name: "content", title: "Content", }, ], }
Mar 18, 2021, 2:09 PM
R
Sound like what you’d like is a wrapper of multiple blocks?
Mar 18, 2021, 2:10 PM
R
As you’d have a title block, then paragraph block.
Mar 18, 2021, 2:10 PM
R
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
R
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
L
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
L
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.