Introducing Module Options

We're excited to announce a significant enhancement to SanityPress with the introduction of the new module-options schema object in v5.5.0. This update brings more flexibility and control to how you manage and display modules on your pages.

What's New?

The new module-options schema object introduces 2 key fields that can be assigned to any module:

hidden field

The hidden field is a new addition that gives you more control over your content management workflow. When enabled, this boolean field will:

• hide the specific module from being displayed on the page
• keep other modules visible and functioning normally
• allow you to draft and preview modules without publishing them

This feature is particularly useful when you're:

• working on new content while keeping it hidden from visitors
• testing different module configurations
• preparing content for future releases

UID Field

While the UID (unique identifier) field isn't new to SanityPress users, it's now been integrated into the module-options schema object for better organization. The UID field continues to serve as:

• an HTML id attribute equivalent
• a CSS selector target for custom styling
• an anchor point for jump links within your page

Practical Applications

The module-options schema object makes it easier to manage both visibility and targeting of your modules. For example, you can use the UID field with custom CSS modules to style specific sections of your page, or create smooth-scrolling navigation using the UIDs as anchor targets.

The hidden field is perfect for content staging—you can build and preview new modules while keeping them hidden from your live site until they're ready to be revealed.

How to configure

To start using these new features, make sure you've updated to SanityPress v5.5.0 or later. The module-options schema object will be automatically available for all modules in your content structure.

1. Add the module-options schema type to any of your module's schema:

import { defineField, defineType } from 'sanity'

export default defineType({
  name: 'my-module',
  title: 'My module',
  type: 'object',
  groups: [
    { name: 'content', default: true },
    { name: 'options' },
  ],
  fields: [
    // ...
    defineField({
      name: 'options',
      type: 'module-options',
      group: 'options',
    }),
  ],
  // ...
})

2. Add the moduleProps helper function to the root element of your module component:

import moduleProps from '@/lib/moduleProps'

export default function MyModule({
  ...props
}: Partial<{
  // ...
}> & Sanity.Module) {
  return (
    <section className="section" {...moduleProps(props)}>
      {/* ... */}
    </section>
  )
}

That's it! Now you'll see the module options in the Sanity Studio:

We're excited to see how you'll use these new features to create more dynamic and flexible content structures. As always, we welcome your feedback and suggestions for future improvements!