FAQ Block

Frequently Asked Questions

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales ut eu sem integer.

FAQ Block

Frequently Asked Questions

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales ut eu sem integer.

What blocks are currently available?

There are several blocks available in beta: Article Feed, Article Listing, FAQ Block, Text Block, Hero Block, and Carousel Block.

Can I customize the blocks?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales ut eu sem integer. Parturient montes nascetur ridiculus mus mauris vitae.

How do I use a block in my schema?

Each block is available as a schema type. You can include them in your document schemas like this: TODO

Can I create my own custom blocks?

Yes! You can extend the existing schemas or create new ones using the same structure. TODO: example

Is this production-ready?

The plugin is currently in beta. While functional, it may evolve based on feedback.

How can I provide feedback or request new features?

I’d love to hear your thoughts! You can open an issue on GitHub or DM via the Sanity Community Slack.

Will more blocks be added in the future?

That's the plan! I have a few more simple blocks I'll be shipping soon, but the goal is to refine the existing blocks first and assess demand for additional ones. If you have a request, let me know!

Block Configuration

This schema is subject to change, but, currently, the faqBlock accepts a header prop. The idea behind that decision was that you may want some introductory text above your FAQs, as in the example above. We could still achieve this without the need for a header prop on this schema by passing customFields. However, custom fields show up below the core fields for the schema. It might not be the best UX to have a header field at the bottom of the form. Hence, we have the header prop.

If you don't define a header, the schema defaults to displaying a string field for title. The idea for including a title field by default with this schema was that, at the very least, you probably want some kind of introductory section title like "Frequently Asked Questions". However, if you don't want any text whatsoever above your FAQs, and don't want a useless field hanging around, you can pass false to the title prop, which will remove the field from the schema altogether.

Here is how I've configured the above FAQ Block in my sanity.config.ts. 

import {defineConfig, defineField} from 'sanity'
import {
  textBlock,
  faqBlock,
  getPortableTextPreview,
} from '@trenda/sanity-plugin-page-blocks'

import Overline from './components/Overline'

export default defineConfig({
  //...
  plugins: [
    //...
    faqBlock({
      header: defineField({
        name: 'header',
        title: 'Header',
        type: 'headerTextBlock',
      }),
      faqs: {
        schemaType: [
          {
            type: 'faq',
          },
        ],
      },
      preview: {
        select: {
          title: 'header.text',
        },
        prepare(selection) {
          const blockTitle = 'FAQ Block'
          const preview = getPortableTextPreview(selection.title, blockTitle)
          return preview
        },
      },
    }),
    textBlock({
      name: 'headerTextBlock',
      text: {
        styles: [
          {
            title: 'Overline',
            value: 'overline',
            component: Overline,
          },
          {
            title: 'Heading 2',
            value: 'h2',
          },
        ],
      },
    }),
  ],
})