Index
Edit

Block Text

Understanding block text in Sanity

It’s tempting to just pass up on the challenges presented by handling rich text as structured data. How do you represent it? How do you make it easily editable? How to you render it? Just let people write markdown.

This leaves you with a series of problems though:

  • How can you write software to transform text that isn’t structured?
  • How do you transform text to new channels?
  • How do designers control what formatting is allowed, where?

This is why we didn’t use a WYSIWYG rich text editor that stores either HTML or Markdown. They are two perfectly good syntaxes that we love and use ourselves, but they both come with limitations that would put heavy constraints on Sanity as a headless platform. We needed to save and structure content in a much more versatile way.

When building Sanity we therefore made block text a priority as it allows for familiar editorial word processing experiences at the same time as producing data structures that easily can be translated and adapted to different uses.

In Sanity you can:

  • Embed editable data as drag-and-droppable blocks in inline text. Don’t put maps in your copy, put a long/lat and a zoom that you can render as a static map on mobile and a slippy map on the desktop.
  • Add layers of content to your text, like comments, footnotes, highlighting, translations and let the consumer choose which layers they want to get out of the API.
  • Introduce your own paradigm for rich text and not be constrained by the conventions of HTML-markup or web rendered text. E.g. you can make an editor for composing responses for voice interfaces.
  • Invent uses for rich text that even we haven’t thought of yet.

We think this is a good thing™ and have enjoyed it ourselves to embed code editors in running text and add footnotes to text that actually render as real, actual footnotes on paper PDFs and build A/B testable landing page rigs.

Example: Block text with images

One of the most typical use cases is to have the possibility to add images to rich text. Let’s start with defining the schema field:

export default {
  name: 'blockContent',
  title: 'Content',
  type: 'array',
  of: [
    {
      type: 'block'
    },
    {
      type: 'image',
      fields: [
        {
          type: 'text',
          name: 'alt',
          title: 'Alternative text',
          description: `Some of your visitors cannot see images, 
            be they blind, color-blind, low-sighted; 
            alternative text is of great help for those 
            people that can rely on it to have a good idea of 
            what\'s on your page.`,
          options: {
            isHighlighted: true
          }
        }
      ]
    }
  ]
}

To the user in the Content Studio it will render like this:

Recording of how it looks when an image is added to block text

Previous: Naming ThingsNext: Previewing Block Content