Як створити власні блоки Гутенберга за допомогою Advanced Custom Fields Pro

Починаючи з версії 5.8 Advanced Custom Fields (ACF) Pro, ви можете використовувати ACF для створення власних блоків Гутенберга. Все, що вам потрібно, це шаблони PHP. Завдяки цьому розробникам, які ще не мають досвіду роботи з сучасним Javascript, дуже легко створювати власні блоки для Gutenberg з будь-яким із типів полів, які пропонує ACF. Майте на увазі, що ця функція доступна лише в платній версії (Pro) Advanced Custom Fields. Він недоступний у безкоштовній версії, тому вам потрібно буде придбати ліцензію.

Якщо ви редактор WordPress або веб-майстер, який не хоче глибоко занурюватися в кодування, ця публікація точно для вас. Однак якщо ви хочете бути розробником теми або плагіна WordPress, я рекомендую зробити крок, щоб навчитися створювати власні власні блоки. Однак використання розширених настроюваних полів для створення блоків може дати гарний вступ до роботи з настроюваними блоками в Gutenberg.

Створіть блок Гутенберга за допомогою ACF

Існує три прості кроки для створення спеціального блоку Гутенберга з розширеними користувацькими полями. Перший простий і, ймовірно, знайомий; налаштування полів (параметрів), які ви хочете мати у своєму блоці. Другим кроком є ​​використання функції ACF для реєстрації блоку Гутенберга. І третій крок — написання шаблону PHP для блоку. Ви просто пишете HTML і обробляєте налаштування так само, як інакше робили б із полями ACF. І це все! (Добре, можливо, є четвертий крок: створення стилю вашого блоку. Але я не буду вдаватися в це в цій публікації).

Створіть свої налаштування / поля

Якщо ви раніше використовували Advanced Custom Fields, то, ймовірно, знаєте, як налаштувати поля. Для цього можна скористатися інтерфейсом адміністратора Advanced Custom Field. Або якщо ви хочете, щоб параметри блоку були вбудовані у ваш плагін або тему, запишіть параметри за допомогою PHP. У мене є повний довідковий пост про те, як додати налаштування ACF за допомогою PHP.

Найважливіша річ, яку вам потрібно зробити з вашою групою, це встановити місцеположення на «Блокувати». Але оскільки ми ще не зареєстрували наш блок, за замовчуванням він буде «Усі». Залиште це, збережіть свої поля та перейдемо до реєстрація нашого блоку.

Зареєструйте блок Гутенберга

У коді вашої теми functions.phpабо плагіна вам потрібно написати функцію, підключену до acf/init, і викликати її, [acf_register_block](https://www.advancedcustomfields.com/resources/acf_register_block_type/)()щоб зареєструвати блок. Оскільки ця функція є досить новою в ACF і залежить від плагіна, який потрібно активувати, я рекомендую вам загорнути свій код у перевірку if, щоб переконатися, що ваша тема чи плагін не призведуть до збою вашого WordPress.

Реєстрація блоку за допомогою ACF насправді схожа на те, як ми б зареєстрували спеціальний блок Gutenberg вручну. За допомогою ACF вам потрібно надати унікальне slugified ім’я для блокування в name. Я рекомендую використовувати зрозумілу назву, наприклад, ctaдля блоку заклику до дії або author-cardдля блоку, що показує авторів, тощо. Якщо ви трохи знайомі з Gutenberg, то, можливо, знаєте, що всі блоки повинні бути зареєстровані з простором імен, /а потім з іменем слагана. Наприклад, простір імен WordPress — це core, тому, наприклад, блок абзаців у WordPress називається core/paragraph. З ACF простір імен буде acf, тож, наприклад, наведений вище блок буде зареєстровано в Gutenberg як acf/yourblock. Якщо ви реєструєте свої поля в PHP, як ви побачите пізніше, нам потрібно пам’ятати про це.

У categoryньому ви визначаєте, до якої категорії Гутенберга ви бажаєте включити ваш блок. На даний момент можливі значення: common, formatting, layout, widgetsабо embed. Якщо ви створюєте спеціальні категорії Gutenberg, ви можете додати їх до них, якщо хочете. Що стосується iconназви будь-якої піктограми з WordPress Dashicons (мінус «dashicons-»).

Щоб повідомити ACF, як відобразити цей блок, у вас є два варіанти: або надати назву функції для ключа render_callback(як вище), або надати назву шаблону у вашій темі для ключа render_template. Отже, якщо ви бажаєте посилатися безпосередньо на шаблон, наприклад template-parts/block-yourblock.phpу своїй темі, просто зробіть це так і видаліть render_callback:

Підключіть групу полів до зареєстрованого блоку

Коли ви задоволені своїм кодом реєстрації блоку, настав час підключити ваш блок до параметрів, які ви зробили раніше. Якщо ви створили поля в admin, просто поверніться назад і виберіть свій блок у Location. І якщо ви додали групу полів за допомогою PHP, у розташуванні вкажіть значення " acf/yourblock", де yourblockзнаходиться те, що ви вказали nameвище.

Напишіть шаблон

Останнім і найцікавішим кроком є ​​написання шаблону для виведення блоку!

Розташування виводу рендеринга блоку залежить від того, що ви вирішили використати під час реєстрації блоку render_callbackабо render_template.

Якщо ви вказали назву функції, render_callbackвам потрібно визначити цю функцію в functions.phpкоді вашої теми або плагіна. Ви отримуєте чотири параметри вашої функції, як ви побачите нижче:

Перший параметр, $block, містить певну інформацію від Гутенберга. Наприклад, кожен блок Гутенберга майже завжди матиме className, який ви повинні встановити як клас на своїй крайній обгортці. $block['align']для вирівнювання також можна встановити та щось, що ви також хочете додати. Другий параметр, $content, завжди буде порожнім з ACF (це буде заповнено, якщо ви додасте вкладені блоки, але це неможливо з ACF). Логічне значення $is_previewбуде істинним, якщо ми зараз переглядаємо рендеринг блоку в режимі попереднього перегляду в редакторі Gutenberg. І, нарешті $post_id, це публікація, до якої додається цей блок.

Що стосується полів, ви отримуєте поля, як зазвичай, за допомогою get_field(). Вихід HTML повністю залежить від вас і того, як ви хочете вивести свої поля.

Якщо замість цього ви надали файл шаблону render_template, просто створіть файл у вказаному місці вашої теми. У ньому ви маєте доступ до тих самих глобальних змінних, що й у функції вище (наприклад, $block). Наприклад:

І це все. Ось як просто створювати власні блоки Гутенберга за допомогою ACF.

Висновок

Як би це було легко, покладатися на плагін, особливо платний, не є хорошим кінцевим рішенням, якщо ви хочете розробляти теми чи плагіни. Майте на увазі, що ваші блоки перестануть працювати, якщо ви перемістите код теми в інший WordPress без ACF Pro. Або там, де параметри поля не встановлено (якщо ви не вставили їх у свій код за допомогою PHP або не обов’язково експортували та імпортували). Як розробник теми (або плагіна), який розповсюджує код, ви не можете очікувати, що кожен користувач придбає власну ліцензію на ACF Pro, щоб ваша тема працювала! Але це хороше тимчасове рішення для тих, хто не може або не потребує кодування.

Якщо ви впевнені, що вам потрібно зробити крок і вивчити Javascript і Gutenberg, перегляньте мій вступ до Gutenberg post або категорію Gutenberg на цьому сайті, щоб дізнатися більше.