Purple — первая официальная блочная тема для WooCommerce — доступна для раннего тестирования

В последние годы WooCommerce активно совершенствует инструменты блочного редактирования, ориентированные на владельцев магазинов и разработчиков. Единственным недостатком оставалось отсутствие официальной блочной темы, созданной специально для WooCommerce и рекомендованной компанией к использованию.

Purple — первая официальная блочная тема — доступна и готова к бета-тестированию. На данном этапе вы можете найти Purple на GitHub или ознакомиться с ней на демо-сайте. По завершении первоначального этапа тестирования и сбора отзывов тема Purple появится в каталоге тем WordPress и на торговой площадке WooCommerce Marketplace, что обеспечит возможность ее удобного автоматического обновления.

Особенности темы Purple

Purple — это стартовая тема с открытым исходным кодом для WooCommerce, созданная командой Woo. Тема включает шаблоны для большинства страниц WooCommerce, поддерживающих блоки, десять цветовых палитр и десять вариантов сочетания шрифтов, а также кастомные стили для стандартных блоков WordPress и блоков WooCommerce. Кроме того, в тему входит библиотека паттернов, ориентированная на электронную коммерцию: сетки товаров, фильтры, коллекции, призывы к действию, страницы с подробной информацией о товарах и многое другое.

Тема Purple создана для того, чтобы обеспечить современную и высокопроизводительную основу для магазинов на базе WooCommerce. В то же время, благодаря возможностям блочной кастомизации, разработчики и агентства могут менять и расширять шаблоны и стили, используя эту тему как отправную точку для создания уникального дизайна интернет-магазинов.

Год совершенствования

Если вы следили за проектом Purple в прошлом году, вы знаете о проблемах, из-за которых его реализация была приостановлена, и вам наверняка интересно, что изменилось с тех пор. Команда занималась улучшением функциональности и производительности блоков в WooCommerce, вносила вклад в развитие блочного редактора и перенимала опыт создания реальных интернет-магазинов на базе блоков. Параллельно с этим совершенствовался и сам редактор WordPress: в нем появились инструменты для адаптивного дизайна и улучшенные возможности редактирования паттернов.

Учитывая богатый функционал WordPress и WooCommerce, блочная тема намеренно делается легкой и модульной. Она не требует тех громоздких функциональных надстроек и жесткой привязки к конкретной системе, которые были характерны для старых фреймворков тем.

Сравнивая Purple с классической флагманской темой Storefront, вы можете задаться вопросом: куда же делись все те популярные расширения? При использовании Storefront часто требовались дополнительные плагины для создания эффектных баннеров с товарами (hero-секций), оформления уникальных главных страниц и галерей товаров, добавления мини-корзины или даже более сложных вариантов шапки и подвала сайта. Благодаря библиотеке блоков и блочному редактору WooCommerce все эти возможности теперь доступны в любой блочной теме, включая Purple.

Эти нововведения становятся частью ядра WooCommerce

Речь идет о масштабной работе, которую команда Purple помогла реализовать в ядре WooCommerce: внедрении более детальных настроек стилей для блоков, создании шаблонов для демонстрации каталога товаров и обеспечении простого способа единообразного применения фирменного стиля магазина на всем сайте.

Перечисленные ниже улучшения — лишь малая часть возможностей, доступных для любой блочной темы, использующей соответствующие блоки и API.

WooCommerce 11.0 сделал блочные темы более легкими и единообразными

В WooCommerce 11.0 были заложены основы для последующих улучшений:

• Контент паттернов загружается по требованию. WooCommerce регистрирует паттерны на основе пути к файлу и загружает их содержимое только тогда, когда этого требует редактор, что снижает нагрузку при обработке запросов, не требующих использования контента паттернов.
• Улучшены изображения товаров. Блок Product Image использует миниатюры большего размера и сохраняет правильное соотношение сторон при кадрировании изображений.
• Повышена надежность формирования коллекций товаров. Блок Product Collection теперь корректно сохраняет контекст при вложении в блок Query Loop, благодаря чему вложенные блоки товаров правильно отображаются в составных шаблонах и паттернах.
• Расширена поддержка глобальных стилей для различных блоков. Блок «Хлебные крошки» (Breadcrumbs) теперь поддерживает стилизацию через файл theme.json, включая использование нестандартных размеров шрифта.
• Упрощено создание наборов фильтров для товаров. В блоке «Фильтры товаров» (Product Filters) появилась опция отключения выдвижной панели фильтров, а также исправлена ​​синхронизация при использовании нескольких экземпляров фильтров.
• Улучшена доступность разметки корзины. Заголовки таблицы корзины теперь содержат соответствующие роли ARIA и атрибуты области действия (scope) для корректной работы ассистивных технологий.

В WooCommerce 11.1 расширены возможности адаптивной стилизации блоков

В WordPress 7.1 появились инструменты адаптивного дизайна для блочного редактора. WooCommerce 11.1 расширяет возможности их использования, добавляя поддержку адаптивности для ряда полезных блоков WooCommerce:

• Блок «Цена товара» (Product Price) теперь поддерживает адаптивные стили для типографики, цветов, внутренних и внешних отступов.
• Блок «Отзывы о товаре» (Product Reviews) теперь использует стандартную обертку WordPress для адаптивного дизайна, благодаря чему контент отзывов и форма отправки отзыва могут отображаться в соответствии со стилями, выбранными для конкретного вьюпорта.
• Блок «Детали товара» (Product Details) поддерживает настройку внутренних и внешних отступов, фона и границ как на уровне самого блока, так и через Global Styles.
• Блок «Галерея товаров» (Product Gallery) поддерживает пользовательские соотношения сторон и обеспечивает синхронизацию между областью крупного изображения и рядом миниатюр.

В этом релизе также реализованы первоначальные улучшения производительности процесса регистрации блоков. WooCommerce пропускает регистрацию блоков и паттернов для запросов, не требующих отрисовки блоков; согласно опубликованным данным, это ускоряет выполнение запросов Store API и REST на 30–42%. Кроме того, введена экспериментальная поддержка унифицированных ресурсов редактора блоков при редактировании сайта, что позволило сократить объем передаваемых по сети данных на 48,3%.

В WooCommerce 11.2 продолжается совершенствование блоков для создания витрины

WooCommerce 11.2 всё ещё находится в разработке, но уже включает в себя одни из самых заметных примеров переноса функционала тем непосредственно в ядро ​​системы:

• Блок «Фильтры товаров» (Product Filters) получил новый адаптивный оверлей и возможность управления sticky-позиционированием. Блок можно вывести в обычном потоке, переключить в режим оверлея на мобильных устройствах и планшетах или использовать оверлей при любом размере экрана. Это поведение работает как в редакторе, так и на фронтенде, учитывает настраиваемые адаптивные брейкпоинты в WordPress 7.1 и позволяет сохранять видимость фильтров при навигации покупателей по каталогу товаров.
• Блок «Количество товара» (Product Quantity) получил расширенные настройки стилизации. Цвет текста, цвет фона, радиус углов, а также стили границ и теней теперь можно настраивать через стили блока. Элементы управления количеством для сгруппированных товаров используют ту же модель стилизации.
• Для изображений товаров теперь можно использовать границы, заданные темой. Блок «Изображение товара» (Product Image) поддерживает стили границ, что позволяет унифицировать визуальный стиль магазина в сетках товаров и паттернах коллекций.
• Блок Chips, используемый в «Product Filters» и в «Add to Cart + Options», получил настройки типографики и радиуса углов.
• Паттерны WooCommerce стало проще находить и настраивать. Категория в меню вставки блоков переименована из «WooCommerce» в «Shop», а произвольные части шаблона (template parts) больше не имеют приоритета над частями шаблона, вызываемыми напрямую.

Это лишь малая часть недавней работы по улучшению процесса блочного редактирования; проект Purple — это долгосрочная инициатива, играющая ключевую роль в совершенствовании фундамента WooCommerce для всех пользователей.

Как протестировать тему Purple

Пожалуйста, тестируйте Purple на тестовом или локальном сайте. Используйте последние версии WordPress и WooCommerce, чтобы иметь возможность воспользоваться описанными выше инструментами адаптивной настройки.

1. Скачайте последний релиз или клонируйте репозиторий Woo Themes.
2. Установите тему из каталога purple: загрузите ZIP-архив или скопируйте ее непосредственно в директорию wp-content/themes.
3. Активируйте Purple и перейдите в раздел «Внешний вид» > «Редактор» (Appearance > Editor).
4. Проверьте главную страницу, страницы магазина, каталога товаров, отдельного товара, корзины, оформления заказа, личного кабинета и поиска.
5. Протестируйте блок фильтров товаров (Product Filters) при различных разрешениях экрана: для настольных компьютеров, планшетов и мобильных устройств. Попробуйте режимы inline (встроенный) и overlay (наложение), а также протестируйте кастомную конфигурацию `settings.viewport`.
6. Проверьте работу Product Price, Product Details, Product Reviews, Product Gallery, Product Quantity, Catalog Sorting и Mini-Cart с простыми, вариативными и сгруппированными товарами.
7. Добавьте привычные вам расширения и кастомизации дочерней темы, а затем повторите тестирование на фронтенде и в редакторе.

Purple находится на стадии бета-тестирования. Шаблоны, паттерны и стили могут меняться по мере получения результатов тестирования. Обратите внимание: при скачивании Purple напрямую с GitHub автоматические обновления работать не будут.

Поделитесь своим мнением

Пожалуйста, создайте задачу в репозитории Woo Themes, если обнаружите проблему или у вас появится предложение. Укажите версии WordPress, WooCommerce, PHP и Purple; шаблон или блок, который вы тестировали; шаги для воспроизведения проблемы, а также приложите скриншоты или запись экрана, если проблема носит визуальный характер.