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

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

У цьому посібнику, покроковий розбір: від створення reusable-блоку до імпорту на сторонній сайт. Плюс альтернативний плагін, який спрощує процес іще дужче.

💡 Швидкий огляд:

• Створюєте блок у редакторі Гутенберга й конвертуєте в багаторазовий
• Експортуєте його як JSON-файл через інтерфейс керування блоками
• Імпортуєте JSON на цільовому сайті WordPress, блок готовий до використання
• Як альтернатива: плагін Blocks Export Import дає змогу експортувати будь-які блоки, не лише багаторазові

Що таке багаторазові блоки та навіщо вони потрібні

Багаторазовий блок у Гутенберзі — це збережений шаблон контенту, який ви створюєте один раз, а потім вставляєте в будь-який запис чи сторінку. Змінили вихідний блок, зміни підхопилися всюди, де його використано.

Типові сценарії:

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

До Гутенберга ви б зберігали такі заготовки в текстовому файлі на робочому столі й копіювали через буфер обміну. Тепер це працює на рівні ядра WordPress і переноситься між сайтами.

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

1. Створюємо багаторазовий блок

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

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

Ось як виглядає підсумковий блок після налаштування стилів і тексту:

Поки це звичайний блок. Щоб зробити його багаторазовим, натисніть на іконку «Додаткові параметри» (три крапки) на панелі блоку та виберіть «Додати до повторно використовуваних блоків»:

Задайте ім’я блоку та натисніть «Зберегти». Готово, блок з’явився в бібліотеці багаторазових блоків сайту.

2. Використовуємо багаторазовий блок у записах

Додати збережений блок до будь-якого запису чи сторінки можна за пару кліків. У редакторі Гутенберга натисніть «Додати блок» (+), перейдіть на вкладку «Багаторазові блоки» та виберіть потрібний:

Після вставлення блоку натисніть «Попередній перегляд» або «Опублікувати» і перевірте результат у фронтенді:

Блок працює в усіх типах записів, які підтримують редактор Гутенберга: пости, сторінки, кастомні типи. Один раз створили, використовуєте будь-де.

3. Експортуємо блок у JSON

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

Відкриється екран зі списком усіх багаторазових блоків сайту. Поки тут лише один, лист-подяка. Зі створенням нових блоків список поповнюватиметься:

Наведіть курсор на назву блоку, з’явиться посилання «Експортувати як JSON». Натисніть його:

Браузер завантажить файл із розширенням .json. Збережіть його у зручну папку на комп’ютері:

Усередині JSON, повна структура блоку: HTML-розмітка, стилі, атрибути, вкладені блоки. Це самодостатній файл, готовий до імпорту на будь-якому сайті WordPress з активним Гутенбергом.

4. Імпортуємо блок на інший сайт

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

На екрані блоків натисніть кнопку «Імпорт із JSON», виберіть завантажений раніше файл і натисніть «Імпорт»:

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

Із цього моменту блок можна використовувати на другому сайті так само, як і на першому. За потреби процедуру повторюють для будь-якої кількості блоків, обмежень немає.

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

Ручний метод із конвертацією в reusable підходить для більшості сценаріїв, але має обмеження: експортувати можна лише багаторазові блоки. Звичайний блок, який ви щойно зверстали, спочатку потрібно конвертувати, і тільки потім експортувати.

Плагін Blocks Export Import від команди ThemeIsle знімає це обмеження. Він додає кнопку експорту прямо в меню будь-якого блоку, без проміжної конвертації.

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

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

Потім натисніть «Вибрати файл», вкажіть JSON на комп’ютері та натисніть «Завантажити»:

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

Який метод обрати, залежить від сценарію: разове перенесення між своїми сайтами, беріть плагін — це швидше; постійна робота з бібліотекою блоків на кількох майданчиках, опановуйте нативний експорт через повторювані блоки.

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

Перегляньте короткий відеоурок, у якому показано повний цикл, від створення повторюваного блоку до імпорту на іншому сайті 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-експорт. Бібліотека блоків, доступна з будь-якого поста, з часом окупає зайвий клік на конвертацію.

Спробуйте обидва методи на тестовій зв’язці сайтів і виберіть той, який вписується у ваш робочий процес. Десять хвилин налаштування сьогодні заощаджують десятки годин за рік.