Паттерны Gutenberg: собираем страницы быстрее

Если вы каждый раз заново собираете один и тот же блок «отзыв клиента» или шапку статьи из заголовка, картинки и кнопки — вы делаете лишнюю работу. Паттерны Gutenberg решают ровно это: сохраняете связку блоков один раз и вставляете её в один клик. А синхронизированные паттерны идут дальше — правите в одном месте, меняется на всём сайте. Разберёмся, какие бывают паттерны, чем они отличаются и когда какой брать, чтобы не запутаться.

Что такое паттерн и зачем он нужен

Паттерн — это готовая коллекция блоков, которую можно вставить в запись или страницу и настроить под себя. Если блок Gutenberg — это один кирпич (абзац, изображение, кнопка), то паттерн — это уже стена: заголовок + подзаголовок + две колонки + кнопка, собранные и оформленные заранее.

Практическая польза простая:

• Экономия времени. Секцию «преимущества» из трёх колонок с иконками вы собираете один раз, а потом вставляете на каждую новую страницу за секунду.
• Единый вид. Все блоки «цена» на сайте выглядят одинаково, потому что растут из одного паттерна, а не собираются заново на глаз.
• Обучение. Разбирая готовый паттерн, видишь, как опытные авторы комбинируют блоки — это быстрый способ научиться вёрстке в редакторе.

Три вида паттернов: главное отличие

Здесь чаще всего и путаются. Видов паттернов три, и различаются они одним: что происходит, когда вы правите одну копию.

Тип паттерна	Что делает правка одной копии	Когда брать
Обычный (несинхронизированный)	Ничего с другими копиями. Вставили — дальше живёт своей жизнью	Уникальные секции: разные страницы услуг, лендинги
Синхронизированный	Меняет паттерн везде, где он вставлен	Одинаковый на всём сайте блок: подписка, баннер акции, CTA
С переопределениями (overrides)	Структура и стиль — общие, а текст/картинка в помеченных блоках — свои на каждой копии	Карточки: сотрудники, тарифы, отзывы — одна форма, разное содержимое

Синхронизированный паттерн — это бывший «переиспользуемый блок»: в WordPress 6.3 их переименовали в синхронизированные паттерны, но суть та же — один источник на весь сайт. Переопределения появились позже, в WordPress 6.6, и работают поверх синхронизированного паттерна через Block Bindings API.

Как вставить готовый паттерн

1. Нажмите иконку «+» в верхней панели редактора.
2. Перейдите на вкладку «Паттерны» (или «Синхронизированные паттерны», если ищете свой сохранённый).
3. Выберите категорию из выпадающего списка или нажмите «Просмотреть» — откроется окно с крупным превью каждого паттерна.
4. Кликните по нужному паттерну — он вставится в месте курсора. Или перетащите мышью в нужную точку.

После вставки блоки внутри паттерна редактируются как любые другие: кликаете по картинке — меняете её, кликаете по тексту — правите текст.

Как создать свой паттерн

Начиная с WordPress 6.3, собственные паттерны можно создавать прямо в редакторе, без единой строки кода:

1. Выделите блок или несколько блоков, которые хотите сохранить как паттерн.
2. Нажмите меню из трёх точек (дополнительные настройки).
3. Выберите «Создать паттерн / переиспользуемый блок».
4. Введите имя паттерна — понятное, чтобы потом найти: «Блок-подписка», а не «паттерн 3».
5. Включите переключатель «Синхронизировать», если хотите, чтобы правки расходились по всему сайту. Оставьте выключенным — получите обычный паттерн-заготовку.
6. Нажмите «Создать».

Готовый паттерн теперь лежит в инсерторе: «Паттерны → Мои паттерны» или на вкладке синхронизированных (иконка в виде двух ромбов).

Как включить переопределения

Переопределения — самая недооценённая фича. Смысл: держать одинаковую карточку, но подставлять в неё свой текст на каждой странице, не ломая остальные.

Порядок такой:

1. Создайте синхронизированный паттерн — например, карточку сотрудника: фото, имя, должность.
2. Откройте паттерн на редактирование и выделите блок, который должен меняться (скажем, заголовок с именем).
3. В правой панели раскройте раздел «Дополнительно» внизу.
4. Нажмите «Включить переопределения» и задайте имя, например name.
5. Повторите для остальных изменяемых блоков (должность, фото).

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

Где брать паттерны, кроме своих

Три источника:

• Тема. Хорошая FSE-тема приносит десятки готовых паттернов — секции hero, отзывы, цены, футеры. Они появляются на вкладке «Паттерны» автоматически.
• Каталог WordPress. На wordpress.org/patterns — публичная библиотека. Нашли подходящий — жмёте «Copy», возвращаетесь в редактор и вставляете обычной командой «Вставить». Паттерн из каталога не связан с оригиналом: последующие изменения в каталоге ваш сайт не затронут.
• Контекстные паттерны. У некоторых блоков (Social Icons, Query Loop) паттерны встроены прямо в настройки блока — их предлагает сам редактор при вставке.

Где всё это управляется

Синхронизированные и обычные паттерны собраны в одном месте — в редакторе сайта:

1. Внешний вид → Редактор в админке.
2. Раздел «Паттерны». Тот же список открывает пункт «Управление паттернами» в меню редактора записей.

В меню действий каждого паттерна (три точки) доступны Переименовать, Дублировать, Экспорт в JSON и Удалить. Экспорт в JSON — удобный способ перенести паттерн на другой сайт: там его импортируют тем же меню.

Одна ловушка: внешние картинки

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

Решение — заменить заглушки своими изображениями. Если оставляете картинку из паттерна, загрузите её в свою медиатеку кнопкой «Загрузить внешнее изображение»: при публикации записи WordPress сам предложит перенести внешние картинки к вам.

Живой сценарий: блок «отзывы» на всём сайте

Покажем на конкретной задаче, как выбор типа паттерна экономит часы.

Допустим, вам нужен блок с отзывом клиента — фото, имя, текст цитаты — и он должен появляться на десятке страниц услуг. Разбираем варианты:

• Собирать заново каждый раз. Худший путь: десять раз выставляете колонки, отступы, скругление у фото. На восьмой странице забываете про отступ — и блок «поехал».
• Обычный паттерн. Собрали один раз, сохранили, вставляете за секунду. Отзывы разные — и это нормально, ведь каждая копия независима. Подходит, если содержимое отзывов всегда своё, а менять оформление задним числом не планируете.
• Синхронизированный с переопределениями. Оформление (рамка, шрифт цитаты, размер фото) — общее и синхронное: захотели сделать скругление больше — поправили в одном месте, изменилось на всех десяти страницах. А текст отзыва и имя помечены как переопределяемые — они свои на каждой странице. Это и есть правильный выбор для карточек, которых много и которые должны выглядеть одинаково.

Вывод: как только «одинаковых по форме, но разных по тексту» блоков становится больше трёх — берите синхронизированный паттерн с переопределениями. Разовую уникальную секцию оставляйте обычным паттерном.

Частые ошибки

• Всё подряд делают синхронизированным. Тогда правка одной страницы неожиданно меняет десяток других. Синхронизация — только для того, что действительно должно быть единым.
• Забывают про «Отсоединить». Нужно на одной странице отойти от общего паттерна — не ломайте синхронизацию правкой «как-нибудь», а честно отсоедините копию.
• Не именуют паттерны. «Паттерн 7» через месяц не найти. Имя — по смыслу: «CTA-подписка», «Карточка тарифа».
• Держат внешние картинки. Заглушки из каталога живут на чужом сервере и однажды пропадут. Переносите в медиатеку сразу.

Чек-лист: не наступить на грабли

• Понял, какой тип нужен: обычный (уникальные секции), синхронизированный (одинаковый везде), с переопределениями (общая форма, разный текст).
• Дал паттерну понятное имя — искать по «паттерн 5» через месяц невозможно.
• Синхронизированный меняю осознанно: правка расходится по всем страницам, где он вставлен.
• Нужно отвязать копию — жму «Отсоединить» (Detach), паттерн станет обычными блоками.
• Картинки из каталога/темы перенёс в свою медиатеку, а не оставил внешними.
• Ценные паттерны выгрузил в JSON — пригодится при переносе на другой сайт.

Коротко

Обычный паттерн — заготовка, которую вставил и забыл про оригинал. Синхронизированный — единый блок на весь сайт: правишь один раз, меняется везде. Переопределения — компромисс: форма общая, содержимое своё. Все три создаются мышкой в редакторе, а готовые берутся из темы и каталога wordpress.org/patterns. Разберётесь с типами один раз — и перестанете пересобирать одни и те же секции на каждой странице.