Block Builder

Über

Payload Block Builder verlagert Block-Schema-Definitionen aus dem Code in die Datenbank. Redakteure entwerfen Blocktypen über eine Drag-and-Drop-Oberfläche, veröffentlichen sie und setzen sie in beliebigen Collections ein, ohne ein Deployment oder eine Migration auszulösen. Ziel ist es, einfache redaktionelle Aufgaben aus dem Engineering-Ticket-Workflow herauszuhalten. Das Plugin registriert zwei Collections: `block-definitions` und `block-definition-versions`. Den in der Konfiguration angegebenen Target-Collections wird ein "DB Layout"-Tab hinzugefügt. Dieser Tab enthält ein Array von Block-Instanzen, die jeweils auf eine Definition und eine Version verweisen. Die Felddaten liegen als JSON vor und werden über eine eigene `BlockDataField`-Komponente gerendert. Ein `beforeChange`-Hook vergibt automatisch eine `instanceId` an jede Zeile. Zudem injiziert das Plugin einen Sidebar-Navigationslink sowie einen "Edit in Builder"-Button pro Definition. Die Builder-Oberfläche selbst läuft als Next.js-App-Route unter `/block-builder`. Die Palette umfasst 16 Feldtypen, darunter Layout-Container wie row, group, array, tabs und collapsible, sodass ein Block eigene Felder verschachteln kann. Jede Veröffentlichung erzeugt einen unveränderlichen Version-Snapshot, der schreibgeschützt eingesehen oder als neue Version wiederhergestellt werden kann. Seit Version 0.2.0 ist die Versionierung nebenläufigkeitssicher, umgesetzt über einen Unique-Index auf `versionIdString`. Ein Code-Generierungs-Endpunkt gibt TypeScript-Blockdateien aus, JSON-Import und -Export erlauben den Transfer von Schemata zwischen Projekten, und ein Live-Preview-Panel rendert das Schema als Mock-Formular inklusive der exakten JSON-Pfade, die das Frontend auslesen soll. Ein CLI-Kommando (`npx payload-block-builder init`) scaffolds die Builder-Seite, das Layout, die Styles und die Plugin-Konfiguration. Das Frontend-Rendering ist frameworkunabhängig: Die strukturierten JSON-Daten werden abgerufen und mit beliebigem Framework gerendert. Voraussetzungen sind Payload v3, Next.js ab Version 14 und React ab Version 18. Die Schemaänderung in 0.2.0 erfordert in Produktion eine Postgres-Migration, MongoDB ist nicht betroffen. Interne API-Endpunkte erwarten ab 0.2.0 den Header `X-Block-Builder: 1`.

Paketinformationen

Paketname

@nextbridgehq/payload-block-builder

Neueste Version

0.2.0

Entpackte Größe

539 kB

Lizenz

MIT

Wöchentliche Downloads

27

Zuletzt veröffentlicht

4. Sep. 2026