Разработка плагина с магией wp-env, Docker & NodeJS

В этой статье мы рассмотрим современный подход к разработке плагинов WordPress с использованием популярных инструментов разработки: Docker, NodeJS, wp-env.

Введение

Разработка плагинов WordPress становится все более сложной задачей, требующей современных инструментов и подходов. wp-env, Docker и NodeJS предоставляют мощный набор инструментов для создания качественных плагинов.

Мотивация

Очередным зимним утром мне вдруг захотелось разработать еще один плагин. Но ввиду природной особенности мне было лень разворачивать очередной 1001 локальный сайт для разработки.

И вот я натыкаюсь на решение wp-env — которое обещает за 5 минут развернуть локальное окружение для разработки.

Попробовал и да это оказалось то что нужно…

Необходимые инструменты

Для старта надо чтобы у вас были в наличие следующие составляющие:

• Docker Desktop
• Node.js и npm
• IDE — редактор кода (VS Code рекомендуется)
• Git для версионного контроля

Настройка окружения

1. Установка wp-env

wp-env — это официальный инструмент от WordPress для создания локальной среды разработки.

npm -g install @wordpress/env

2. Структура проекта

my-plugin/
  ├── src/
  ├── build/
  ├── package.json
  └── .wp-env.json

Настройка .wp-env.json

Создайте файл .wp-env.json для конфигурации WordPress окружения:

{
  "core": null,
  "port": 8888,
  "testsPort": 8889,
  "plugins": [ 
    "https://downloads.wordpress.org/plugin/query-monitor.3.17.0.zip",
    "." 
  ]
}

Настройка Node.js и сборки

Инициализируйте проект Node.js и установите необходимые зависимости:

npm init
npm install --save-dev @wordpress/scripts

Разработка плагина

Основные шаги разработки:

• Создание основной структуры плагина
• Написание PHP-кода плагина
• Разработка JavaScript компонентов
• Стилизация с помощью SCSS/CSS

Тестирование

Для запуска тестового окружения используйте команды:

wp-env start
wp-env stop
wp-env destroy

Пример

Так был разработан мой первый плагин для расширение блоков WP.

Статья тут https://wpcraft.ru/blog/add-link-option-to-cover-block/

Сам плагин тут https://github.com/aiiddqd/add-url-to-blocks

Теперь чтобы доработать плагин — мне не надо поднимать очередной тяжелый локальный сервер.

Все что мне нужно это выполнить npm init + npm run start — и я сразу получаю окружение для разработки.

Преимущества данного подхода

• Изолированное окружение разработки
• Современный процесс сборки
• Возможность использования новейших технологий
• Простота развертывания

Заключение

Использование wp-env, Docker и NodeJS значительно упрощает процесс разработки плагинов WordPress и делает его более профессиональным. Этот подход позволяет создавать более качественные и поддерживаемые плагины.