Як створити власний блок WordPress Gutenberg: Серія навчальних посібників

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

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

Що вам потрібно знати, перш ніж ми почнемо

Перш ніж ми зануримося в сходинки; застереження. Є кілька речей, які ви вже повинні знати заздалегідь про те, чим є ця серія, а чим ні.

Мови програмування

Вам потрібно знати Javascript – це само собою зрозуміло. Немає необхідності бути експертом, але це не підручник з Javascript. Що стосується версії Javascript ECMAScript; ви можете писати в ES5 і не турбуватися про компіляцію свого коду за допомогою Babel тощо. Однак ця серія написана з кодом ES6 і ESNext. Не хвилюйтеся – крок 1 призначений для того, щоб допомогти вам налаштувати середовище розробки, готове до кодування в ESNext з усіма новими синтаксисами.

Як ви, мабуть, знаєте, Гутенберг базується на React JS. Ця серія також не є навчальним посібником з React і передбачає базові знання React і принципів його роботи. Знову ж таки, немає необхідності бути експертом. Оскільки React існує вже давно, є багато хороших посібників, документації та ресурсів, призначених для навчання React. Тому я рекомендую спочатку переглянути їх.

Ця серія зосереджена на вивченні частин Javascript, React і JSX і не стосується стилів / CSS. Оскільки мета вашого блоку може кардинально відрізнятися, я вирішив не зосереджуватися на стилях і надав лише дуже простий HTML. Ви самі можете додати свій стиль і необхідний вихід HTML, щоб ваш блок відтворювався саме так, як вам потрібно.

Вік цього посібника

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

Якщо ви побачите це в далекому майбутньому, якийсь код може бути застарілим або замінений кращими методами. Цей посібник було написано та доопрацьовано у версії WordPress 5.2.3 (кінець 2019 року).

Що ви дізнаєтесь

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

Далі ми дізнаємося, як додати розділи та налаштування для нашого блоку на бічній панелі редактора (Інспектор), а також налаштувати панель інструментів. Попутно ми торкнемося багатьох різних типів вводу та того, як використовувати для них компонент Гутенберга. І, звичайно, ми навчимося зберігати, оновлювати та виводити збережену інформацію в наш блок – і як це працює за лаштунками.

Наприкінці ми розглянемо більш просунуті речі, такі як динамічні блоки та те, як використовувати PHP для візуалізації виводу блоку. І, нарешті, як робити запити на публікації в редакторі, дозволяючи користувачеві вибирати публікацію зі списку для рендерингу.

Зміст

Нижче ви знайдете прямі посилання на кожну частину серії.

• Частина 1: Налаштування середовища розробки
  У першій частині цієї серії посібників про те, як створювати власні блоки Гутенберга, нам потрібно налаштувати наше середовище розробки. Нам потрібне місце, де ми зможемо написати наш код у синтаксисі ES6/ESNext і компілювати його на ходу.

• Частина 2: Реєстрація блоку
  У цій частині ми напишемо Javascript для реєстрації та налаштування нашого спеціального блоку. Наприкінці ми зареєструємо скрипт у PHP і створимо необхідний код PHP, щоб WordPress розпізнав його як новий блок.

• Частина 3: Реквизити та компоненти WordPress
  На попередньому кроці ми навчилися реєструвати власний блок як у Javascript, так і в PHP. На цьому кроці ми дізнаємося, як використовувати компоненти WordPress для додавання різних типів полів і налаштувань.

• Частина 4: Атрибути
  У цій частині ми розглянемо, як визначити атрибути, отримати їхні значення та оновити їх. За допомогою атрибутів ми можемо прийняти вхідні дані від редактора, зберегти їх і вивести на свій розсуд.

• Частина 5: Додавання налаштувань інспектора
  На цьому кроці ми зосередимося на тому, що WordPress (принаймні в коді) називає інспектором – бічну панель у правій частині редактора. Ми торкнемося деяких нових компонентів, які має сенс розмістити на бічній панелі, і того, як з ними працювати.

• Частина 6: Додавання панелей інструментів
  У цій публікації ми дізнаємося, як додати панелі інструментів WordPress до нашого блоку, тобто для вирівнювання та вирівнювання блоків. Ми також навчимося додавати власні панелі інструментів із власними кнопками для виконання спеціальних дій.

• Частина 7: Створення власних компонентів
  У цьому посібнику ми написали весь код уregisterBlockType()функціїedit. Цілком можливо, і часто рекомендується натомість призначити редагування окремому компоненту. Роблячи це, ми можемо використовувати такі функції, як стан компонентів і методи життєвого циклу.

• Частина 8: Переклад вашого блоку
  У цій частині ми зосередимося на тому, як перекладати тексти та значення в нашому блоці. Ми використовуємо WP-CLI для створення необхідних файлів, щоб Гутенберг міг завантажувати наші переклади під час перемикання мови WordPress.

• Частина 9: Динамічні блоки
  Досі ми відтворювали вихідні дані блоку в Javascript. Однак для динамічного вмісту, як-от останні публікації або відображення публікації, нам може знадобитися відтворити вихідні дані блоку в PHP.

• Частина 10: Отримання дописів і компонентів вищого порядку
  У заключній частині ми навчимося використовувати компоненти вищого порядку, а отже, як виконувати запит допису з редактора та надамо метод вибору дописів.