Przewodnik tworzenia bloków

Architektura bloków

Każdy blok Cmssy składa się z trzech warstw:

1. config.ts — definiuje schema, metadane i wymagania
2. Component.tsx — komponent React
3. block.d.ts — automatycznie generowane typy TypeScript

Gdy użytkownik dodaje Twój blok do strony, panel administracyjny renderuje formularz edycji na podstawie schema.

---

BlockProps i PlatformContext

BlockProps

interface BlockProps<T = Record<string, unknown>> {
  content: T;
  context?: PlatformContext | null;
}

PlatformContext

interface PlatformContext {
  language: string;
  isPreview?: boolean;
  isDraftMode?: boolean;
  workspace?: { id: string; name?: string };
  auth?: BlockAuthContext;
  i18n?: BlockI18nContext;
  pages?: { items: PageItem[]; total: number; hasMore: boolean };
  localizeHref?: (href: string) => string;
}

Przykład użycia

import type { PlatformContext } from "@cmssy/cli/config";

export default function MyBlock({ content, context }: {
  content: { heading: string };
  context?: PlatformContext;
}) {
  const lang = context?.language ?? "en";
  const href = context?.localizeHref?.("/about") ?? "/about";
  return (
    <section>
      <h1>{content.heading}</h1>
      <a href={href}>O nas</a>
    </section>
  );
}

---

Następne kroki

• Schema i typy pól — Wszystkie typy pól, repeatery, pola warunkowe, grupy
• Zaawansowane funkcje — Wymagania, bloki layoutu, stylowanie, SSR, GraphQL