Cómo crear una sección nueva
Las secciones son los bloques visuales que los editores ensamblan para construir páginas. Agregar una sección nueva implica tres pasos: crear el archivo de definición, registrarlo en el helper compartido y añadirlo al registro central de tipos.
Paso 1 — Crear el archivo en schemas/sections/
Crea un archivo .ts en apps/studio/schemas/sections/ y define el tipo con defineType. El nombre de tipo por convención sigue el patrón section.<nombre>.
El ejemplo a continuación modela una sección de testimonios basándose en los mismos campos y patrones que usa baseSection:
// schemas/sections/testimonials.ts
import {defineArrayMember, defineField, defineType} from 'sanity'
export const testimonialsSection = defineType({
name: 'section.testimonials',
title: 'Testimonios',
type: 'object',
fields: [
defineField({
name: 'eyebrow',
title: 'Eyebrow',
type: 'string',
}),
defineField({
name: 'heading',
title: 'Título',
type: 'string',
}),
defineField({
name: 'items',
title: 'Testimonios',
type: 'array',
of: [
defineArrayMember({
type: 'object',
name: 'testimonial',
fields: [
defineField({name: 'quote', title: 'Cita', type: 'text', rows: 3}),
defineField({name: 'author', title: 'Nombre', type: 'string'}),
defineField({name: 'role', title: 'Cargo', type: 'string'}),
],
preview: {
select: {title: 'author', subtitle: 'role'},
},
}),
],
}),
],
preview: {
select: {title: 'heading'},
prepare: ({title}) => ({
title: title ?? 'Testimonios sin título',
}),
},
})Puntos clave del patrón:
type: 'object'— las secciones son siempre objetos, no documentos- El
name:es el identificador que Sanity usa para resolver el tipo; usa el prefijosection.para distinguirlos en el registro previewmejora la experiencia en el Studio mostrando un título descriptivo en el array de secciones
Paso 2 — Registrar en helpers/sections.ts
Abre schemas/helpers/sections.ts y añade el nuevo tipo al array of de sectionsField:
// schemas/helpers/sections.ts — antes
export const sectionsField = {
name: 'sections',
title: 'Secciones',
type: 'array',
of: [{type: 'baseSection'}],
}// schemas/helpers/sections.ts — después
export const sectionsField = {
name: 'sections',
title: 'Secciones',
type: 'array',
of: [
{type: 'baseSection'},
{type: 'section.testimonials'}, // ← nuevo
],
}Al estar centralizado aquí, el nuevo tipo queda disponible automáticamente en todos los documentos que usan sectionsField (page) y en los que usan sectionsField.of directamente (indexPage).
Paso 3 — Registrar en schemaTypes/index.ts
Importa el nuevo tipo y añádelo al array schemaTypes. Las secciones deben ir antes que los documentos:
// schemaTypes/index.ts
import {seoBase} from '../schemas/objects/SEOBase'
import {baseSection} from '../schemas/sections/base'
import {testimonialsSection} from '../schemas/sections/testimonials' // ← nuevo
import {pageDocument} from '../schemas/documents/plainPage'
import {indexPageDocument} from '../schemas/documents/indexPage'
export const schemaTypes = [
// Objects
seoBase,
// Sections
baseSection,
testimonialsSection, // ← nuevo
// Documents
pageDocument,
indexPageDocument,
]Verificación
Después de guardar los tres archivos, el Studio en desarrollo debería reflejar el nuevo tipo sin necesidad de reiniciar. Al abrir cualquier documento de tipo page o indexPage, el botón “Añadir ítem” en el campo de secciones mostrará la nueva opción.
Si el tipo no aparece, revisa:
- Que el
name:endefineTypecoincida exactamente con el string enhelpers/sections.ts - Que el export de JavaScript esté importado y añadido en
schemaTypes/index.ts