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

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

передумови

Node має бути встановлено на вашій машині, щоб ви могли використовувати npmкоманду (що розшифровується як Node Package Manager)
Встановлення WordPress
Редактор коду
Доступ до Терміналу

Створіть свій плагін

Після того як ви встановили node на своїй машині, ви повинні мати доступ до npmкоманди у вашому терміналі.

Відкрийте свій термінал і переконайтеся, що ви перейшли cd(змінили каталог) до папки плагінів у своїй інсталяції WordPress (наприклад, cd wp-content/plugins).

Там виконайте таку команду:

npm init @wordpress/block

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

Використання терміналу для запуску сценарію створення

Запитання конфігурації

Сценарій задаватиме такі запитання, ось мої приклади відповідей:

Блоковий слаг, який використовується для ідентифікації (також плагін і ім’я вихідної папки) — я хочу, щоб мій блок називався Wholesome Plugin, тому я ввів wholesome-plugin.
Внутрішній простір імен для назви блоку (щось унікальне для ваших продуктів) — оскільки це має бути унікальним для всіх моїх продуктів, які я ввів wholesomecode, оскільки це назва моєї компанії.
Відображувана назва для вашого блоку — я ввів назву плагіна, Wholesome Plugin.
Короткий опис вашого блоку (необов’язково) — я ввів «An example plugin to demonstrate the create-block-script».
Піктограма dashicons, щоб полегшити ідентифікацію вашого блоку (необов’язково) — швидко відкриваючи ресурс WordPress Dashicons, я вибрав admin-plugins, оскільки він має піктограму плагіна. Не забувайте опускати dashicon- у префіксі dashicon, роблячи це.
Назва категорії, яка допоможе користувачам переглядати та знаходити ваш блок (використовуйте клавіші зі стрілками) — я вибрав design. Хоча спеціальна категорія, мабуть, підійде краще.
Ім’я автора плагіна (необов’язково). Кілька авторів можна вказати через кому — я ввів wholesomecode.
Коротка назва ліцензії плагіна (необов’язково) — я натиснув Enter, щоб прийняти GPL версії 2.0 або новішої.
Посилання на повний текст ліцензії (необов’язково) — я натиснув Enter, щоб вставити URL-адресу ліцензії GPL v2.0.
Номер поточної версії плагіна — я натиснув Enter, щоб вставити 0.1.0.

Запитання щодо налаштування сценарію

Після цього сценарій завершить роботу.

Що щойно сталося?

Під час виконання сценарію відбувається кілька речей, а саме:

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

Команди збірки

Ми розглянемо їх докладніше в розділі вивчення плагінів.

Використання плагіна

Перш ніж ви зможете використовувати плагін, його потрібно активувати. Ви можете зробити це, вибравши Pluginsв меню адміністратора WordPress, а потім вибравши activateпід назвою плагіна.

Активуйте плагін

Тепер вам потрібно відредагувати публікацію в WordPress і вставити плагін за допомогою редактора Gutenberg.

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

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

Перегляд блоку на передній частині

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

Блок на передній частині

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

Загальна мета Create Block Script полягає в тому, щоб ви могли створити свій власний плагін. Давайте детальніше розглянемо файли, які він згенерував:

Згенеровані файли

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

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

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

**/build/index.css**— Це файл CSS редактора, який додається до черги через головний wholesome-plugin.phpфайл завантажувача.

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

**/build/style-index.css**— Це зовнішній файл CSS, який додається до черги через головний wholesome-plugin.phpфайл завантажувача.

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

**/node_modules**— Це папка, у яку встановлено всі залежності JavaScript для вашого плагіна.
**/src**— Це папка, яка містить усі нескомпільовані ресурси для вашого плагіна.
**/src/edit.js**— Це функція редагування блоку, яка керує відображенням блоку в редакторі блоків, коли він перебуває в режимі редагування.
**/src/editor.scss**— Це нескомпільований SCSS для редактора, він буде скомпільований у /build/index.css.
**/src/index.js**— Це основний нескомпільований файл JavaScript для вашого блоку WordPress Editor (Gutenberg). Він реєструє блок і містить налаштування за замовчуванням.
**/src/save.js**— Це функція збереження блоку, яка керує розміткою блоку під час його збереження.
**/src/style.scss**— Це нескомпільований SCSS для інтерфейсу, він буде скомпільований у /build/style-index.css.
**/.editorconfig**— Цей файл містить корисні стилі для вашого IDE (інтегрованого середовища розробки), наприклад код Visual Studio.
**/.gitignore**— Цей файл повідомляє git ігнорувати певні файли, коли ви надсилаєте їх до репозиторію git (наприклад, GitHub).
**/editor.css**— Стилі в цьому файлі виводяться лише в редакторі, він ставиться в чергу через головний wholesome-notes.phpфайл завантажувача.
**/block.json**— Цей файл визначає плагін, щоб його могла виявити бібліотека блоків WordPress. Якщо ви вносите зміни в плагін, переконайтеся, що цей файл оновлено. У новіших версіях сценарію NPM цей файл використовується замість /src/index.jsреєстрації вашого блоку.
**/package.json**— Цей файл містить усі залежності npm для плагіна та команди, які можна виконувати. Зауважте, що плагін використовує wp-scripts( @wordpress/scripts) як основу, тому спочатку завантажуються залежності для цього пакета.
**/readme.txt**— Цей файл є файлом readme сховища плагінів WordPress, який потрібен, якщо ви хочете, щоб блок був указаний у сховищі плагінів.
**/wholesome-plugin.php**— Це основний файл завантажувача плагіна. Його ім’я було встановлено за допомогою ‘slug’, який ми ввели в початковому сценарії налаштування. Він ставить у чергу всі ресурси JavaScript, необхідні для плагіна.

Вивчення команд побудови

Перш ніж ми зможемо запустити наші команди збірки, нам потрібно переконатися, що ми перебуваємо в папці плагіна. У цьому прикладі ми запустимо cd wholesome-pluginв терміналі, щоб змінити каталог на папку плагіна.

Потім ми можемо виконати такі команди:

**npm start**— Починає збірку для розробки. Якщо ви вносите зміни в плагін, ви повинні зробити це, щоб зміни відобразилися (ймовірно, вам також потрібно буде оновити веб-переглядач).
**npm run build**— Створює код для виробництва. Зробіть це, якщо ви створюєте випускну версію плагіна.
**npm run format:js**— Автоматично форматує файли JavaScript, використовуючи передову практику.
**npm run lint:css**— Лінти (шукає помилки) у файлах CSS.
**npm run lint:js**— Лінти (шукає помилки) у файлах JavaScript.
**npm run packages-update**— Оновлення пакетів WordPress до останньої версії.

Ми будемо використовувати один або кілька з них під час модифікації плагіна.

Змінення плагіна

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

Додати атрибути до`/src/index.js`

Відкрийте /src/index.jsу своєму редакторі та додайте наступне всередині registerBlockTypeфункції в розділі apiVersion:

attributes: {
  blockText: {
    default: 'Wholesome Plugin – hello from the editor!',
    type: 'string',
  },
},

Це дасть нам місце для зберігання даних у нашому плагіні, що називається blockTextдоступним через attributesвластивість (prop). Зауважте, що ми надали йому за замовчуванням вихідний текст, створений сценарієм додатка create.

Додати RichText до`/src/edit.js`

Відкрийте /src/edit.jsу своєму редакторі та замініть імпорт useBlockPropsна таке:

import { RichText, useBlockProps } from '@wordpress/block-editor';

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

Потім змініть всю функцію редагування на наступне:

export default function Edit( { attributes, setAttributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps() }>
            <RichText
                className="block__text"
                keepPlaceholderOnFocus
                onChange={ (blockText) => setAttributes( { blockText }) }
                placeholder={ __( 'Block Text', 'wholesome-plugin') }
                tagName="span"
                value={ blockText }
            />
        </p>
    );
}

Це встановлює значення RichTextкомпонента таким самим, як і те, що зберігається в blockTextатрибуті, а onChangeвластивість встановлює blockTextатрибут на значення, яке будь-коли було введено в RichTextкомпонент.

Виведіть атрибути в`/src/save.js`

Відкрийте /src/save.jsу своєму редакторі та замініть saveфункцію такою:

export default function save( { attributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps.save() }>
            { blockText }
        </p>
    );
}

Це просто виводить значення blockTextв абзац.

Компіляція плагіна

Відкрийте термінал, переконайтеся, що ви перебуваєте в кореневому каталозі плагіна, і виконайте таку команду:

Сценарій буде скомпільовано. Якщо у вас є якісь помилки, термінал повинен повідомити вас про те, що вони є.

Створення плагіна

Вставлення плагіна

Переконайтеся, що ви оновили свою публікацію. Можливо, попередня версія блоку тепер зламана, це нормально, просто видаліть її та вставте нову.

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

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

Перегляд плагіна

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

Редагований блок у передній частині веб-сайту

Якщо ви бажаєте, щоб ваші блоки відображалися в спеціальній категорії блоків, просто додайте наступний код у кореневу папку вашого плагіна (у цьому випадку wholesome-plugin.php:

function wholesomecode_wholesome_plugin_block_categories( $categories) {
    return array_merge(
        $categories,
        [
            [
                'slug'  => 'wholesome-blocks',
                'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),
            ],
        ]
    );
}
add_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );

Це зареєструє спеціальну категорію блоку у вашому інструменті вставки блоків.

Тоді все, що вам потрібно зробити, це налаштувати categoryаргумент registerBlockTypeфункції у /src/index.jsвідповідно до вашої категорії блоку та перекомпілювати:


category: 'wholesome-blocks',

Тепер, коли ви прийдете, щоб вставити свій блок, ви знайдете його в новоствореній категорії блоків:

Спеціальна категорія блоку в інструменті вставки блоків

Подивіться на використання PHP для візуалізації вашого блоку з динамічними блоками
Подивіться на використання мета-полів публікації як атрибутів у вашому блоці
Додайте бічну панель блоку за допомогою InspectorControls
Розширте свій плагін, додавши додаткові точки входу до файлу webpack.config

Джерело запису: wholesomecode.ltd