Text Block

This is an example of how to render Text Block in Next.js. Text Block is a wrapper around the built-in block type in Sanity Studio. By default, Text Block contains all the block styles, but it can be overridden with your own style definitions. You can extend the editor with your own custom blocks, like images, buttons, etc, as well as pass the built-in group and fieldset props.

Why use a plugin?

At first glance, the Text Block plugin may seem overly simple—perhaps even unnecessary. However, it offers several advantages over building a custom solution from scratch, particularly when it comes to efficiency and consistency.

Pre-configured list previews

Text Block provides a structured and intuitive list preview within the Sanity Studio, allowing users to review their text blocks at a glance without additional setup. This helps maintain a clean and organized editorial workflow.

Text Block detects headings to use as the title. If it can't find a title, it'll fall back to the next text style. If for some reason it can't detect a text style, it'll simply display the block name.

Block Variations

Need multiple text blocks with different configurations? Instead of manually duplicating schemas and maintaining separate instances, you can quickly generate variations by calling multiple instances of the plugin and assigning each a unique name. This streamlines content structuring and ensures uniformity across different sections of a project.

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

import Overline from './components/Overline'

export default defineConfig({
  //...
  plugins: [
    textBlock(), // includes all the default block styles
    textBlock({ // defines a more restrictive text block
      name: 'headerTextBlock',
      text: {
        styles: [
          {
            title: 'Overline',
            value: 'overline',
            component: Overline,
          },
          {
            title: 'Heading 2',
            value: 'h2',
          },
        ],
        lists: [],
        annotations: [],
      },
    }),
  ],
})