Створення спеціального блоку Гутенберга – Частина 5: Налаштування інспектора
У попередніх кроках ми навчилися основам візуалізації компонентів і атрибутів у блоці. У цьому кроці ми зосередимося на тому, що WordPress (принаймні в коді) називає Inspector: бічній панелі в правій частині редактора. Ми торкнемося деяких нових компонентів, які має сенс розмістити на бічній панелі, і того, як з ними працювати.
Інспектор/компонент бічної панелі
Щоб вставити власні налаштування та HTML на бічну панель інспектора, ви загорнете все в компонент під назвою InspectorControls. Все, що ви помістите в цей компонент, буде виведено на бічній панелі, а не в самому блоці/редакторі. По суті, ви можете розмістити компонент і його вміст усюди в поверненій editфункції.
Окрім цього, ви обробляєте налаштування всередині бічної панелі, як вони були всередині блоку. Для кожного параметра потрібен атрибут, і ви завантажуєте та оновлюєте атрибути однаково.
Давайте спочатку швидко розглянемо, як виглядає бічна панель нашого блоку (коли наш блок активний у редакторі), на основі коду, який ми отримали на попередньому кроці.
Усі блоки за замовчуванням відображатимуть значок, назву та опис блоку, а розділ Додатково – згорнутий. У розділі «Додатково» ви знайдете текстове введення для надання класу CSS для блоку.
Додавання розділу бічної панелі та деяких налаштувань
Бічна панель поділена на секції (у коді вони називаються панелями), і для оптимального дизайну та функціональності (включно з функцією відкритого згортання) ми повинні використовувати компоненти WordPress для належного виведення панелей.
Використовуйте компонент PanelBodyдля додавання розділу (тих, які ви можете відкрити або згорнути), знайденого в wp.componentsпакеті. Компонент приймає кілька параметрів, наприклад, для заголовка та того, чи має панель бути відкритою чи закритою за замовчуванням. Ви також можете надати спеціальний клас, піктограму та прикріпити функцію події до тригера відкриття-закриття.
Тоді PanelBodyWordPress рекомендує використовувати PanelRowкомпонент, який діє як загальні контейнери на панелі, щоб забезпечити оптимізацію дизайну. Цей компонент автоматично застосовує деякі поля та гнучкі стилі рядків до вашого вмісту. Через «flex-direction: row» стиль вам слід обернути кожне налаштування в одне PanelRow. Або ви можете пропустити його взагалі та взяти на себе відповідальність за його стиль за допомогою divs тощо.
Додавання панелі та налаштувань
Давайте додамо панель бічної панелі для нашого блоку з кількома налаштуваннями всередині, щоб побачити це на практиці. Ми додамо перемикач, вибір вводу, вибір кольорів і прапорець – лише для того, щоб отримати певний досвід роботи з різними типами компонентів введення. Я залишив вміст блоку (з двома RichTexts) і saveфункцію, як і раніше.
Як завжди, ми починаємо з деструктурування компонентів і функцій, які хочемо використовувати. Усередині ми визначаємо один атрибут attributesна registerBlockType()вхід і відповідаємо типу – наприклад, елемент керування перемикачем очікує логічного значення, і оскільки значення спадного списку є рядками, цей атрибут також має бути рядком типу.
У рядку #41ми запускаємо InspectorControlsкомпонент, і все від цього моменту до рядка #80з’явиться на бічній панелі. Решта з’явиться в самому редакторі, і я не вносив там жодних змін.
Усередині ми спочатку створюємо панель із PanelBodyпараметром prop initialOpen, який має значення true, ми повідомляємо Гутенбергу, що ця панель має бути відкрита за замовчуванням. А потім від нас залежить, що додати всередину кожного PanelRow.
Для компонента ToggleControlми використовуємо ті ж властивості, що й раніше з текстовими вводами, за винятком того, що замість властивості valueми надаємо значення атрибута всередині властивості checked. Це стосується будь-яких вхідних даних, які очікують перевіреного атрибута у звичайному HTML, наприклад прапорців. Для перемикачів ви б використовували prop selected, оскільки це те, що ви також використовували б у звичайному HTML. Майте на увазі, що атрибут для цього введення має бути типу boolean.
Що стосується CheckboxControlпрапорця під час обробки однини, він працює точно так само, як ToggleControl– він повертає логічне значення незалежно від того, чи позначено його.
Генерує SelectControlвипадаюче меню та очікує можливі варіанти як масив у prop options. Кожен елемент має бути об’єктом із властивостями labelта value. Те саме стосується прапорців і перемикачів (RadioControl). За звичайних обставин ви, ймовірно, створили б варіанти як змінну поза виводом HTML.
Ви могли помітити, що він ColorPickerпрацює дещо інакше, ніж інші, оскільки це складніший компонент, а не стандартний ввід HTML. Надайте опору colorдля збереженого кольору та замість onChange(спрацьовує один раз під час натискання, але також щоразу, коли значення змінюється під час перетягування – що може призвести до багатьох пожеж) використовуйте onChangeComplete. Проп, який повертається в цій події, також є об’єктом, де нам потрібно вирішити, яку частину ми хочемо зберегти в нашому атрибуті. У цьому прикладі ми хочемо зберегти шістнадцяткове значення (без альфа/прозорості), тому всередині setAttributes()ми витягуємо hexвластивість colorповернутого об’єкта. Ось чому ми додаємо властивістьdisableAlphaщоб видалити інтерфейс користувача альфа-каналу (для керування непрозорістю), оскільки немає сенсу пропонувати це користувачеві, коли ми ніколи не зберігаємо значення непрозорості.
Кожен із компонентів має labelдоступний проп, окрім палітри кольорів. Якщо ви хочете вивести мітку або текст перед нею, вам доведеться повозитися з HTML або стилями, щоб переконатися, що все виглядає добре.
Очевидно, ви можете додати скільки завгодно панелей, просто додайте інший PanelBodyкомпонент після попереднього.
Якщо вам цікаво дізнатися більше про додавання параметрів блоку, у мене є окремі підручники для більш складних параметрів і компонентів для Inspector; Як додати вибір зображення та як додати панель налаштувань кольору.
поводженняsave
Я залишив saveфункцію, як була раніше. Це залежить від вас, і все залежить від того, які параметри керують виведенням. Ви вже знаєте, як отримати значення кожного параметра. Як приклад, припустімо, що логічний атрибут activateLasersконтролює, чи відображатиметься настроюваний елемент HTML. Якщо атрибут truediv має виводитися, інакше ні. Ви можете зробити це за допомогою традиційної перевірки if або використати вбудований ifоператор JSX &&. Дізнайтеся більше про це в посібнику React щодо умовного рендерингу.
Оскільки ми використовуємо RichTextцей вихід, він не буде видимим у редакторі, але він з’явиться у інтерфейсі.
Ви знайдете більше компонентів у wp.components сховищі Github. Більшість із цих папок мають надати вам readme із деякою документацією про те, як ним користуватися. Більшу частину цього я дізнався, переглянувши це репо, а також основні компоненти WordPress, як вони це зробили.
У наступному кроці серії ми зосередимося на тому, як керувати панеллю інструментів блоку. Ми навчимося, наприклад, керувати вирівнюванням блоку та додавати власні кнопки на панель інструментів.