Creating a multi-site CMS on Sanity, also allow re-ordering of blocks/modules

A multi-site CMS is a system that allows various websites within a content ecosystem to share a single content source. This enables teams to manage multiple sites through one single interface, which helps them reuse content accurately and efficiently.

Think about a modern-day enterprise in which various teams might want to manage a variety of customer-facing brands. A multi-site CMS provides one administrative interface to manage all of them, handling several domains from a single source of truth. That way, teams can either offer content independently of each other or they can make one update that they then push to other sites.

While not every multi-site CMS is necessarily headless, a headless CMS makes it a lot easier to manage a multi-site ecosystem. Because a headless architecture decouples content from presentation, you can create content once and then publish it everywhere, rather than having to manually configure each site individually.

Trying to maintain a monolithic CMS in a multi-site setup can be tremendously frustrating. In a monolith, just one misconfiguration of a website can bring down all the websites on a network.

Legacy approaches to content management can lead to technical issues with the nuts and bolts of the site, like managing domain names, changing and redirecting URLs, activating plugins, and handling roles and permissions. In a composable architecture, that is less likely to happen.

Initially, the problem was on how to create a CMS which non-tech people can just jump in, and edit content, having one source of truth.

This made me research about the Sanity Structure Tool API, then we decided to create a structure which lists all the domains:

domainType.ts

import {defineField, defineType} from 'sanity'
import testimonialBlock from '../blocks/testimonialBlock'
import customBlock from '../blocks/customBlock'

export const domainType = defineType({
  name: 'domain',
  title: 'Domain',
  type: 'document',
  fieldsets: [{name: 'blockInfo', title: 'Blocks'}],
  fields: [
      ...
  ],
})

sanity.config.ts

export default defineConfig([
  {
    projectId: 'your_project_id',
    dataset: 'your_dataset',
    name: 'your_workspace',
    basePath: '/your_base_path',
    title: 'your_title',
    subtitle: 'your_subtitle',
    plugins: [
      structureTool({
        structure: (S) => {
          return S.documentTypeList('domain').title('Domains')
        },
      }),
    ],
    schema: {
      types: schemaTypes,
    },
  }
]);

Which will look like this in the UI:

After adding different domains, now we can handle them separately by their ID e.g.

https://your_url.com/production/structure/4424242-6f78-4dfb-9395-861e029a65fa

Which, when you publish, you can use this ID: 4424242–6f78–4dfb-9395–861e029a65fa to cache everything else, but publish only this article with this ID (Redis, etc).

Reordering Blocks in Sanity: Empowering the Marketing Team

When building a CMS in Sanity, flexibility is key. One common requirement is to allow non-technical users, such as a marketing team, to customize the order of content blocks on a page. In this blog post, I’ll explain how I implemented an array of reorderable blocks in Sanity, making it easy for the marketing team to structure content however they like.

Setting Up the Block Structure

Sanity provides an intuitive way to handle content as structured data. To allow for reordering, I created a blocks array field inside a domain document type. This array can contain different types of content blocks, such as testimonials and custom content sections.

Here’s the schema setup:

import { defineField, defineType } from 'sanity';
import testimonialBlock from '../blocks/testimonialBlock';
import customBlock from '../blocks/customBlock';

export const domainType = defineType({
  name: 'domain',
  title: 'Domain',
  type: 'document',
  fieldsets: [{ name: 'blockInfo', title: 'Blocks' }],
  fields: [
    defineField({
      name: 'name',
      type: 'string',
      title: 'Name',
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: 'blocks',
      type: 'array',
      title: 'Block',
      fieldset: 'blockInfo',
      description: 'Add a block',
      of: [testimonialBlock, customBlock],
    }),
  ],
});

UI preview

The view of blocks

Drag and dropping the block

How Reordering Works

Sanity’s array field comes with built-in reordering functionality. This means that within the Sanity Studio UI, users can simply drag and drop the blocks into any order they choose. Sanity automatically preserves the new sequence in the dataset, ensuring that the front-end displays the content in the desired order.

Benefits of This Approach

• No Extra Code Required: Since Sanity natively supports reordering, there’s no need for additional logic to manage order changes.
• User-Friendly: The marketing team can visually rearrange blocks without needing to edit code.
• Highly Flexible: More block types can be added over time to enhance content customization.

Conclusion

By using Sanity’s array field with custom blocks, I’ve created a dynamic and easy-to-manage content structure that puts control in the hands of the marketing team. This approach ensures flexibility, efficiency, and a great editing experience.