Add option to specify container element

[jorngeorg]

Current all the blocks are wrapped in a div. It would be nice to be able to specify the containing element either as a simple string or a component. For example if you know all the blocks will be list-elements, one should be able to wrap them in anul-element.

The React package does this through the serializers.container prop.

[rdunk]

Agreed! Will look into it.

[rdunk]

Hey @jorngeorg, had a quick look at this. Is this not already possible by setting the serializers.container prop?

[jorngeorg]

Is it? I'm not sure how this is strung together but, the ContainerSerializer function returns a div:

function ContainerSerializer(props) {
    let properties = null
    const containerClass = props.className
    if (containerClass) {
      properties = {
        class: containerClass
      }
    }
    return h('div', properties, props.children)
  }

[rdunk]

That's just the default serializer used if not supplied, so you should be able to override it as normal, either with a vue component or just a string.

e.g.

export default {
  data() {
    return {
      blocks : [...], // Sanity blocks
      serializers: {
        container: 'section'
      }
    };
  }
};

<block-content
:blocks="blocks" 
:serializers="serializers"
/>

[jorngeorg]

You're right. Works perfectly. Should just update the readme then!

[rdunk]

Might look into copying a lot of the readme content from the React package as the functionality should mostly be the same (will also add support for renderContainerOnSingleChild shortly).

[rdunk]

Updated, hopefully the readme is a little bit clearer now.

[toddpadwick]

@rdunk Hi there... I can't seem to get this feature to work. has this been removed since v3 released? I am using serializer to apply custom components to custom block types. These are all wrapped in a section tag. But I also want the Generic block text to be wrapped in sections too. How do I do this?

const serializers = {
    container: 'section',
    types: {
      gallery:Gallery,
      annotatedVisual:AnnotatedVisual,
      testimonial:Testimonial,
      videos:Videos,
    },
  }