Визуальный редактор Gutenberg

Gutenberg для сайта подбора и сравнения тарифов интернета. Обзор возможностей и управления блочной структурой, стилями контента и медиафайлами.

Данный редактор используется при редактировании обычных страниц на сайте(подобных этой). При редактировании тарифов используется редактор WYSIWYG.

Интерфейс Gutenberg(протестировать в демо-режиме) кардинально меняет классический подход к созданию контента. Вместо работы с единым текстовым полотном, страница собирается из независимых умных модулей. Каждый элемент — будь то абзац, кнопка или видеоплеер — обладает собственным набором изолированных настроек, что превращает редактор в полноценный визуальный конструктор (пейджбилдер).

В первую очередь, Гутенберг позволяет удобно управлять текстом страницы. Добавлять блоки и использовать сложное форматирование. То есть, он включает стандартные элементы, знакомые по Ворду и подобным редакторам. Выбор форматирования текста, позволяет вставлять таблицы, картинки, списки и прочее.

1. Модульная структура и управление макетом

• Абсолютная мобильность: Любой блок можно мгновенно переместить в любую точку страницы с помощью стрелок навигации или обычного перетаскивания мышью (Drag-and-Drop).
• Многоколоночные структуры: Встроенный блок Колонки позволяет делить страницу на несколько столбцов в различных пропорциях. Для каждого столбца можно индивидуально задавать внутренние отступы и вертикальное выравнивание контента (по верхнему краю, по центру, по нижнему краю).
• Группировка и контейнеры: Блок Группа позволяет объединить несколько разных элементов (например, заголовок, текст и кнопку) в один общий контейнер, чтобы задать для них единый фоновый цвет, рамку или градиент.
• Разделители и интервалы: Специальные блоки Интервал и Разделитель позволяют визуально разграничивать контент, настраивая высоту пустых зон в пикселях без написания CSS-кода.

2. Продвинутая стилизация текста и типографика

• Индивидуальный дизайн элементов: Для каждого текстового блока можно детально настроить размер шрифта (в пикселях, em или rem), межстрочный интервал (line-height), межбуквенное расстояние и регистр символов.
• Управление цветом: Тексту и фону любого абзаца можно задать сплошной цвет или сложный градиент. Если выбранное сочетание цветов будет плохо читаться, встроенная система контроля доступности (Accessibility) сразу предупредит об этом автора.
• Буквица: Функция активации крупной первой буквы для стартового абзаца статьи включается одним переключателем в боковой панели настроек.

3. Работа с медиафайлами и сложная интеграция

• Блок «Обложка» (Cover): Позволяет создавать эффектные баннеры. Текст и кнопки накладываются поверх изображения или видеофайла. Доступны настройки фиксированного фона (эффект параллакса), масштабирования, а также наложения цветного фильтра с разной степенью прозрачности.
• Медиа и текст: Готовый двухколоночный блок, который жестко связывает изображение и текстовое описание, гарантируя, что при адаптации под мобильные устройства картинка аккуратно встанет над текстом.
• Умные галереи: Изображения внутри галереи можно кадрировать по сетке, менять местами, добавлять к ним индивидуальные ссылки и подписи, а также настраивать количество колонок для разных типов экранов.
• Автоматический oEmbed: Вставка обычной текстовой ссылки на YouTube, Vimeo, Spotify, Pinterest или другие платформы автоматически трансформирует её в адаптивный интерактивный виджет.

4. Скорость работы и горячие клавиши

• Быстрый поиск через слэш (/): Чтобы не открывать левое меню, достаточно набрать символ / на новой строке и начать вводить название блока (например, /кнопка или /image), чтобы мгновенно добавить его на страницу.
• Режим полноэкранного фокуса: Верхнюю панель инструментов и боковое меню настроек можно скрыть одной кнопкой, оставив чистый белый холст для максимальной концентрации на написании текста.
• Горячие клавиши: Полная поддержка комбинаций клавиш (например, Alt+Shift+Z для удаления блока, или Ctrl+Shift+D для его дублирования) существенно ускоряет верстку лонгридов.

⚙️ Возможности для администраторов и контроль дизайна

Gutenberg предоставляет гибкие инструменты для настройки прав контент-менеджеров, что позволяет защитить фирменный стиль сайта от случайных изменений.

Ограничение свободы редактирования и паттерны

• Фирменная палитра и шрифты: На уровне темы оформления администратор может полностью отключить стандартную палитру WordPress, оставив пользователям выбор только из строго утвержденных бренд-буком цветов.
• Блокировка шаблонов (Template Locking): При создании новых страниц можно принудительно закрепить строгую структуру блоков. Контент-менеджер сможет наполнять страницу текстом, но не сможет удалять обязательные блоки или добавлять лишние.
• Синхронизированные паттерны (бывшие многоразовые блоки): Вы можете создать глобальный блок (например, форму обратной связи или баннер акции), разместить его на сотне страниц, а при изменении текста в одном месте — он автоматически обновится по всему сайту.
• Управление стилями блоков: Возможность регистрировать кастомные стили (Block Styles) в коде темы. Пользователь сможет в один клик переключить стандартную кнопку или таблицу в альтернативный дизайнерский режим оформления.