How to make a quote in a paragraph in rich text?

Developing with Prismic
,
1

I am using "gatsby-source-prismic": "^3.3.3",.

I did not see a quote in rich text but I found this instruction and I already did it.
I went back to create a post in the document using this custom type. I do not understand how this
custom type being use in a paragraph like example below.

The idea is to come across as

pleasantly persistent

Sales experts like Steli Efti recommend a maximum of six touches for completely cold prospects.

I use Gatsby. Do I have to add a JSON un a config file first so I can see a quote in rich text? Can anyone tell me how to make a quote in a paragraph in rich text? Overall setup and usage are confusing. I wish it has a text editor like what we are using here.

Thank you!

2

Can anyone from Prismic answer this question please? @Levi

4

Hi Krittiya,

You said:

But you didn't link anything, which tutorial are you following?

Thanks.

5

Sorry - this is a link How to add a quote to your page | Prismic Help Center

6

Hi Krittiya,

Thank you. OK, so you should have a Slice now that is used ONLY for quotes, that means in the front end of your website you will need to style the output of this Rich Text with CSS so that it appears as a quote.

You can then build your page with these Slices like so:
[Normal Rich Text]
[Quote Rich Text]
[Normal Rich Text]

I don't have a Gatsby example, but this is what the Quote Slice looks like in plain React:

https://github.com/prismicio/reactjs-website/blob/master/src/components/slices/Quote.js

7

Thank you!

I still do not understand how to make a quote inside a paragraph.
I attached screenshots what I have in Prismic & query.

screencapture-krit-prismic-io-masks-post-json-2021-04-07-14_57_07
screencapture-krit-prismic-io-masks-post-json-2021-04-07-14_57_071440×3409 320 KB
Screen Shot 2021-04-07 at 3.02.39 PM

8

Hi Krittiya,

This example only works when you building your whole page with Slices because you layer them on top of each other. Your current structure won't allow a quote by just adding one Slice, you need to break your entire page into Slices for this to work. Like that you can dynamically build a page.

You can read more about Slices here:

I would also recommend checking out our Gatsby Blog example which is built with Slices:

Or follow our Step By Step guide for Gatsby & Prismic:

Thanks.

9

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

11

I get the workaround of adding these as a slice but I still think quotes should be added as a format option to rich text.

To me, quoted text feels like it falls right in with mixing h1, p, and lists tags. You don't require creating different slices for each of those, why are quotes so different?

Look at just about any "rich text" editor and it has quotes: here in the forum, slack, markdown, etc.

2 Likes
12

Thanks for your feedback @wesburn. We'll add your comments as part of the feature request.