Основи розробки для WordPress Gutenberg для початківців

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

Сайт документації WordPress дійсно має великий розділ, присвячений Гутенбергу для розробників; називається довідником редактора Гутенберга. Він уже містить досить багато інформації. Але це може дещо заплутати або налякати когось, хто вперше знайомиться з технологіями на основі Javascript. Для розробників, орієнтованих на PHP, які можуть лише мати базові знання Javascript/jQuery, нові технології WordPress можуть здатися страшними. Але повірте мені, щойно ви вивчите ключові поняття, ви побачите, які нові можливості у вас зараз є як розробника WordPress.

Почнемо з абсолютних основ. Які мови програмування та інструменти вам потрібно буде використовувати чи навчитися, щоб найкраще розробляти Gutenberg?

Мова та бібліотеки, які вам знадобляться

Коротка відповідь на те, яку мову вам потрібно використовувати для розробки до Gutenberg: Javascript. Однак у світі Javascript існує чимало концепцій, розширень та інструментів, про які вам слід знати.

Перш за все, це питання версії Javascript. Є офіційна стандартизація Javascript; ECMAScript. ECMAScript 5 (часто скорочений до ES5) вийшов приблизно 10 років тому, і це версія Javascript, з якою ми, розробники, знайомі найбільше. Потім у нас є ECMAScript 6 (часто скорочений до ES6 ), який вийшов у 2015 році. Деякі люди називають цю версію ES2015. І, нарешті, є ESNext, що є динамічною назвою майбутньої версії, що містить пропозиції, які ми сподіваємося включити в будь-яку наступну стандартизовану версію Javascript.

Можливо, ви думаєте так: «Все добре, і все, нові версії Javascript просто означають більше функцій. Тому я буду використовувати найновіший." Але є дуже важлива річ, яку вам потрібно знати щодо версій Javascript, і це: більшість сучасних браузерів можуть розуміти лише ES5.

Це означає, що якщо ви хочете написати Javascript у ES6 або ESNext, вам потрібно налаштувати інструменти, які перетворюють ваш код у ES5, щоб браузери могли його зрозуміти. Але перш ніж почати думати про те, щоб взагалі пропустити вивчення ES6 і ESNext, пам’ятайте, що ES5 10 років. І це вимагатиме від вас написати набагато більше коду. Він також буде набагато менш читабельним і складнішим, ніж якщо б ви написали його в ES6 або ESNext.

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

То навіщо турбуватися про ES6, ESNext або JSX?

Якщо ви все ще не впевнені, що ES6/ESNext вартий додаткового кроку для його перетворення, дозвольте мені показати вам порівняння коду. За допомогою ES6 і JSX ви можете написати це для повернення простого абзацу; з класом і динамічним виведенням зі змінної;

Для тих із вас, хто не знайомий із цим і думає, що я забув цитати – ні, не забув. У цьому полягає простота JSX. Давайте порівняємо наведене вище з тим, як ви б писали за допомогою бібліотек Javascript ES5 і WordPress:

return wp.element.createElement(
    'p',
    { className: 'example' },
    'Hello, my name is ' + name
);

Увесь наведений вище код потрібен для виведення того, що можуть робити ES6 і JSX, в однині, яку дуже легко читати! Уявіть собі створення складнішого інтерфейсу користувача з подіями та умовами, коли лише простий абзац вимагає цього громіздкого фрагмента коду.

Переконаний? добре!

Інструменти трансформації та React JS

Найпоширенішим інструментом, який використовує WordPress для трансформації ES6/ESNext, є Babel. Зазвичай ви використовуєте Babel як плагін для Webpack, який є інструментом, який об’єднує та мінімізує ваші файли Javascript. Обидва інструменти використовують Node.js, який дає вам деякі інструменти для запуску сценаріїв для Webpack і Babel у командному рядку. Якщо це звучить заплутано, у мене є допис, у якому докладно пояснюється, як налаштувати всі ці інструменти для розробки Gutenberg.

Друге, що вам потрібно знати щодо технологій, це те, що Gutenberg базується на рівні абстракції поверх React JS. React JS — це бібліотека Javascript з відкритим кодом, яка підтримується Facebook і була випущена приблизно в 2013 році. Оскільки React існує вже давно, для цієї бібліотеки є багато посібників, посібників і документації. На офіційному сайті React є хороший, детальний підручник для тих, хто тільки починає знайомитися з React. Вам точно не потрібно бути експертом у React, щоб розробляти для Gutenberg, але основи того, як він працює з компонентами та станами, дуже допоможуть вам зрозуміти Gutenberg.

Щоб зробити висновок:

• Вивчення React JS допоможе зрозуміти, як розробляти для Gutenberg. Особливо, якщо ви хочете створити власні користувацькі блоки або налаштувати наявні.
• Ви можете зробити, використовуючи лише ES5 Javascript, але однозначно рекомендується вивчити ES6, ESNext і JSX.
• Ознайомтеся з інструментами, необхідними для трансформації коду ES6 / ESNext / JSX. Такими інструментами є npm, Webpack і Babel.

Новий спосіб зберігання вмісту публікацій і чому

Однією з найбільших переваг Gutenberg є відмова від фіксованого HTML у вмісті публікацій. WordPress, до Gutenberg, і більшість веб-систем CMS зберігають вміст статей у чистому HTML. Зазвичай це не проблема з простим вмістом (заголовками та абзацами). Але це може бути більшою проблемою з більш складним і динамічним вмістом.

Будь-яка CMS, яка дозволяє динамічний вміст у вмісті статті, зіткнеться з проблемами, як зберегти це як дійсний HTML. Це може бути будь-що, наприклад зображення, яке посилається на свій ідентифікатор у системі замість повної URL-адреси. Або віджет, який динамічно відображає останні публікації в певній категорії. Зазвичай це вирішується виведенням спеціального таємничого HTML, який не має сенсу виводити звичайним способом. А потім дозвольте синтаксичному аналізатору CMS перетворити ці частини HTML на щось значуще або динамічне. Недоліком цього є те, що якщо ви перенесете свій вміст в іншу CMS, це часто призведе до потворного HTML. Вміст буде заповнено нерозібраним HTML, який потрібно очистити вручну. Саме цю проблему прагне вирішити Гутенберг.

За допомогою Gutenberg WordPress вирішив зберігати додаткову та динамічну інформацію як коментарі HTML. Користувачі веб-сайту ніколи не бачать коментарі HTML, і в основному в блоці коментарів дозволено будь-що. Коментар HTML починається з <!--і закінчується на -->, а Gutenberg зберігає дані в певній структурі у форматі JSON. Кожен блок у Gutenberg обернений початковим коментарем HTML і завершальним коментарем HTML після нього.

Новий спосіб зберігання вмісту публікацій

Я не буду детально розповідати про те, як структуровані блоки коментарів – ви знайдете докладний посібник про це в посібнику з редактора WordPress. Але як приклад, простий абзац у вмісті допису Гутенберга буде збережено в базі даних як:

Що стосується динамічного вмісту, зазвичай HTML взагалі не виводиться. Усю інформацію, яка потрібна WordPress, щоб зрозуміти, що робить цей блок, можна знайти в коментарях HTML. Ось як Gutenberg зберігає блок «Останні дописи»:

Оскільки все є коментарями HTML, перенесення ваших публікацій в інший WordPress без Gutenberg або іншої CMS гарантує, що не викидається потворний нерозібраний HTML. Він буде просто проігнорований і пропущений.

Ви, напевно, вже зрозуміли, що блоки коментарів починаються з назви блоку з префіксом «wp». Якщо є будь-які спеціальні налаштування, вони будуть виведені після назви в JSON, як ви можете бачити на прикладі блоку останніх публікацій. Гутенберг називає це атрибутами, і ця концепція є чимось, з чим ви добре ознайомитеся, коли почнете вчитися розробляти для Гутенберга.

Корисно знати:
якщо ви хочете глибше дізнатися, як зберігається вміст нового повідомлення, ви можете переглянути свою wp_postsтаблицю у своїй базі даних. Є ще один простий спосіб переглянути повне значення бази даних із шаблонів WordPress. У своєму єдиному шаблоні в циклі просто використовуйте «echo get_the_content()». Використання звичайного ” the_content()" виведе проаналізований вміст публікації, але відтворення значення вмісту виведе саме те, що зберігається в базі даних. Ви можете скористатися інструментом «Перевірити» або переглянути джерело в Chrome або Firefox, щоб переглянути блоки коментарів.

Що ви як розробник можете зробити в Gutenberg

У вас є кілька варіантів того, як налаштувати свої теми або плагіни для Gutenberg. Нижче наведено найпоширеніші налаштування, які ви, ймовірно, зробили б як розробник.

Розширте та налаштуйте існуючі блоки

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

Найпоширенішим методом розширення блоку є додавання власних стилів блоку, які є варіантами стилю блоку. Стилі блоків не так часто зустрічаються в WordPress за замовчуванням, але вони є. Подивіться на блок цитат. У редакторі Gutenberg ви матимете поле на правій бічній панелі під назвою «Стилі».

Ще один спосіб налаштування існуючих блоків – це використання фільтрів. Ви, напевно, знайомі з фільтрами за допомогою PHP у WordPress, але з Gutenberg тепер є фільтри на основі Javascript для блоків. Наприклад, ви можете додати власні власні атрибути (параметри) до всіх чи окремих типів блоків або відфільтрувати спосіб їх збереження чи виведення.

Ви також можете маніпулювати категоріями блоків, а також видаляти або дозволяти певні блоки в певних ситуаціях. Або ви можете, наприклад, переконатися, що лише кілька типів блоків дозволено для спеціального типу публікації.

Створюйте власні власні блоки

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

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

Переконайтеся, що ваша тема готова до Гутенберга

Якщо ви розробник теми WordPress, вам слід знати, що для Gutenberg може знадобитися багато налаштувань вашої теми, особливо у формі add_theme_support(). Довідник WordPress містить гарний огляд усіх підтримок тем, які потрібно враховувати, щоб зробити свою тему готовою до Гутенберга.

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

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

І, нарешті, доступні функції для роботи з парсером Gutenberg і способи вилучення блоків із дописів. Оскільки весь вміст зберігається з повною інформацією про тип вмісту, ви можете легко витягти окремі частини вмісту публікації. Хорошим прикладом є виділення першого абзацу дописів, щоб показати його як уривок. Дуже корисною функцією PHP для цієї концепції є [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(), яка використовує синтаксичний аналізатор Гутенберга для наданого вмісту публікації, а натомість ви отримаєте масив PHP із усією інформацією про блоки та вмістом.

Висновок

Сподіваюся, ця публікація не тільки навчила вас чогось про розробку для Gutenberg, але й викликала у вас цікавість і бажання дізнатися більше! Як розробник WordPress, орієнтований на PHP, який спочатку опирався ідеї переходу на технологію на основі Javascript, я можу сказати вам, що як тільки ви зробите крок, щоб дізнатися про «новий спосіб», ви будете щасливі, що зробили. Гутенберг дійсно відкриває нові способи налаштування, дизайну та показу вмісту WordPress без конструкторів сторінок або тем із великими бібліотеками, щоб забезпечити гнучкий і гарний вміст публікацій. Треба лише навчитися з ним оптимально працювати!