Issue with text blocks not rendering properly in block-content-to-react
8 replies
Last updated: Feb 1, 2021
B
Hi again, I'm currently working on my blog and realized that the text blocks aren't rendering properly in block-content-to-react. For example, when I have a
Heading 1font style and a
Normalfont style on the line below, the lines both render at the same size
Jan 31, 2021, 8:38 PM
G
Hi User! As you alluded to in your following comment, the default serializer should handle the h# and p (“normal”) styles. A few things I’d check are:
• In your portable text schema, are you passing those values as
• What is the HTML that’s being output? If you’re getting
• In your portable text schema, are you passing those values as
h1and
normal? Are they within
styles[]?• Do you have a serializer file and is it possibly overriding your normal or h1 styles?
• What is the HTML that’s being output? If you’re getting
pand
h1tags as you’d expect, do you have any CSS resets that are removing the default styling on
h1elements?
Feb 1, 2021, 2:04 AM
G
On the off chance it helps, this is the start of my portableText schema in my sanity folder:
Then on the front end, my serializers file makes no reference to
export default {
name: "content",
title: "Content",
type: "array",
of: [
{
type: "block",
styles: [
{ title: "Normal", value: "normal" },
{ title: "H1", value: "h1" },
{ title: "H2", value: "h2" },
{ title: "H3", value: "h3" },
{ title: "H4", value: "h4" },
{ title: "Quote", value: "blockquote" },
],
// More stuff
},
],
}styles[](I just let it do its thing). I call it like this (with an import):
<BlockContent
className="post__body"
blocks={content}
serializers={serializers}
renderContainerOnSingleChild
/>Feb 1, 2021, 2:19 AM
B
I just checked my schema and that is present. After playing around with the readme in block-content-to-react, this solved my issue
https://github.com/sanity-io/block-content-to-react#customizing-the-default-serializer-for-block-type
https://github.com/sanity-io/block-content-to-react#customizing-the-default-serializer-for-block-type
Feb 1, 2021, 2:47 AM
B
I tested the bold, italics, strikethrough and code lines and they work without specifications
Feb 1, 2021, 2:47 AM
B
I do have custom serializers for image and code, but I don't believe that would affect the default serializers
Feb 1, 2021, 2:48 AM
B
For example,
Feb 1, 2021, 2:50 AM
B
I'm also using tailwind css in conjunction with sanity
Feb 1, 2021, 2:52 AM
B
Feb 1, 2021, 2:55 AM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.