Шаблони блоків Гутенберга: погляд розробника

Останнє оновлення Лис 10, 2022

Зміст

Шаблони блоків та їх використання

Шаблони блоків і категорії шаблонів блоків, включені в WordPress 5.5

Скасування реєстрації шаблонів блоків

Реєстрація шаблонів блоків

Реєстрація категорій шаблонів блоків

Скасування реєстрації категорій шаблонів блоків

Висновок

Погляд на нові шаблони блоків WordPress Gutenberg очима розробника. Ми розглянемо, що це таке, для чого їх можна використовувати, а також детальніше розглянемо, як писати для них код.

Шаблони блоків та їх використання

Шаблони блоків були представлені в WordPress 5.5 (11 серпня 2020 р.). Вони є новою функцією вставника блоків, яка дає змогу легше вставляти попередньо визначену конфігурацію кількох блоків. Розробники тем або плагінів можуть визначати групу блоків, спосіб їх вкладення, їхній вміст і атрибути, а кінцеві користувачі можуть вставляти це простим клацанням миші. Ідея полягає в тому, що кінцевим користувачам більше не потрібно вручну створювати складні макети та всі власні налаштування, а також вкладати їх у відповідні контейнери для блоків, які вони часто використовують.

Коли шаблон блоку додано до редактора, блоки не знають, що їх було додано через шаблон блоку. Вони додаються як звичайні блоки, що дозволяє користувачам налаштовувати вміст і налаштування. По суті, це ярлик для додавання конфігурації кількох блоків.

Ідея хороша! Не всім кінцевим користувачам зручно створювати велику структуру з вкладених блоків у редакторі, щоб вона виглядала ідеально. Однак наразі ця функція є переважно перевагою для розробників, оскільки кінцеві користувачі не можуть створювати власні шаблони. Що стосується власних налаштованих блоків користувачів, вони повинні використовувати багаторазові блоки. Але спеціально для розробників тем шаблони блоків дозволяють їм дійсно показати кінцевим користувачам найкращу конфігурацію блоків, яка добре працює в темі.

WordPress додав нову підтримку тем для шаблонів блоків: 'core-block-patterns'. Починаючи з версії 5.5.0, Core запускатиме автоматично, add_theme_support('core-block-patterns')тому вам не потрібно робити це у своїй темі.

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

WordPress 5.5 поставляється з 9 попередньо визначеними шаблонами блоків (див. список нижче). Шаблони блоків відображаються в категоріях шаблонів (ядро додає 5 категорій). Категорії шаблонів блоків працюють як категорії публікацій; Ви можете розмістити шаблон блоку в кількох категоріях. Розробники тем і плагінів можуть реєструвати власні шаблони блоків і категорії шаблонів блоків, а також скасовувати реєстрацію тих, що є в основі. Тож давайте детальніше розглянемо, як!

Шаблони блоків і категорії шаблонів блоків, включені в WordPress 5.5

Шаблони блоків, які постачаються в WordPress 5.5, є такими (простір імен та ідентифікатор слага для кожного шаблону відображаються в круглих дужках):

Дві кнопки (‘ core/two-buttons‘)
Три кнопки (‘ core/three-buttons‘)
Дві колонки тексту (‘ core/text-two-columns‘)
Дві колонки тексту із зображеннями (‘ core/text-two-columns-with-images‘)
Три колонки тексту з кнопками (‘ core/text-three-columns-buttons‘)
Два зображення поруч (‘ core/two-images‘)
Великий колонтитул із заголовком (‘ core/large-header‘)
Великий колонтитул із заголовком і кнопкою (‘ core/large-header-button‘)
Цитата (‘ core/quote‘)

Категорії, додані в WordPress 5.5 (їхні ідентифікатори слизняків відображаються в круглих дужках):

Кнопки (‘ buttons‘)
Стовпці (‘ columns‘)
Галерея (‘ gallery‘)
Заголовки (‘ header‘ – примітка без ” в кінці)
Текст (‘ text‘)

Скасування реєстрації шаблонів блоків

Ви можете скасувати реєстрацію шаблонів блоків за допомогою функції [unregister_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern)(). Просто надайте рядок із шаблоном блоку, який потрібно видалити як параметр. Зверніться до огляду вище для шаблонів основних блоків. Запустіть цю функцію всередині функції, підключеної до initдії.

Приклад скасування реєстрації шаблонів основного блоку «Дві кнопки» і «Три кнопки»:


add_action('init', function() {
    if (!function_exists('unregister_block_pattern')) {
        return;
    }
    unregister_block_pattern('core/two-buttons');
    unregister_block_pattern('core/three-buttons');
});

Реєстрація шаблонів блоків

Реєстрація нового шаблону блоку виконується за допомогою функції [register_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern)(). Він приймає два параметри; перший – це рядок унікальної назви для вашого шаблону, включаючи простір імен. Другий — це масив налаштувань для шаблону блоку.

Порада: визначення шаблону блоку вимагає від вас надати необроблений вміст HTML для вашої конфігурації блоку. Я не рекомендую вручну вводити це, оскільки це легко спричинить конфлікти недійсних блоків. Замість цього зайдіть у редактор і налаштуйте блоки так, як ви хочете мати їх у своєму шаблоні. Потім натисніть «точкове меню» на панелі інструментів батьківського блоку та натисніть «Копіювати». Після цього ви можете повернутися до редактора коду та вставити (Ctrl+V). Це дає вам необроблений HTML для конфігурації, яку ви скопіювали. Використовуйте функції редактора коду, щоб замінити всі нові рядки на nта переконатися, що лапки належним чином виведені.

Властивості шаблону блоку такі (другий масив аргументів):

title(обов’язково): відображувана назва шаблону блоку
**content**(обов’язково): RAW HTML конфігурації блоку
description: Опис шаблону блоку. Візуально прихований
categories: масив категорій для додавання цього шаблону блоку. Якщо ви не вкажете цю властивість, блок буде розміщено в категорії шаблону блоку «Без категорії».
keywords: масив ключових слів, які можуть допомогти користувачам знайти ваш шаблон під час пошуку
viewportWidth: надати ціле число ширини шаблону блоку в інструменті вставки. Впливає лише на попередній перегляд у інструменті вставки.

Ось приклад реєстрації шаблону блоку, який складається з блоку обкладинки на всю ширину, який має колір фону, який містить вирівняний по центру блок заголовка з певним кольором тексту та вирівняний по центру абзац певного кольору тексту:

Реєстрація категорій шаблонів блоків

Розробники також можуть реєструвати власні категорії шаблонів блоків. Це робиться за допомогою функції [register_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern_category)(). Він приймає два параметри; перший рядок категорії slug, а другий масив властивостей. Наразі лише одна властивість підтримується у другому аргументі; labelдля читабельної назви категорії.

Нижче наведено приклад реєстрації спеціальної категорії шаблону блоку:

За допомогою цього ви можете додати ‘awp-patterns’ до categoriesаргументу ‘ ‘ для register_block_pattern(). Майте на увазі, що якщо категорія не має шаблонів блоків, зареєстрованих для неї, категорія не відображатиметься в інструменті вставки блоків. Вам потрібно буде додати принаймні один шаблон блоку в цю категорію, щоб він з’явився.

Скасування реєстрації категорій шаблонів блоків

Нарешті, є функція [unregister_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern_category)()скасування реєстрації категорії шаблону блоку. Укажіть категорію slug як параметр. Зверніться до огляду категорій шаблонів блоків вище, щоб дізнатися про основні категорії та їхні слаги.

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

Ось приклад скасування реєстрації категорії шаблонів основного блоку «кнопки»:


add_action('init', function() {
    if (!function_exists('unregister_block_pattern_category')) {
        return;
    }
    unregister_block_pattern_category('buttons');
});

Висновок

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

Джерело запису: awhitepixel.com