Створення стартового блоку Gutenberg з командного рядка за допомогою @wordpress/create-block

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

З блоками для Gutenberg історія почала повторюватися, ще в 2019-му встиг повністю розібратися у створенні блоків Gutenberg і запиляти відеокурс ними і лише потім звернув увагу на утиліту @wordpress/create-block (раніше вона називалася create-guten-block).

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

Створення стартового блоку

Насамперед нам знадобиться Node.js та npm версії 5.2 або вище. Команди рекомендую запускати з папки wp-content/plugins, тому що в цьому прикладі маємо на увазі, що наш кастомний блок буде у вигляді плагіна. Але він може бути також частиною теми WordPress.

1. Переходимо до папки плагінів командою cd .
2. Перевіряємо поточну версію npm командою npm-v.

Докладніше про роботу з командним рядком є ​​в уроці про налаштування Webpack та WP CLI.

Усього є два способи роботи з командою @wordpress/create-block – у першому ми запускаємо її та відповідаємо на всі питання, які ставитиме нам утиліта в командному рядку, а у другому – запускаємо команду відразу з усіма параметрами і готово.

1-й спосіб

Тут ми будемо вказувати параметри блоку командного рядка безпосередньо в процесі створення блоку. Записав для вас приклад відео:

За кроками, що відбувається на відео:

1. Переходжу в терміналі до папки з плагінами на моєму тестовому сайті, який знаходиться в MAMP командою cd .
2. Очікую версію npm -v (щоразу це робити не потрібно зрозуміло).
3. Запускаю установку блоку командою npx @wordpress/create-block
4. Вказую різні параметри блоку.
5. «Do you want to customize WordPress plugin» - якщо вказати Y (що я і зробив), то тулса попросить вказати всі метадані плагіна.
6. Далі запускається установка, потрібно хвилинку зачекати.
7. Коли інсталяція завершиться, у командному рядку з'являться команди для запуску складання блоку. Якщо коротко, то потрібно буде перейти до директорії блоку командою cd насамперед. А потім усередині вже використовуємо або npm start або npm run build. Докладніше про це розповідав в уроці про Webpack і в уроці про пакети @wordpress/scripts.

Після того, як все зробили, ви зможете знайти новий блок в адмінці, не забудьте тільки активувати новий плагін спочатку!

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

2-й спосіб

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

npx @wordpress/create-block misha-super-block --title  "Misha Super Block" --short-description  "Якийсь опис" --category  "theme"

Параметри, які я використовував у команді вище:

- Text
– media
– design
- widgets
- theme
– embed

Файлова структура

Якщо ви перейдете до папки wp-content/plugins і знайдете наш плагін блоку там, то його файлова структура буде наступною:

/build /node_modules /src block.json edit.js editor.scss index.js save.js style.scss .editorconfig .gitignore misha-super-block.php package-lock.json package.json readme.txt

• misha-super-block.php – основний файл плагіна. У нашій ситуації нічого особливого не містить – лише інформацію про плагін та функцію реєстрації блоку register_block_type() .
• /build – CSS та JS у скомпілюваному вигляді, безпосередньо так, як вони підключаються в адмінці.
• block.json – містить метадані блоку.
• edit.js містить компонент редагування блоку, докладніше в уроці.
• editor.scss – стилі блоку у редакторі.
• index.js - тут ви знайдете код реєстрації блоку функцією registerBlockType() , докладніше про неї в цьому відеоуроці.
• save.js – містить компонент збереження блоку, докладніше у відеоуроці.
• style.scss – стилі блоку безпосередньо на сайті.

Мишко

Вперше познайомився з WordPress у 2009 році. Організатор та спікер на конференціях WordCamp. Викладач у школі Нетологія.

Пишіть, якщо потрібна допомога із сайтом або розробка з нуля.

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

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

Мета цього посібника, що складається з 10 частин, навчити вас писати власні користувальницькі блоки. найкращий спосіб вчитися! Виконуйте послідовності кроків з 1 по 10, так як ми будемо будувати поверх блоку у міру просування.

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

Перш ніж ми зануримося в кроки, є відмова від відповідальності.

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

Вам потрібно знати Javascript – це само собою зрозуміле. Не потрібно бути експертом, але це не підручник Javascript ECMAScript; Використання коду ES6 і ESNext. кодування в ESNext з усіма новими синтаксисами.

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

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

Вік цього підручника

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

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

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

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

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

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

Зміст

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

• Частина 1: Налаштування середовища розробки
  У першій частині цієї серії посібників про те, як створювати користувальницькі блоки Gutenberg, нам потрібно налаштувати наше середовище розробки. Нам потрібне місце, де ми можемо писати наш код у синтаксисі 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: Отримання повідомлень та компонентів
  вищого порядку. У заключній частині ми дізнаємося, як використовувати компоненти вищого порядку та, таким чином, як виконати запит повідомлення з редактора та надати метод вибору повідомлень.

Чому і як створити блок Гутенберга - підручник для початківців

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

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

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

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

Що таке блоки Гутенберг?

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

Приклади блоку Гутенберга

Основна зміна, яку Гутенберг ввів у створення контенту в WordPress, є те, що, замість того, щоб один великий шматок контенту (як це було з класичним редактором), веб-сторінки в даний час сегментовані на більш дрібні частини, звані блоками.

Це може бути багато різних речей:

• Пунктах
• Заголовки
• Блок-цитати
• Зображення та галереї
• Списках
• Вбудовані носії
• Кнопки
• Таблиці

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

Чому зміни?

Навіщо міняти систему роботи? Ну, основна ідея редактора Гутенберга полягає в тому, щоб зробити редагування досвід гнучкішим і легше налаштувати, особливо для користувачів-початківців.

Це дає вам більше контролю над усією сторінкою, а не тільки основний зміст. Ви можете налаштувати елементи більш детально і без застосування csS класів до них або інших технічних hijinks.

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

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

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

Отже, навіщо створювати власний блок Гутенберга?

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

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

Особливо, якщо є зміст блоків, які вам потрібно часто, але що редактор, плагіни або теми не пропонують (поки), створюючи свій власний має сенс. Замість того, щоб щоразу вводити код користувача, практичніше мати можливість вибирати його з вбудованого меню. Ти не згоден?

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

Чи це легко?

З технічної точки зору важливо відзначити, що більшість компонентів блоків Гутенберга написані в JavaScript.

Зрушення в бік JavaScript був очевидний в останні роки, наприклад, в Каліпсо.

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

Тим не менш, я повинен зізнатися, що я боровся із завершенням завдання я поставив ам-пост. добре?

Як створити блоки для WordPress Гутенберг редактор

Добре, тепер, коли у нас є теорія убік, поговоримо про те, як створити блок Гутенберга.

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

Для того, щоб не почати повністю з нуля, ми будемо використовувати створити Guten блок Dev інструментарій Ахмад Аваїс. Все, що ви збираєтеся прочитати, ґрунтується на ньому. Крім того, буде посилання на офіційну документацію Гутенберга, де я вважаю це розумним чи необхідним.

1. Підготуйте довкілля

Одним із перших завдань створення блоку Gutenberg є налаштування середовища розробки. Хоча це легко налаштувати локальну установку WordPress, щоб возитися з новим редактором вам потрібні речі, як webpack, React, ESLint, Babel, і багато іншого.

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

Проте для того, щоб використовувати його, спочатку необхідно встановити node.js і npm. Для цього перейдіть на офіційний сайт node.js та завантажте правильний файл установки для вашої системи.

Як тільки це буде зроблено, виконайте та запустіть інсталяцію. Готовий? Чудово, ти щойно виконав перший крок.

2. Налаштування файлів Plugin з створенням guten блок

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

Перше, що вам потрібно зробити, це відкрити консоль. У Windows натисніть кнопку Windows, шукайте запит командита відкрийте її. Якщо ви знаходитесь на Mac, використовуйте Cmd'F, а потім шукайте консоль. Обидва мають відкрити щось на кшталт цього:

Тут, перше, що ви хочете зробити, це перейти до плагін каталог вашого місцевого сайту. Ви можете це зробити з командою CD. Введення CD «ім'я каталогу» відкриває каталог, cd. походить від одного каталогу.

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

Опинившись там, ви хочете запустити наступну команду: