Next.js Conf 2024: Your app should be Live by Default – Watch Keynote

Discussion on implementing pull-quotes in PortableText fields using default rendering or custom components.

3 replies
Last updated: Aug 27, 2020
I want to support pull-quotes in a PortableText field, and the default rendering for a blockquote is sufficient for me, so I am doing the following. Is this the best way to go about this? I wasn’t able to find any documentation on reusing these default component styles.
import Blockquote from "@sanity/form-builder/lib/inputs/PortableText/Text/Blockquote"

// in a `block` type's `styles` array:
{
  title: "Pull Quote",
  value: "pullquote",
  blockEditor: {
    render: Blockquote,
  },
}
Aug 27, 2020, 4:36 PM
The built-in way would be in the
styles
array add
{title: 'Pull Quote', value: 'blockquote'}

blockquote
is a default style type so should need any custom objects to make it happen
Our default portable text styles aren’t super prominently displayed in the docs, but here’s the full list:
https://www.sanity.io/docs/configuration#configuring-styles-for-text-blocks-8997d6860827
Aug 27, 2020, 6:13 PM
The built-in way would be in the
styles
array add
{title: 'Pull Quote', value: 'blockquote'}

blockquote
is a default style type so should need any custom objects to make it happen
Our default portable text styles aren’t super prominently displayed in the docs, but here’s the full list:
https://www.sanity.io/docs/configuration#configuring-styles-for-text-blocks-8997d6860827
Aug 27, 2020, 6:13 PM
oh, i misunderstood! Yeah, what you’re doing should totally work, but I’m not sure it would be a “best practice” across the board (probably why it’s not documented, though i’m not sure about that).
If you’re only rendering one style or decorator using that style, I don’t think it’s a UX problem, but if you had both blockquote and a new decorator using the blockquote rendering in the editor, it might be confusing.

I think in your usecase, it’s probably not a big deal to do it this way. Most of the time, you’d probably want to render a custom component to differentiate for editors
Aug 27, 2020, 6:52 PM

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.

Was this answer helpful?