Closed jorngeorg closed 5 years ago
Agreed! Will look into it.
Hey @jorngeorg, had a quick look at this. Is this not already possible by setting the serializers.container
prop?
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)
}
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"
/>
You're right. Works perfectly. Should just update the readme then!
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).
Updated, hopefully the readme is a little bit clearer now.
@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,
},
}
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.