Custom blocks for headings with nested other component

[tweety101]

Hi, thank you for the amazing plugin. Sanity + Gridsome is the best.

I am trying to modify the default block serializer with the following code:

serializers: {
        types: {
          block: ({ node }) => {
            switch (node.style) {
              case 'h2':
                return <h2 class="blub-h2">{node.children}</h2>
              case 'h3':
                return <h3 class="blub-h3 >{node.children}</h3>
              case 'h4':
                return <h4 class="blub-h4">{node.children}</h4>
              default: 
                return <p>{node.children}</p>
            }  
          },..........

And this does work as long as there is text inside the heading block. However, when I use a custom inline block inside a heading, it keeps returning undefined. With the default block serializer it processes the custom component inside fine. Any idea how I can make that work?

Thanks!

[matthieudou]

Hey, Seems like this issue is a bit old but I can try to respond now for those that are struggling.

To get it working fine, you just have to update the way of getting the children.

serializers: {
  types: {
    block: ({ node, children }) => {
      switch (node.style) {
      case 'h2':
        return <h2 class="blub-h2">{ children }</h2>
      case 'h3':
        return <h3 class="blub-h3">{ children }</h3>
      case 'h4':
        return <h4 class="blub-h4">{ children }</h4>
      default:
        return <p>{ children }</p>
      }
    }
  }
}

This should do the trick

[tweety101]

Sorry for my late response. This works great.

Thanks!