Block Builder

Визуальный плагин для Payload CMS v3: редакторы создают типы блоков через drag-and-drop без кода, схемы хранятся в базе данных.

Сообщество 8 27/нед MIT v0.2.0

Установка

pnpm add @nextbridgehq/payload-block-builder

Описание

Block Builder переносит определения схем блоков из кода в базу данных. Редакторы проектируют типы блоков через canvas с drag-and-drop, публикуют их и переиспользуют в любой коллекции без деплоя или миграции. Цель плагина, чтобы простые контентные задачи не превращались в тикеты для разработчиков. Плагин регистрирует две коллекции: `block-definitions` и `block-definition-versions`. К перечисленным в конфигурации коллекциям добавляется вкладка "DB Layout". Это массив экземпляров блоков, каждый ссылается на определение и версию, данные полей хранятся как JSON и выводятся через компонент `BlockDataField`. Хук `beforeChange` автоматически назначает `instanceId` каждой строке, а в сайдбар добавляется навигационная ссылка и кнопка "Edit in Builder" на каждом определении. Интерфейс билдера работает как route Next.js по адресу `/block-builder` и обслуживается клиентским компонентом `BuilderShell`. Палитра покрывает 16 типов полей, включая контейнеры для вложенности (row, group, array, tabs, collapsible). Каждая публикация создает неизменяемый снимок версии, который можно просмотреть в режиме только для чтения или восстановить как новую версию. Начиная с 0.2.0 нумерация версий защищена от гонок благодаря уникальному индексу на `versionIdString`. Эндпоинт генерации кода создает TypeScript-файлы блоков, импорт и экспорт JSON позволяет переносить схемы между окружениями, а встроенная панель Live Preview рендерит схему как тестовую форму с точными JSON-путями, по которым фронтенд читает данные. Первичная настройка выполняется через CLI `npx payload-block-builder init`, который создает страницу, layout, стили и конфигурацию плагина. Рендеринг на фронтенде не зависит от фреймворка: вы получаете структурированный JSON и выводите его любым способом. Для работы нужны Payload v3, Next.js 14 или новее и React 18 или новее. Изменение схемы в 0.2.0 требует миграции Postgres в продакшене (MongoDB не затронут), а внутренние эндпоинты теперь требуют заголовок `X-Block-Builder: 1`.

О пакете

Имя пакета
@nextbridgehq/payload-block-builder
Последняя версия
0.2.0
Размер
539 кБ
Лицензия
MIT
Загрузок в неделю
27
Последняя публикация
4 сент. 2026 г.