Власні блоки Gutenberg і ACF

Виконуємо розробку блоків Gutenberg і ACF для сайтів на WordPress: власні блоки редактора, з яких контент-менеджер збирає сторінки, і набори полів для послуг, товарів чи кейсів. Це для тих, кому бракує стандартних блоків, але не хочеться ставити конструктор сторінок.

Блок Gutenberg чи поля ACF

Це два інструменти під різні задачі.

• Блок редактора підходить для сторінок, які щоразу збираються по-різному: головна, лендинг акції, стаття. Редактор додає банер, сітку товарів чи FAQ і одразу бачить результат.
• Поля ACF підходять для однотипних сторінок: послуга, лікар, об’єкт, місто. Людина заповнює форму, а вигляд задає шаблон, тому зіпсувати верстку випадково складно.

На одному сайті зазвичай потрібне і те, і те.

Як ми це робимо

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

Блоки пишемо із серверним рендерингом: у кожного свої налаштування та окремий шаблон. Стилі й скрипти блока підключаємо лише там, де він використаний. Набір блоків оформлюємо окремим плагіном, щоб він не залежав від теми й міг переїхати на інший сайт. Якщо потрібна логіка, а не лише вигляд, — це вже плагін WordPress під замовлення.

З нашої практики

Для магазину HellStr на WooCommerce весь дизайн винесено в плагін із 22 блоків: hero, сітки й слайдери товарів, таймер акції, FAQ, біжучий рядок, збір e-mail. Головну й лендинги там збирають у редакторі без програміста.

У наборі плагінів Store Toolkit таких наборів чотири, від 8 до 22 блоків у кожному, з власною категорією в редакторі. Таймер акції зберігає кінцевий час на сервері й не скидається при редагуванні сторінки, а головна з усіма блоками в потрібному порядку створюється одним запуском з адмінки.

На сайті клініки Dent Aura задача інша: послуги, прайс і лікарі — власні типи записів, які наповнюються через поля ACF Pro.

Коли це потрібно, а коли ні

Якщо сторінок кілька й змінюються вони рідко, власні блоки зайві — вистачить стандартних. Розробка має сенс, коли контент оновлюють часто й різні люди, а сторінки мають лишатися в одному стилі. Порівняння підходів читайте в статті «Власна тема чи Elementor». Блоки ми робимо й окремо, і як частину сайту на WordPress.