Gutenberg + Woocommerce. Редактируем товары.

Первое и основное Gutenberg + Woocommerce – это возможно, вполне удобно и не сложно. Новички справятся, профи вспомнят. Теперь подробнее.

Gutenberg + Woocommerce. Зачем?

Редактор блоков Gutenber в момент своего появления вызвал неоднозначную реакцию. Сильно припозднившись, ему пришлось проталкиваться сквозь плотные ряды мастодонтов философии блочного редактирования контента сайта. Elementor и Wpbackery прочно укрепились и завоевали симпатии пользователей. Кроме них есть и множество других Divi, но мы не об этом. Несмотря на всё многообразие альтернатив, Gutenber занял своё место. Многие разработчики стали пользоваться им, да и неподготовленные пользователи стали часто делать выбор в пользу него. Согласитесь, удобно, когда не нужно делать лишних движений. Gutenber уже на борту, бесплатен и неплохо справляется с возложенными на него задачами. В целом, этих аргументов вполне достаточно.

Мы не знаем чем руководствовались разработчики, напишите в комментах, если есть догадки, но после установки Woocommerce и попытке создать товар, можно обнаружить, что редактируется он в стандартном редакторе WordPress. Это довольно странно. Если вам это тоже кажется странным, давайте включим редактор блоков в товарах.

Как включить Gutenberg в Woocommerce?

Отвечаем. Немного кода в fuction.php и всё работает!

Получается такая красота!

Как редактировать товар при помощи Gutenberg?

Да в общем-то довольно просто.
Заходим в редактирование и видим Gutenberg вместо стандартного редактора в поле описания товара. Чуда не произошло. Всю страницу товара отредактировать не удастся. Внешний вид страницы по прежнему определяется шаблоном темы. Его можно поменять несколькими способами, в зависимости от того, какую тему вы используете, но это предмет рассмотрения для другой статьи. Сейчас же сфокусируемся на том, чего можно достичь при помощи Gutenberg, если его использовать в описываемом варианте.
Знаете, уже не малого! Например, в теме Woodmart, которую мы часто используем, в одном из вариантов описание занимает левый столбец во всю высоту. Пользуясь конструктором блоков, можно сделать довольно сложный дизайн, который отлично смотрится. Любые макеты, в которых описание во всю ширину страницы, так же будут отлично смотреться. В целом очень просто и функционально.

Если тема сделана так, что макет страницы не даёт использовать редактор блоков на полную мощь, о шаблон страницы товара не долго и переделать под своё понимание о прекрасном. Обязательно напишем об этом, оставайтесь на связи!

Нам доступны все блоки, которые мы привыкли видеть при редактировании записей:

Базовые блоки текста

• Paragraph (Параграф): Для создания текстовых абзацев.
• Heading (Заголовок): Для добавления заголовков разного уровня (H1–H6).
• List (Список): Нумерованные или маркированные списки.
• Quote (Цитата): Для оформления цитат.
• Code (Код): Форматированный блок для отображения кода.
• Preformatted (Предформатированный текст): Для текста с фиксированным форматированием.
• Table (Таблица): Создание таблиц.

Мультимедиа

• Image (Изображение): Для добавления изображений.
• Gallery (Галерея): Отображение нескольких изображений в сетке.
• Video (Видео): Вставка видеофайлов.
• Audio (Аудио): Добавление аудиофайлов.
• Cover (Обложка): Изображение с текстом поверх, обычно для заголовков разделов.
• File (Файл): Добавление ссылки для скачивания файлов.

Дизайн и макет

• Spacer (Пробел): Добавление отступов между элементами.
• Separator (Разделитель): Линия для разделения контента.
• Columns (Колонки): Создание структуры из нескольких колонок.
• Group (Группа): Группировка блоков для единого оформления.
• Buttons (Кнопки): Добавление одной или нескольких кнопок

Встраиваемые элементы

• YouTube: Видео с YouTube.
• Twitter: Вставка твитов.
• Spotify: Аудио с платформы Spotify.
• Instagram: Вставка постов из Instagram.
• Facebook: Встраивание публикаций с Facebook.

Встраивание виджетов

• Shortcode: Вставка шорткодов.
• Archives: Архивы записей.
• Categories: Список категорий.
• Latest Posts: Список последних записей.
• Latest Comments: Последние комментарии.

Довольно широкое поле для творчества, не находите? Гораздо лучше, чем просто форматированный текст и картинка в стандартном редакторе.

Gutenberg + Woocommerce. Сравнение с другими конструкторами.

Серьёзное сравнение проводить нет большой необходимости. Ограничимся парой общих измышлений на тему.
Divi и Elementor сделаны очень удобно и позволяют редактировать товары в очень широком диапазоне возможностей. Wpbackery по нашему мнению немного уступает в удобстве, но при наличии аддонов тоже позволяет редактировать всё. При этом ни для кого не секрет, что любой конструктор довольно тяжеловесная штука. Пишет много лишнего кода, грузит овер-дофига стилей и скриптов. Часто можно услышать их негативную и даже пренебрежительную оценку со стороны разработчиков с опытом. Но, давайте будем честны, каждому инструменту свои задачи. Сайт на WordPress с конструктором контента – отличный инструмент для своих задач. Для многих энтузиастов незаменим как швейцарский нож. Отсюда простое умозаключение.

Простое умозаключение.

Пользоваться Gutenberg в товарах можно и даже нужно. При правильном подходе всё будет очень органично выглядеть, несмотря на то, что редактируем мы, в сущности, только описание. Зачем ставить монструозные дополнительные конструкторы, если Gutenberg + Woocommerce позволяет добиваться необходимого результата.
Попробуйте! Мы уверены, что всё получится.