У цій частині ми розглянемо, як визначити атрибути, отримати їхні значення та оновити їх. За допомогою атрибутів ми можемо прийняти вхідні дані від редактора, зберегти їх і вивести на свій розсуд. У попередньому кроці ми розглянули компоненти WordPress, де їх знайти та як їх реалізувати. У цій публікації ми додамо підказки для підключення до атрибутів – збережених даних.
Визначення атрибутів
Атрибути додаються як об’єкти в масиві до attributesвластивості в registerBlockType(). Ключем кожного атрибута є ім’я атрибута, і ви повинні мати властивість typeяк мінімум.
Власність typeможе бути будь-якою з наведених нижче; null, boolean, object, array, number, stringабо integer.
Ви можете додатково надати властивість defaultдля визначення початкового значення вашого атрибута. Якщо ви не вкажете значення за замовчуванням, атрибут за умовчанням матиме значення null.
Ще одна властивість атрибута sourceпрацює разом із selectorвластивістю, але це вибагливі речі, які ми розглянемо докладніше нижче.
Наприклад, визначення двох атрибутів; exampleTextяк рядок і postIdsяк масив виглядатиме так:
Все, що вам потрібно зберегти для свого блоку (введення від користувача/редактора), потребує атрибута. Ви вирішуєте, як ви структуруєте свої дані, визначаючи окремі атрибути для кожного або об’єднуючи їх усі в об’єкт. Це буде лише різниця в тому, як ви отримуєте їхні дані та як ви їх оновлюєте.
Отримання значень атрибутів
Атрибути доступні як атрибути для ваших блоків editі saveфункцій. Якщо ви дотримувалися цієї серії з попереднього кроку, пам’ятайте, що ми оновили функції, щоб передати властивості як параметр.
Зазвичай вилучати атрибути з реквізитів, оскільки ви зазвичай часто звертаєтеся до них. Наприклад, виведення атрибута, викликаного exampleText, виглядатиме так:
Оновлення значень атрибутів
Щоб оновити атрибути, у нас є метод, доступний у props, який називається setAttributes(). Ця функція приймає об’єкт, до якого ви можете додати будь-який атрибут, який бажаєте оновити. Ви можете оновити лише один атрибут, кілька або всі одночасно. Якщо у вас визначено кілька атрибутів і викликається setAttributes()оновлення лише одного з них, інші не торкаються.
Якщо у вас є досвід роботи з React, ви, ймовірно, одразу помітите схожість між setAttributes()і setState(). Вони працюють точно так само, але різниця полягає в тому, що стан у React – це просто щось, що зберігається локально в цьому компоненті, а атрибути фактично зберігаються як дані поза компонентом.
Щоб оновити атрибут, ви зазвичай видаляєте функцію з пропсів і називаєте її так: Нижче ми оновлюємо exampleTextатрибут на «Привіт».
const { setAttributes } = props;
setAttributes({ exampleText: 'Hi' });Природно, ви запускаєте setAttributes()зсередини якусь дію. Звичайний приклад — це всередині onChangeprop на якомусь полі введення, яке використовується для зберігання значення exampleTextатрибута.
Обов’язково зберігайте атрибути в тому типі, який ви визначили в атрибуті. Вам не пощастить, наприклад, спробувати зберегти об’єкти в рядковий атрибут.
Давайте спробуємо це на практиці! Розпочніть npm run start, якщо ви ще цього не зробили.
Відображення атрибута у спеціальному введенні тексту та оновлення значення атрибута
На попередньому кроці ми додали деякі компоненти в edit, наприклад, введення тексту, але нічого не було збережено. Давайте додамо атрибут і один текстовий ввід для нього в наш блок. Ми обидва переконаємося, що введений текст показує поточне значення, і щоразу, коли вхідні дані змінюються, ми оновлюємо атрибут.
Додавання введення тексту та його onChangeпроп
Ми руйнуємо attributesі setAttributesвід propsтого, як будемо використовувати обидва. Потім ми використовуємо TextControlкомпонент із wp.componentsпакету WordPress. Пропускаємо до нього дві підставки; valueвстановить значення введення (як спочатку, так і під час введення) і дію щодо події введення onChange.
У valueми встановлюємо йому значення нашого атрибута; attributes.exampleText. У onChangeвипадку, якщо ми запускаємо функцію, передаючи введене значення нашого введення як параметр newtext(вхідне значення є властивістю, яку повертає компонент). У цій функції ми викликаємо setAttributes()та оновлюємо атрибут exampleTextдо того, що було введено у вхідних даних.
Це базовий React – крім того факту, що ми працюємо з атрибутами, а не станом. Якщо вищесказане вас збентежило, я рекомендую переглянути короткий посібник із React, оскільки він, ймовірно, пояснює це краще, ніж я!
Оновіть редактор і подивіться, як працює блок! У вас має бути стандартний спосіб введення тексту, який буде збережено, коли ви натиснете «Зберегти/Оновити» під час редагування допису.
Результат у інтерфейсі та в базі даних
Якщо ви переглядаєте свою публікацію у інтерфейсі, вона все одно має повторювати символ div із «:)», тому що це те, що ми все ще маємо в нашій saveфункції. Але щось сталося за кадром! Блок коментарів нашого блоку тепер містить значення нашого атрибута в JSON.
Ви не можете побачити блоки коментарів у шаблоні, який виконує звичайний the_content()виклик. Щоб переглянути блоки коментарів, у вас є два варіанти. Або перегляньте в post_contentтаблиці бази даних публікацій. Або додайте echo get_the_content()шаблон і перегляньте його в інструменті перевірки/налагодження.
Очевидно, ми також маємо доступ до атрибутів saveіз пропсів.
Відображення вхідного значення вsave
Давайте відобразимо значення атрибута всередині div у нашій saveфункції:
Примітка. Після внесення цієї зміни ви отримаєте зламаний блок у публікації, до якої ви вже додали цей блок. Це відбувається тому, що редактор стикається з виходом, відмінним від saveтого, що ми визначили зараз. Видаліть блок і додайте його знову. Введіть щось під час введення тексту, оновіть публікацію та перегляньте її у інтерфейсі.
І це, власне, суть. Ви вирішуєте, які атрибути вам потрібні, щоб зберегти бажане у вашому блоці. У editньому ви візуалізуєте способи введення користувачем, піклуючись про те, щоб поточні значення відображалися та оновлювали їх щоразу, коли вони змінювалися. І saveви витягуєте збережені атрибути та відтворюєте результат так, як вам заманеться.
У цій серії посібників ми торкнемося багатьох інших компонентів і атрибутів. Але давайте розглянемо ще один компонент у цій публікації, щоб зрозуміти, що таке властивість атрибута source.
RichText і властивість атрибутаsource
Компонент WordPress RichTextнадає текстову область без полів із підтримкою форматування тексту. Ви можете віддати перевагу використанню цього замість (потворного?) стандартного введення тексту або текстового поля. Але пам’ятайте, що з цим RichTextпотрібно поводитись дещо по-іншому, оскільки є кілька властивостей, про які вам потрібно знати, і є різниця в тому, як ми отримуємо значення в нашій saveфункції.
Додавання RichTextкомпонента
Найпростішою формою RichTextє реалізація цього, як із введенням тексту:
Ми деструктуруємо RichTextкомпонент із wp.blockEditorпакунка, але в іншому описане вище ідентично тому, що ми зробили зі стандартним введенням тексту.
Поводження saveзRichText
Однак у saveфункції вам потрібно знову використати RichTextкомпонент, щоб отримати значення атрибута. Ми викликаємо RichText.Contentі встановлюємо проп valueдля нашого атрибута:
Це виведе все, що було введено в RichTextредакторі безпосередньо без жодного HTML-коду.
Коли ви працюєте з RichTextним, ви, швидше за все, захочете керувати обгорткою HTML навколо тексту, наприклад a <p>або a <h2>, як у інтерфейсі, так і в редакторі. Для цього ми можемо використовувати проп під назвою tagName.
Компонент RichTextтакож дозволяє кілька інших реквізитів. Ви можете визначити текст-заповнювач, який відображатиметься (зникає), коли він порожній, за допомогою placeholderопори. Компонент також дозволяє контролювати параметри форматування поля (які кнопки відображаються на панелі інструментів).
RichTextзtagName
За допомогою prop tagNameви можете заздалегідь визначити, у який тег HTML буде загорнуто його вивід. Коли ви використовуєте tagName, ви повинні використовувати однакові tagNameprop і значення в обох editі save.
Скажімо, ви хочете помістити значення свого атрибута в <h2>, що в редакторі змусить будь-який вхід мати значення h2. У editви можете зробити:
І в save:
Наведене вище тепер виведе все, що було введено в RichTextобласті всередині <h2>тегу.
Використанняsource
Очевидно, що ви можете поєднати декілька форматованих текстів для блоку, наприклад, один для заголовка та один для абзацу. Тільки пам’ятайте, що кожному знадобиться свій атрибут. Наприклад:
Однак зараз ви почнете стикатися з деякими проблемами. Незважаючи на те, що ви можете виконувати форматування тексту в редакторі, нічого (або деякі) з вашого форматування не буде збережено. Коли ви переглядаєте публікацію у інтерфейсі, вона просто відображатиметься як h2і pбез будь-якого форматування (курсив, жирний шрифт, посилання). Навіть блок коментарів для вашого блоку не містить форматування. Це складна справа з RichText. Щоб вирішити це, нам потрібно попрацювати з властивістю атрибута source.
Властивість source, що дозволяє WordPress отримувати та інтерпретувати вміст безпосередньо з вмісту публікації. Якщо атрибут не sourceналаштовано, його буде збережено та витягнуто з блоку коментарів HTML.
Під час роботи з RichTextми зазвичай встановлюємо sourceзначення html, яке використовує бібліотеку WordPress для аналізу розмітки HTML. Властивість sourceпрацює разом з іншою властивістю атрибута; selectorякий визначає тег HTML, з якого він має видобувати.
Для прикладу ми встановили sourceяк htmlу нашому параграфі RichTextта встановили selectorяк p(інакше за замовчуванням буде корінь блоку блоку).
attributes: {
...
myRichText: {
type: 'string',
source: 'html',
selector: 'p'
}
},Тепер наш другий RichTextповинен успішно зберегти все своє форматування тексту. Ви також помітите, що блок коментарів тепер відображає лише myRichHeadingатрибут у JSON. Атрибут myRichTextповністю зник з блоку коментарів. Це відбувається тому, що sourceWordPress тепер аналізує вміст публікації замість блоку коментарів для значення атрибута.
Чесно кажучи, я взагалі не так багато працював з sourceатрибутом і рекомендую уникати його, якщо можна. Документація WordPress пояснює дещо більше про джерело та атрибути, які ви хочете перевірити самостійно.
У цій публікації ми ознайомилися з основами атрибутів; як їх визначити, оновити та вивести їхні значення. У наступних кроках ми розглянемо більше різних компонентів і способи додавання налаштувань за межами самого вмісту блоку; на панелі інструментів і бічній панелі редактора (називається Інспектор).