Огляд WordPress Create Block Script

Офіційна команда редактора WordPress (Gutenberg) надала гарний маленький сценарій, щоб ви могли створити плагін блоку за допомогою їх @wordpress/create-blockсценарію npm.

У цій статті наведено огляд WordPress Create Block Script, а також подробиці того, що він виводить.

ПРИМІТКА. Ця стаття стосується старішої версії сценарію створення блоку

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

Запуск сценарію створення блоку

Офіційна документація надає вам кілька різних параметрів для передачі в npm init @wordpress/blockкоманду.

Для свого налаштування я запустив його в інтерактивному режимі, опустивши параметри. Я ввів таку команду в свій термінал (перебуваючи cdв wp-content/pluginsпапці):

npm init @wordpress/block

Сценарій поставив мені кілька запитань, щоб допомогти мені створити мій блок.

Бажаючи створити початковий блок для ідеї плагіна, який у мене є («Wholesome Notes»), я відповів на запитання так:

• Блоковий слаг, який використовується для ідентифікації (також назва плагіна та вихідної папки): Я хочу, щоб мій блок називався Wholesome Notes, тому я ввів wholesome-notes.

• Внутрішній простір імен для назви блоку (щось унікальне для ваших продуктів): оскільки це має бути унікальним для всіх моїх продуктів, які я ввів wholesome-code, оскільки це назва моєї компанії. Оглядаючись назад, це було б краще скоротити до wcабо wcltd.

• Відображувана назва для вашого блоку: Я ввів назву плагіна, Wholesome Notes.

• Огляд сценарію створення блоку WordPress Я не був на 100% впевнений, що хочу тут написати, тому просто ввів текст, який планую змінити пізніше.

• Піктограма dashicons, щоб полегшити ідентифікацію вашого блоку (необов’язково): швидко відкриваючи ресурс WordPress Dashicons, я вибрав admin-commentsїї, оскільки вона має піктограму стилю примітки.

• Назва категорії, щоб допомогти користувачам переглядати та знаходити ваш блок (використовуйте клавіші зі стрілками): я вибрав layout, хоча, чесно кажучи, цьому типу блоку, ймовірно, потрібна буде своя категорія. Це те, що я можу змінити пізніше.

Бігnpm init @wordpress/block

Потім сценарій пішов далі та встановив усі необхідні залежності через npm (на цьому етапі він просто встановлює wp-scriptsпакет npm як залежність).

Перевірка результату

За допомогою наведених вище команд WordPress Create Block Script дає вам такі результати:

• здорові-нотатки
  • будувати
    • index.asset.php
    • index.js
    • index.js.map
  • node_modules
  • src
    • index.js
  • .editorconfig
  • .gitignore
  • editor.css
  • package.json
  • style.css
  • wholesome-notes.php

@wordpress /вивід блоку

Нижче наведено розбивку кожного з цих файлів і папок.

wholesome-notes

Це коренева папка плагіна, вона має таку саму назву, як та, яку я ввів для «slug» у запитаннях щодо встановлення.

/build

Це папка збірки. Він містить усі активи JavaScript і PHP, згенеровані з /srcпапки. Вони додаються до черги через головний wholesome-notes.phpфайл завантажувача.

/build/index.assets.php

Цей файл PHP створюється автоматично під час /srcкомпіляції папки. Він містить набір усіх правил JavaScript редактора WordPress (Gutenberg), які використовує ваш плагін. Він додається до черги через головний wholesome-notes.phpфайл завантажувача.

/build/index.js

Це основний скомпільований файл JavaScript, який додається до черги через головний wholesome-notes.phpфайл завантажувача.

/build/index.js.map

Цей файл створюється лише під час компіляції ресурсів для режиму розробки (IE, який ви запускаєте, npm startа не npm run buildпід час компіляції ресурсів. Це корисний файл для налагоджувачів JavaScript, щоб допомогти визначити імена файлів і номери рядків у разі виникнення помилок.

/node_modules

Це папка, у яку встановлено всі залежності JavaScript для вашого плагіна.

/src

Це папка, яка містить усі нескомпільовані ресурси для вашого плагіна.

/src/index.js

Це основний нескомпільований файл JavaScript для вашого блоку WordPress Editor (Gutenberg). Спочатку він містить всю логіку для блоку.

/.editorconfig

Цей файл містить корисні стилі для вашого IDE (інтегрованого середовища розробки), наприклад код Visual Studio.

/.gitignore

Цей файл повідомляє git ігнорувати певні файли, коли ви надсилаєте їх до репозиторію git (наприклад, GitHub).

/editor.css

Стилі в цьому файлі виводяться лише в редакторі, він ставиться в чергу через головний wholesome-notes.phpфайл завантажувача.

/package.json

Цей файл містить усі залежності npm для плагіна та команди, які можна виконувати. Зауважте, що плагін використовує wp-scripts( @wordpress/scripts) як основу, тому спочатку завантажуються залежності для цього пакета.

/style.css

Стилі в цьому файлі виводяться в редактор і на передній частині сайту, вони додаються в чергу через головний wholesome-notes.phpфайл завантажувача.

/wholesome-notes.php

Це основний файл завантажувача плагіна. Його ім’я було встановлено за допомогою ‘slug’, який ми ввели в початковому сценарії налаштування. Він ставить у чергу всі ресурси JavaScript, необхідні для плагіна.

Вивчення плагіна

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

Створити блоковий сценарій – інтерфейс за замовчуванням

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

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

Блокувати CSS

Як ви можете бачити на знімках екрана, код прикладу в editor.cssреалізує червону рамку в редакторі, тоді як стилі прикладів у styles.cssзастосовуються як до передньої, так і до внутрішньої частини.

Блокувати JavaScript

Точкою входу для налаштування новоствореного блоку є /src/index.jsфайл.

У цьому файлі є багато вбудованої документації, яка пояснює, чому імпортуються певні функції, наприклад registerBlockTypeдля реєстрації блоку та __підтримки перекладу тексту i18n.

Створіть вбудовані коментарі Block index.js

Це також дає вам дуже простий вихід для функцій editі save, які передаються в реєстрацію блоку.

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

Створіть блок index.js, відредагуйте та збережіть

Будівництво блоку

Згідно з документацією create block npm, ви можете використовувати кілька команд у своєму терміналі (з кореневої папки вашого плагіна), щоб виконувати такі дії, як перевірка якості коду або оновлення пакетів.

Основні команди, які вам знадобляться для створення блоку, полягатимуть npm startу компіляції плагіна для розробки та npm run buildкомпіляції остаточної версії.

wp-scripts(з @wordpress/scriptsпакету npm) є основною залежністю для вашого плагіна. Ця залежність абстрагує всі інструменти для вашого блоку, тому ви можете просто зосередитися на створенні JavaScript.

Behind the scenes wp-scriptsвикористовує webpackдля компіляції всіх ваших ресурсів у /build/index.jsфайл.

Ви можете прочитати більше про wp-scriptsце в Посібнику з редактора блоків, а також ви можете дізнатися більше про налаштування збірки webpack у розділі «Налаштування збірки JavaScript» цього Довідника.

Розширення налаштування веб-пакета Create Block

База коду для вашого блоку може охоплювати кілька файлів або навіть мати кілька підблоків або містити складні стилі. У такі моменти ви можете розширити налаштування webpack, вбудовані в wp-scripts.

Для отримання додаткової інформації перегляньте мою статтю про те, як розширити wp-scriptsконфігурацію веб-пакета, або перегляньте розділ «Сценарії пакетів» у посібнику з редактора блоків, щоб отримати вказівки.