Guía de desarrollo de bloques

Anatomía de un bloque

Un bloque de Cmssy vive en tu propio repo de Next.js como una carpeta dentro de blocks/:

• block.ts — declara el bloque con defineBlock + fields (su tipo, etiqueta y esquema editable)
• src/index.tsx — el componente React que renderiza el contenido

Registra el bloque en cmssy/blocks.ts. El editor lee el esquema de cada bloque a través del puente del SDK, así que al añadir un bloque a una página se renderiza un formulario de edición a partir de tus fields.

---

Definir un bloque

import type { ComponentType } from "react";
import { defineBlock, fields } from "@cmssy/react";
import Component from "./src";

export const heroBlock = defineBlock({
  type: "hero",
  label: "Hero",
  component: Component as unknown as ComponentType<{ content: Record<string, unknown> }>,
  props: {
    heading: fields.singleLine({ label: "Heading", defaultValue: "Welcome" }),
    body: fields.richText({ label: "Body" }),
    ctaUrl: fields.link({ label: "CTA URL", defaultValue: "/signup" }),
    showCta: fields.boolean({ label: "Show CTA", defaultValue: true }),
  },
});

Tipos de campo: singleLine, multiLine, richText, numeric, date, media, link, select, multiselect, boolean, color, repeater. Consulta Esquema y tipos de campo.

---

El componente del bloque

Los bloques reciben { content, context, data }. El contenido ya está resuelto para el idioma activo, así que lee los campos directamente.

import type { CmssyBlockContext } from "@cmssy/react";

export default function Hero({ content, context }: {
  content: Record<string, unknown>;
  context?: CmssyBlockContext;
}) {
  const locale = context?.locale.current ?? "en";
  const isPreview = context?.isPreview ?? false;
  return <section><h1>{String(content.heading ?? "")}</h1></section>;
}

context lleva locale ({ current, default, enabled }) e isPreview, además de forms, y — cuando config.auth está configurado — auth ({ isAuthenticated, member }) y workspace ({ id, slug }). La UI sensible al idioma lee context.locale.enabled. Para tus propios modelos o registros, obtén datos con createCmssyClient; para obtenerlos durante el SSR añade un loader y lee su resultado desde la prop data. Consulta Funciones avanzadas y Autenticación de miembros.

---

Registrar y publicar

// cmssy/blocks.ts
import { heroBlock } from "@/blocks/hero/block";
export const blocks = [heroBlock];

Ejecuta pnpm dev, abre el editor de páginas y tu bloque aparecerá en el selector. Despliega tu app de Next.js para publicar — no hay un paso separado de build o publicación de bloques.

---

Próximos pasos

• Esquema y tipos de campo — todos los tipos de campo, repeaters, campos condicionales, grupos
• Funciones avanzadas — bloques de layout, estilos, loaders de servidor