list-items each being rendered as individual lists, as opposed as part of the same list

[BantamTech]

Hi there,

The issue i'm having is exactly the same as this one from block-content-to-react, so I'll just quote it.

sanity-io/block-content-to-react#23

I am using block-content-to-react for some basic rich text. Somewhere in the pipeline it is turning what should be:

<ol>
   <li>Alpha<li>
   <li>Bravo<li>
   <li>Charlie<li>
</ol>

Into

<ol>
   <li>Alpha<li>
</ol>
<ol>
   <li>Bravo<li>
</ol>
<ol>
   <li>Charlie<li>
</ol>

Which is affecting the numberd list and intended spacing for the elements.

Here is what I have in sanity and what I expect:

...but here in staging it breaks what should be a list into multiple lists:

Any help would be much appreciated, thank you!

[franzwilhelm]

@BantamTech I now know why this happens! I followed this tutorial: https://developers.cloudflare.com/pages/tutorials/build-a-blog-using-nuxt-and-sanity

In the tutorial it states you should do this:

<block-content
  v-for="child in post.body"
  :key="child._id"
  :blocks="child"
/>

But in reality, this is the proper way of doing it:

<block-content :blocks="post.body" />

The reason for multiple parts is that with the v-for loop, the component parser doesn't know about the following list items, and there is no way for it to group items into one element.

Hope this is the same issue you were facing and that this issue can be closed :)