Блочный редактор PXLR CMS v0.2.0

Обзор

PXLR CMS теперь включает мощный блочный редактор, который позволяет создавать контент используя различные типы блоков вместо традиционного текстового редактора.

Возможности

🧱 Типы блоков

1. Markdown - Полная поддержка Markdown синтаксиса
2. Заголовок - H1-H6 с предварительным просмотром
3. Кнопка - Настраиваемые кнопки с различными стилями
4. Изображение - Изображения с подписями
5. Отступ - Вертикальные отступы разного размера

📐 Настройки ширины

Каждый блок может быть настроен на:

• Полная ширина (fullsize) - на всю ширину контейнера
• Контейнер (container) - ограниченная ширина по центру

🎛️ Управление

• ⬆️⬇️ Перемещение блоков - кнопки вверх/вниз
• ↔️ Переключение ширины - fullsize/container
• ⚙️ Настройки блока - редактирование содержимого
• 🗑️ Удаление блока
• ➕ Добавление новых блоков

🔧 Дополнительные функции

• Развернуть - полноэкранный режим редактирования
• Автосохранение - изменения сохраняются автоматически
• Предварительный просмотр - мгновенный просмотр изменений
• Обратная совместимость - поддержка старого текстового формата

Структура данных

Блоки сохраняются в JSON формате:

{
  "blocks": [
    {
      "id": "unique-id",
      "type": "markdown",
      "content": "# Заголовок\n\nТекст параграфа",
      "width": "fullsize",
      "order": 0
    },
    {
      "id": "unique-id-2", 
      "type": "button",
      "text": "Нажми меня",
      "href": "https://example.com",
      "variant": "default",
      "size": "lg",
      "width": "container",
      "order": 1
    }
  ],
  "version": "1.0"
}

Использование

В админ панели

1. Откройте создание/редактирование поста
2. В разделе "Содержимое" вы увидите новый блочный редактор
3. Нажмите "Добавить блок" для выбора типа блока
4. Настройте блок в панели справа
5. Используйте кнопки управления для изменения порядка и настроек

На фронтенде

Блоки автоматически рендерятся компонентом BlockRenderer, который:

• Определяет формат контента (блочный JSON или обычный текст)
• Рендерит блоки с правильными стилями
• Обеспечивает обратную совместимость

Миграция

Старые посты в текстовом формате автоматически:

• Отображаются как Markdown блоки на фронтенде
• Конвертируются в блочный формат при первом редактировании

Технические детали

Компоненты

• BlockEditor - основной редактор в админ панели
• BlockRenderer - рендерер блоков на фронтенде
• blocks/* - отдельные компоненты для каждого типа блока

Типы TypeScript

type BlockType = 'markdown' | 'button' | 'heading' | 'image' | 'spacer';
type BlockWidth = 'fullsize' | 'container';

interface BaseBlock {
  id: string;
  type: BlockType;
  width: BlockWidth;
  order: number;
}

Планы развития

• 🔄 Drag & Drop с помощью библиотеки
• 📝 Больше типов блоков (галерея, цитата, код)
• 🎨 Настройки стилей блоков
• 📱 Адаптивные настройки
• 🔌 API для пользовательских блоков

---

PXLR CMS v0.2.0 - Современный блочный редактор для создания богатого контента