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

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

В этом руководстве мы расскажем об основах работы с блоками, о том, где найти их настройки и как вернуться к классическим шаблонам, если возникнут какие-либо проблемы. Зная, как вставлять блоки, настраивать их и управлять ими (а также когда следует вернуться к классическим шаблонам), вы сможете создать магазин, который будет работать именно так, как вам нужно.

Требования

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

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

Что такое блоки?

Блоки — это элементы контента, из которых состоит ваш сайт и магазин. Каждый элемент, который вы добавляете в публикацию или на страницу, является блоком. Блоки можно добавлять и настраивать визуально в редакторе сайта. С помощью блоков можно создавать и редактировать:

• Страницы и публикации
• Шаблоны (например, страницы с описанием отдельных товаров или страницы оформления заказа)
• Многоразовые шаблоны и макеты

Анатомия блока

У каждого блока есть параметры на панели инструментов блока и боковой панели настроек блока. Содержимое блока отображается в центре редактора. В зависимости от назначения блока параметры на панели инструментов и боковой панели настроек блока могут меняться.

Многие блоки WooCommerce используют динамический контент в соответствии с текущим контекстом (например, показывают, что у каждого покупателя есть в корзине). В редакторе сайта эти динамические блоки отображают пример контента.

Использование блоков в редакторе сайта

Добавление блоков

Существует несколько способов вставки блоков на страницы.

• В левом верхнем углу страницы вы увидите панель инструментов с квадратным значком +. При нажатии на этот значок открывается инструмент для вставки блоков. С его помощью можно искать блоки и вставлять их. Кроме того, он отображает дополнительную информацию о каждом блоке и позволяет предварительно просмотреть его.
• В поле редактора вы увидите опцию вставки блоков, а также значок +, если нажмете на блоки, которые уже есть в редакторе, сверху, между ними или снизу.

💡 Совет: чтобы быстро добавить новый блок, введите «/» и название блока, который хотите вставить. Это называется команда «Слэш».

Поиск блоков

Блоки можно искать с помощью:

• Вставка блока: Введите в поле поиска начало названия блока или ключевое слово, например «изображение» или «заголовок».
• Команда со слэшем: начните вводить начало названия блока или ключевое слово, и вам будут предложены варианты.

Удаление блоков

Если вы хотите удалить блок со страницы или из шаблона, у вас есть несколько вариантов. Чтобы удалить блок:

1. Выберите блок.
2. Нажмите на значок с тремя точками на панели инструментов блока или в списке.
3. Нажмите «Удалить».

Почему существуют эти ограничения

↑ Вернуться к началу

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

Как настроить блоки

↑ Вернуться к началу

Чтобы настроить блок, сначала выберите его. Чтобы выбрать блок, нажмите на него в области контента или воспользуйтесь представлением в виде списка, чтобы найти нужный блок и выбрать его в списке.

Вы сможете получить доступ к параметрам настройки блока в двух местах: на панели инструментов блока и в настройках блока.

Панель инструментов блока

↑ Вернуться к началу

При выборе блока панель инструментов появится над или под ним. Панель содержит основные опции для работы с этим блоком.

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

Параметры глобальной панели инструментов

↑ Вернуться к началу

Некоторые параметры отображаются на панелях инструментов большинства блоков. Они описаны ниже:

• Преобразовать: Изменить блок на аналогичный тип. Например, поменять блок корзины на классический.
• Перетаскивание: Нажмите и удерживайте значок из шести точек, чтобы переместить блок в другой раздел.
• Переместить вверх/вниз: Стрелки перемещают блок на одну позицию.
• Выравнивание: Позиционирование блока (влево, вправо, по центру, на всю ширину).
• Дополнительные параметры: Три точки открывают меню с действиями: копировать, дублировать, добавить выше/ниже, копировать/вставить стили, группировать, блокировать, создать шаблон, переименовать, переместить в…, редактировать как HTML, удалить.

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

Параметры панели инструментов для конкретного блока

↑ Вернуться к началу

У каждого блока есть собственная панель инструментов с настройками. Например, блок «Изображение» позволяет добавлять ссылки, обрезать изображение и т.д.

Выбор родительских блоков

Если блок вложен в другой блок, на панели появится дополнительная кнопка слева. Нажав её, выделение переместится к родительскому блоку.

Настройки блока

↑ Вернуться к началу

На боковой панели «Настройки блока» доступны дополнительные параметры. У каждого блока есть свои настройки, доступные на этой панели.

Если боковая панель не видна, нажмите значок настроек рядом с кнопкой Сохранить в правом верхнем углу редактора. Значок выглядит как квадрат с двумя неравными столбцами.

Заблокированные блоки

↑ Наверх

Заблокированные блоки позволяют разработчикам и администраторам ограничивать действия с конкретными блоками. Особенно полезно при создании пользовательских шаблонов.

Как работают заблокированные блоки

↑ Наверх

Блокировка в редакторе: при создании макетов вы можете заблокировать блоки, чтобы их нельзя было переместить или удалить. Если вы заблокировали блок сами, его можно разблокировать через меню Дополнительные параметры (три точки) на панели инструментов.

Блоки, заблокированные разработчиками: разработчики могут блокировать блоки на уровне шаблона для защиты макетов и контента. Например, многие шаблоны WooCommerce используют заблокированные блоки для:

• Не позволять перемещать блоки за пределы необходимого контекста.
• Сохранять порядок и положение элементов.