...
✅ WEB і WordPress новини, теми, плагіни. Тут ми ділимося порадами і кращими рішеннями для сайтів.

Створення спеціального блоку Гутенберга – Частина 10: Отримання дописів і компонентів вищого порядку

1

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

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

Одна частина вирішення цього питання досить проста; як запитувати публікації у editфункції вашого блоку. У нас є кілька варіантів для цього, і найкращий варіант – використовувати деякі з так званих компонентів вищого порядку з WordPress. Ви також можете використовувати методи браузера Javascript для виконання виклику AJAX до WordPress REST API за допомогою наприклад [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)або axios. WordPress фактично надає власну версію fetch: apiFetch().

Інша частина вирішення цього питання трохи залежить від вас; як представити список або вибір у нашому блоці. Як ви збираєтеся представити список публікацій на вибір? У списку вибору прапорців або перемикачів? Або ви хочете запропонувати можливість пошуку та, таким чином, запровадити рішення для автозаповнення чи фільтрування? Дозволити вибирати кілька публікацій чи лише одну? Зазвичай ви можете вирішити це за допомогою різних компонентів WordPress, але вам потрібно вирішити, яке рішення ви хочете застосувати.

Давайте спершу дізнаємося трохи про компоненти вищого порядку та модуль даних WordPress, перш ніж ми подивимося, як ми можемо виконувати запити публікацій у нашому блоці.

Модуль основних даних WordPress і компоненти вищого порядку

Під час роботи з React вам часто потрібно буде передавати стан до дочірніх компонентів або вище до загального батьківського компонента, щоб усі інші дочірні компоненти мали до них доступ. Рішення для вирішення проблеми централізації стану програми – це використання Redux. За допомогою Redux ви можете створювати сховища – об’єкти, що зберігають стан і інформацію програми.

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

Ось огляд доступних магазинів у модулі даних WordPress (можливо, з часом зміниться). Усі магазини WordPress містяться в модулі Core Data. Наприклад, є сховища, що містять дані редактора (core/editor), сповіщення (core/notices), дані блоку (core/blocks), інформацію про вікно перегляду (core/viewport) і, останнє, але не менш важливе, саме основне сховище – core.

Щоб отримати доступ до даних із магазинів, вам знадобляться селектори. WordPress має селектор у wp.dataпакеті; [select](https://developer.wordpress.org/block-editor/packages/packages-data/#select)(). Ви також можете маніпулювати магазинами за допомогою dispatch, але це не розглядається в цій серії посібників. Насправді ви можете легко спробувати селектор самостійно, щоб побачити, що доступно в магазинах WordPress.

Випробування селектора

Відкрийте редактор Gutenberg у Chrome і відкрийте інструмент налагодження консолі. Введіть:

wp.data.select('core')

І натисніть Enter. Ви повинні отримати об’єкт як відповідь з усіма селекторами (функціями), які ви можете використовувати. Як приклади ви знайдете такі функції, як getMedia, getTaxonomy, getAuthorsтощо. Той, який ми будемо використовувати для запиту публікацій, також є, але не має інтуїтивно зрозумілої назви; це називається getEntityRecords. На даний момент деякі з цих функцій задокументовані, але більшість, на жаль, ні.

Також спробуйте інші магазини core, наприклад:

wp.data.select('core/editor').getBlocks()

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

Щоб використовувати селектори та мати доступ до сховищ, нам потрібно використовувати їх у компонентах вищого порядку. Компоненти вищого порядку — це просто шаблон виконання чогось у React. Ми передаємо компонент функції (або компоненту), яка може додати деякі властивості, а потім повертаємо новий компонент.

Всередині модуля даних WordPress ми знаходимо [withSelect](https://developer.wordpress.org/block-editor/packages/packages-data/#withSelect); компонент вищого порядку, який можна використовувати для введення пропів за допомогою зареєстрованих селекторів. Іншими словами; всередині withSelectми маємо доступ до селектора select()і можемо використовувати його для виконання викликів. Результати селектора будуть атрибутами для компонента, якому ми передаємо withSelect. Якщо вам потрібно об’єднати кілька компонентів вищого порядку, модуль даних WordPress пропонує цю composeфункцію, але це виходить за межі цього посібника. Ми будемо використовувати лише один компонент вищого порядку; withSelect.

Це було багато теорії, тому давайте почнемо дивитися на код і практичні приклади.

Отримання дописів за допомогою withSelect, select і getEntityRecords

Підсумовуючи вищесказане, нам потрібно налаштувати компонент вищого порядку withSelectдля нашого блоку. Усередині цього ми можемо використовувати селектори для доступу до магазинів WordPress, які будуть пропами для компонента, якому ми передаємо withSelect. Ми будемо використовувати coreсховище та селектор getEntityRecordsдля запиту публікацій.

На getEntityRecordsжаль, функція на даний момент не дуже задокументована. Але я дізнався, що ми можемо передати postTypeяк перший параметр (тип сутності), а потім тип публікації як другий параметр (наприклад, ‘ post‘ або ‘ page‘). Третій параметр необов’язковий і може бути об’єктом з аргументами запиту. Третій параметр ми розглянемо пізніше.

Якщо ви дотримувалися цієї серії посібників із попередньої частини, у вас буде спеціальний блок, який приймає введений вручну ідентифікатор публікації під час введення тексту. Блок використовує PHP для динамічного відтворення публікації у інтерфейсі (і в режимі попереднього перегляду). Давайте вилучимо вимогу ручного введення ідентифікатора публікації та замінимо її чимось більш інтуїтивно зрозумілим. Як згадувалося раніше, ви повинні вирішити для себе, як представити список публікацій і найкращий спосіб дозволити користувачеві вибрати публікацію. Щоб було просто, ми додамо на вибір усі заголовки публікацій.

КодуванняwithSelect

Давайте почнемо це кодувати. Спочатку нам потрібно деструктурувати те, що нам потрібно, з пакету даних;

const { withSelect, select } = wp.data;

Потім ми використовуємо функцію withSelectнашого блоку editта передаємо наш компонент редагування; FirstBlockEdit. Всередині withSelectми деструктуруємо selectяк параметр і використовуємо селектор select()для запиту публікацій за допомогою getEntityRecords. Ми повертаємо об’єкт з однією властивістю, яку ми викликаємо posts, яка містить результат select()виклику.

З кодом над нашим компонентом FirstBlockEditтепер буде новий проп; posts. Все, що ми повертаємо всередині withSelectкомпонента вищого порядку, буде доступним як реквізити для компонента, який ми передаємо (у круглих дужках у самому кінці).

Обробка дописів із селектора

Тепер ми можемо перейти до нашого компонента FirstBlockEditта поглянути на новий props.posts. Оскільки наш компонент є компонентом на основі класу, нам потрібно звертатися до props за допомогою this. Давайте консольно виведемо це всередині render()функції в FirstBlockEdit:

render() { const { attributes, setAttributes } = this.props; console.log(this.props.posts); ... }

Слідкуйте за налагоджувачем консолі. Ви можете помітити, що це буде зареєстровано двічі; спочатку null, а потім пізніше він реєструє масив дописів. Це пояснюється тим, що запити до публікацій виконуються асинхронно. Наш компонент спочатку відображається перед відповіддю, час якого props.postsстановить null. Як тільки ми отримуємо відповідь, наш компонент повторно рендериться із заповненим атрибутом. Завжди пам’ятайте про те, що у вашому коді потрібно пристосуватися до цього невеликого періоду часу без даних.

Додавання вибору для відображення публікацій

Готуймося заповнювати вибране повідомленнями, що повертаються, і для цього ми використаємо компонент WordPress SelectControl. Компонент SelectControlприймає масив варіантів, де кожен вибір є об’єктом із властивостями valueта label.

Якщо ви подивитеся на зареєстровану в консолі (другу) відповідь, ви побачите, що ми отримуємо масив об’єктів повідомлення. Кожна публікація містить більшу частину інформації про публікацію, але для вибору у вибраному нас цікавлять лише ідентифікатор публікації як значення та назва публікації як мітка. Отже, ми прокрутимо postsпроп і заповнимо змінну масиву, яку передамо SelectControl. Не забудьте звернути увагу на малий таймфрейм, де є postsпроп null. У цьому випадку ми заповнимо масив вибору одним параметром із міткою «Завантаження…».

Зауважте, що нам потрібно посилатися на назву публікації як post.title.rendered. Ви можете шукати себе в консолі, зайшовши в журнал posts, і побачити, як структурована інформація для кожної публікації.

Після цього нам просто потрібно додати SelectControlкуди завгодно. Він може бути всередині самого блоку (бажано в коді для режиму редагування) або всередині Inspector.

Ми встановлюємо SelectControlпосилання на атрибут, selectedPostIdякий ми визначили на попередньому кроці. Ми встановлюємо збережене значення в проп valueі обробляємо його оновлення в onChangeпропі – так само, як ми робили кілька разів раніше. Ми гарантуємо, що число зберігається за допомогою, parseInt()тому що selectedPostIdмає тип number. І ми передаємо згенерований масив варіантів у prop options.

Ось і все! Якщо ви дотримувалися коду з попереднього кроку, ви вже повинні мати код, який читає збережений ідентифікатор публікації та відображає його!

Звичайно, я рекомендую вам реалізовувати список і вибір публікацій інакше, ніж просто вибір. Це не дуже гарне чи зручне рішення, особливо для сайтів із великою кількістю публікацій. Говорячи про кількість дописів, ви помітили, що селектор getEntityRecords повертає максимум 10 останніх дописів? Це стандартна поведінка getEntityRecords, але ми можемо змінити запит на публікацію, передавши третій параметр.

Змініть запит для getEntityRecords

Передаючи об’єкт як третій параметр у getEntityRecords, ми можемо змінити запит на публікацію. Як зазначалося раніше, на жаль, документація для getEntityRecordsцього відсутня. Але, прочитавши весь Інтернет, я зібрав список можливих аргументів запиту;

  • per_page: встановіть число, щоб обмежити кількість публікацій. Установіть для -1отримання максимуму 100. За замовчуванням 10.
  • exclude: виключити певні публікації із запиту. Установіть ідентифікатор публікації або масив чисел для кількох ідентифікаторів публікації.
  • parent_exclude: Виключити певні батьківські публікації. Встановіть ідентифікатор публікації або масив кількох ідентифікаторів публікації.
  • orderby: Визначте порядок публікацій. Швидше за все, ви можете використовувати ті самі параметри, що й у WP_Query’s orderby. Може бути, наприклад, " menu_order".
  • order: Або 'asc'або ‘ desc'для впорядкування за зростанням або спаданням.
  • status: фільтрувати за статусом публікації. Може бути рядком, рядком із кількома статусами, розділеними комою, або масивом рядків статусу. Наприклад ['publish', 'draft'], щоб запитувати як опубліковані, так і чернеткові повідомлення.
  • categories: фільтрування публікацій за певними категоріями. Укажіть ідентифікатор категорії або масив ідентифікаторів категорії. Я вважаю, що це працює лише для категорій публікацій, а не для інших користувацьких таксономій.
  • tags: фільтрувати публікації за певними тегами. Укажіть ідентифікатор тегу або масив ідентифікаторів тегу. Працює лише для тегів публікацій, а не для інших користувацьких класифікацій.
  • search: додати пошуковий запит (рядок).

Примітка: це не вичерпний список, він також може змінюватися!

Змінимо наш запит. Ми хочемо зробити дві речі; спочатку ми хочемо отримати всі публікації, а не лише 10 останніх. -1Для цього ми надаємо per_page. По-друге, ми хочемо виключити поточну публікацію зі списку публікацій, надавши ідентифікатор поточної публікації exclude. Часто немає сенсу показувати ярлик допису або попередній перегляд самого поточного допису.

Ви можете подумати; стривай, як нам отримати ідентифікатор поточної публікації? Не забувайте, що ми в межах компонента вищого порядку withSelectта за допомогою selectселектора можемо отримати доступ до всіх основних сховищ даних WordPress. Ідентифікатор поточної публікації – це природна річ для зберігання в одному з основних магазинів WordPress. Усередині core/editorми знаходимо функцію getCurrentPostId().

Давайте змінимо withSelectповернення на щось подібне:

Наведена вище зміна досить зрозуміла. Ми генеруємо об’єкт запиту з властивостями per_pageта excludeпередаємо його як третій параметр до getEntityRecords(). Тепер наш props.postsвнутрішній FirstBlockEditкомпонент має перелічувати всі публікації, але виключати поточну публікацію.

Висновок

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

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

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі