Issue with block content serialization and rendering in Sanity
10 replies
Last updated: Apr 15, 2021
H
Hi everyone! I’m seeing an issue with the way Sanity serializes block content to portable text. When I create a list in the block content editor in the Sanity studio, and then query that document, each node in the list is serialized as a separate block like this:
I was expecting the whole list to be serialized as a single block. Is this a bug? Should I create an issue in Github?
[
{
"body": [
{
"_key": "9b97be21300d",
"_type": "block",
"children": [
{
"_key": "16de96fa3a34",
"_type": "span",
"marks": [],
"text": "one"
}
],
"level": 1,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "34d96b74f64d",
"_type": "block",
"children": [
{
"_key": "983cb335611a",
"_type": "span",
"marks": [],
"text": "A"
}
],
"level": 2,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "b79701255e56",
"_type": "block",
"children": [
{
"_key": "be008dce52c2",
"_type": "span",
"marks": [],
"text": "two"
}
],
"level": 1,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "a39ec9b9d95c",
"_type": "block",
"children": [
{
"_key": "280596195b9d",
"_type": "span",
"marks": [],
"text": "three"
}
],
"level": 1,
"listItem": "number",
"markDefs": [],
"style": "normal"
},
{
"_key": "f3017f63b0c6",
"_type": "block",
"children": [
{
"_key": "cedba53a6969",
"_type": "span",
"marks": [],
"text": ""
}
],
"markDefs": [],
"style": "normal"
}
]
}
]Apr 13, 2021, 5:08 AM
R
In portable text a listitem is a block, rather than the list being a block. https://github.com/portabletext/portabletext
Apr 13, 2021, 6:17 AM
R
If you are interested in the inner workings of how it builds lists you can find that here https://www.github.com/sanity-io/block-content-to-hyperscript/tree/master/src%2FnestLists.js
Apr 13, 2021, 6:25 AM
H
Thank you Raffi! That makes sense. So now my issue is with the npm library “@sanity/block-content-to-react” which isn’t rendering lists correctly. Each list item is rendered as a separate list 😭
Apr 13, 2021, 8:30 PM
R
The react library is a wrapper around the hyperscript lib.
Apr 13, 2021, 8:31 PM
H
Do you mean it uses
to render hyperscript and then converts that to react?
@sanity/block-content-to-hyperscript
Apr 13, 2021, 8:35 PM
R
Basically yes. It calls the hyperscript internals with react.createelement. so renders react nodes directly.
Apr 13, 2021, 8:40 PM
R
Also if your block content listitems look good and you aren't doing any custom list serialisation. Then there is the possibility there's an issue with the lib.
Apr 13, 2021, 8:42 PM
H
My thoughts exactly. I will create an issue on https://github.com/sanity-io/block-content-to-react
Apr 13, 2021, 8:45 PM
H
FYI it wasn’t a bug in the library. This solved my problem https://github.com/sanity-io/block-content-to-react/issues/23#issuecomment-668031729
I was calling the array’s map function and passing each block to the BlockContent element instead of simply passing the whole array in.
Thanks again for your help Raffi! Much appreciated
🙂
I was calling the array’s map function and passing each block to the BlockContent element instead of simply passing the whole array in.
Thanks again for your help Raffi! Much appreciated
🙂
Apr 15, 2021, 1:48 AM
H
FYI it wasn’t a bug in the library. This solved my problem https://github.com/sanity-io/block-content-to-react/issues/23#issuecomment-668031729
I was calling the array’s map function and passing each block to the BlockContent element instead of simply passing the whole array in.
Thanks again for your help Raffi! Much appreciated
🙂
I was calling the array’s map function and passing each block to the BlockContent element instead of simply passing the whole array in.
Thanks again for your help Raffi! Much appreciated
🙂
Apr 15, 2021, 1:48 AM
Sanity– build remarkable experiences at scale
The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.