Skip to content
📦 Как экспортировать и импортировать блоки Гутенберга в WordPress

📦 Как экспортировать и импортировать блоки Гутенберга в WordPress

Вы потратили 20 минут на стильный блок с призывом к действию. Настроили цвета, отступы, подогнали текст. А через неделю на соседнем сайте снова лепите тот же блок с нуля. Знакомо?

Ручное копирование блоков между сайтами WordPress отнимает часы, которых у вас нет. Но Гутенберг давно решил эту проблему: многоразовые блоки (reusable blocks) + экспорт в JSON позволяют перенести любой блок на другой сайт за минуту. Без плагинов, без экспорта всей базы, без танцев с импортом XML.

В этом руководстве, пошаговый разбор: от создания reusable-блока до импорта на сторонний сайт. Плюс альтернативный плагин, который упрощает процесс ещё сильнее.

💡 Быстрый обзор:

  • Создаёте блок в редакторе Гутенберга и конвертируете в многоразовый
  • Экспортируете его как JSON-файл через интерфейс управления блоками
  • Импортируете JSON на целевом сайте WordPress, блок готов к использованию
  • Как альтернатива: плагин Blocks Export Import позволяет экспортировать любые блоки, не только reusable

Что такое многоразовые блоки и зачем они нужны

Многоразовый блок в Гутенберге, это сохранённый шаблон контента, который вы создаёте один раз, а затем вставляете в любую запись или страницу. Изменили исходный блок, изменения подхватились везде, где он используется.

Типичные сценарии:

  • Благодарственное письмо или подпись в конце каждой статьи
  • Баннер с акцией или формой подписки
  • Блок с контактами, юридической информацией или копирайтом
  • Слайдер изображений или галерея, повторяющаяся на нескольких страницах

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

Важный нюанс: если блок построен на базе стороннего плагина (например, блоки из Getwid или Stackable), этот же плагин должен быть установлен на целевом сайте. Иначе блок откроется с ошибкой или потеряет часть стилей.

1. Создаём многоразовый блок

Откройте редактор Гутенберга через Записи → Добавить. Нажмите иконку «Добавить блок» (+) в верхней панели и выберите нужный тип блока. В примере ниже, обычный блок абзаца:

Кнопка добавления нового блока в редакторе Гутенберга

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

Создание блока абзаца с текстом благодарности в Гутенберге

Вот как выглядит итоговый блок после настройки стилей и текста:

Готовый блок благодарственного письма с фоном и ссылками

Пока это обычный блок. Чтобы сделать его многоразовым, нажмите на иконку «Дополнительные параметры» (три точки) на панели блока и выберите «Добавить в повторно используемые блоки»:

Меню дополнительных параметров блока с опцией добавления в reusable

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

Диалог сохранения нового многоразового блока с полем имени

2. Используем многоразовый блок в записях

Добавить сохранённый блок в любую запись или страницу можно за пару кликов. В редакторе Гутенберга нажмите «Добавить блок» (+), перейдите на вкладку «Многоразовые блоки» и выберите нужный:

Вкладка многоразовых блоков в интерфейсе добавления блока Гутенберга

После вставки блока нажмите «Предварительный просмотр» или «Опубликовать», и проверьте результат во фронтенде:

Блок благодарности во фронтенде сайта на теме Twenty Twenty

Блок работает во всех типах записей, поддерживающих редактор Гутенберга: посты, страницы, кастомные типы. Один раз создали, используете где угодно.

3. Экспортируем блок в JSON

Когда блок готов и протестирован, его можно экспортировать для переноса на другой сайт. В редакторе Гутенберга нажмите иконку «Дополнительные инструменты и параметры» (три точки в верхнем правом углу) и выберите «Управление всеми повторно используемыми блоками»:

Меню дополнительных инструментов Гутенберга с пунктом управления reusable-блоками

Откроется экран со списком всех многоразовых блоков сайта. Пока здесь только один, благодарственное письмо. По мере создания новых блоков список будет пополняться:

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

Наведите курсор на название блока, появится ссылка «Экспортировать как JSON». Нажмите её:

Ссылка экспорта блока в JSON при наведении на название reusable-блока

Браузер скачает файл с расширением .json. Сохраните его в удобную папку на компьютере:

Диалог сохранения JSON-файла экспортированного блока на компьютер

Внутри JSON, полная структура блока: HTML-разметка, стили, атрибуты, вложенные блоки. Это самодостаточный файл, готовый к импорту на любом сайте WordPress с активным Гутенбергом.

4. Импортируем блок на другой сайт

На целевом сайте WordPress откройте редактор Гутенберга (Записи → Добавить). Снова нажмите «Дополнительные инструменты и параметры» и выберите «Управление всеми повторно используемыми блоками»:

Меню управления reusable-блоками на целевом сайте для импорта

На экране блоков нажмите кнопку «Импорт из JSON», выберите скачанный ранее файл и нажмите «Импорт»:

Кнопка импорта из JSON и диалог выбора файла на экране управления блоками

Готово. Импортированный блок появился в списке и сразу доступен для вставки в записи:

Успешно импортированный многоразовый блок в списке на целевом сайте

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

Альтернативный способ: плагин Blocks Export Import

Ручной метод с конвертацией в reusable подходит для большинства сценариев, но у него есть ограничение: экспортировать можно только многоразовые блоки. Обычный блок, который вы только что сверстали, сначала нужно конвертировать, и только потом экспортировать.

Плагин Blocks Export Import от команды ThemeIsle снимает это ограничение. Он добавляет кнопку экспорта прямо в меню любого блока, без промежуточной конвертации.

Установите и активируйте плагин, затем откройте редактор Гутенберга и создайте блок. В меню «Дополнительные параметры» появится новый пункт, «Export JSON»:

Пункт Export JSON в меню блока после установки плагина Blocks Export Import

На компьютер скачается JSON-файл с полной структурой блока. Для импорта на другом сайте нажмите «Добавить блок» (+), перейдите на вкладку «Виджеты» и выберите «Импортировать блоки из JSON»:

Опция импорта блоков из JSON на вкладке виджетов в Гутенберге

Затем нажмите «Выбрать файл», укажите JSON на компьютере и нажмите «Загрузить»:

Диалог загрузки JSON-файла для импорта блока через плагин

У плагинного метода есть нюанс: импортированные через него блоки не сохраняются в библиотеку reusable-блоков сайта. Они существуют только в виде JSON-файла на вашем компьютере. Ручной метод (разделы 1-4), напротив, помещает блок в базу данных WordPress, и он остаётся доступным через стандартный интерфейс управления блоками.

Какой метод выбрать, зависит от сценария: разовый перенос между своими сайтами, берите плагин, быстрее; постоянная работа с библиотекой блоков на нескольких площадках, осваивайте нативный экспорт через reusable.

Видео: экспорт и импорт блоков Гутенберга на практике

Посмотрите короткий видеоурок, в котором показан полный цикл, от создания reusable-блока до импорта на другом сайте WordPress:

⁉️🤔 Частые вопросы

Можно ли экспортировать несколько блоков одним файлом?

Да. Выделите несколько блоков в редакторе (зажмите Shift и кликните по каждому), сгруппируйте их в один через «Добавить в повторно используемые блоки», и экспортируйте полученную группу как единый JSON. Плагин Blocks Export Import также поддерживает множественный экспорт: выделите блоки и выберите Export JSON, все выделенные блоки уйдут в один файл.

Что делать, если импортированный блок отображается криво?

Три вероятные причины. Первая: на целевом сайте не установлен плагин, на блоках которого построен импортированный контент (Getwid, Stackable, Kadence Blocks и аналоги). Установите плагин и повторите импорт. Вторая: темы сайтов сильно различаются по CSS, блок может унаследовать чужие шрифты или отступы. Поправьте в настройках блока или добавьте кастомный CSS. Третья: JSON-файл повреждён при передаче, скачайте и импортируйте заново.

Как отличить обычный блок от многоразового в редакторе?

Многоразовый блок в редакторе Гутенберга выделяется фиолетовой рамкой и имеет значок повторного использования (две зацикленные стрелки) на панели инструментов. Обычный блок имеет синюю рамку без специальных иконок. При наведении на reusable-блок появляется его имя.

Сохраняются ли стили темы при экспорте блока?

Частично. В JSON попадает инлайн-разметка и атрибуты блока (цвет фона, размер текста, градиенты, всё, что задано через настройки Гутенберга). Стили, определённые в style.css активной темы, в JSON не включаются: они привязаны к теме, а не к блоку. Поэтому на другом сайте с другой темой блок может выглядеть иначе. Для критичных к дизайну блоков задавайте ключевые стили через настройки самого блока, а не через CSS темы.

Есть ли ограничение на размер экспортируемого JSON?

Формально нет, но очень крупные блоки с десятками вложенных элементов могут дать JSON в несколько мегабайт. При импорте такого файла срабатывает ограничение upload_max_filesize в PHP-конфигурации сервера (по умолчанию 2 МБ). Если JSON превышает лимит, увеличьте директиву в php.ini или разбейте блок на несколько поменьше.

Когда ручной экспорт выигрывает у плагина

Ручной метод через reusable-блоки встроен в ядро WordPress. Он не зависит от сторонних обновлений, не добавляет лишнего кода на сайт и сохраняет блоки в базу данных, вы видите их в стандартном интерфейсе управления.

Плагин Blocks Export Import выигрывает в скорости, когда нужно дёрнуть блок и сразу перенести, без сохранения в библиотеке. Но если вы системно работаете с набором типовых блоков на нескольких сайтах, осваивайте нативный reusable-экспорт. Библиотека блоков, доступная из любого поста, со временем окупает лишний клик на конвертацию.

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