Совершая скачок: создание моего первого блочного плагина WordPress

Как и большинство лет, я провел этот День независимости США взаперти с моими пушистыми друзьями. Я закрыл все окна, задвинул ставни, включил пару вентиляторов для белого шума и включил телевизор. Мы с кошками расслабились. Моя работа – сохранять их спокойствие, пока мои соотечественники сжигают сотни долларов в ночном небе. Это мой ритуал, и мне он нравится.

К этому празднику мы пересмотрели 1-й сезон Star Trek: Lower Decks , и я научился создавать плагин для блоков.

Это была не первая моя попытка. Когда почти три года назад был запущен редактор блоков, я возился с несколькими идеями типа блока. Однако далеко я не ушел. Документация была скудной, и у меня почти не было опыта работы с JavaScript, кроме создания тривиальных наворотов для интерфейсного дизайна.

Оставив мою дневную работу разработчика, чтобы писать для WP Tavern, также было ограничено время для изучения разработки блоков. И мое свободное время последние пару лет было заполнено другими проектами. В последнее время у меня возникло желание вернуться и снова начать создавать что-то для удовольствия. Мой продолжительный творческий отпуск после работы в области развития дал мне время заняться другими интересами, в то же время позволив моему творческому колодцу пополниться. Перерыв пошёл мне на пользу.

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

Плагин Marcus Kazmierczak Copyright Block помог мне преодолеть одну из первых проблем. Было полезно увидеть реальный, не являющийся примерами код, написанный на обычном JavaScript, чтобы понять, как работает система.

Мои общие мысли о создании нестандартных типов блоков?

Это было проще, чем я думал. Документация одновременно и огромна, и ограничивает. Трудно найти правильный ответ, если вы даже не знаете, что ищете. Барьер для входа намного выше, чем когда я создал свой первый плагин в 2007 году. API типа блока делает некоторые вещи до глупости простыми, но усложняет другие.

Успешная вставка моего первого типа блока в холст редактора меня порадовала. Я не думаю, что это чувство когда-нибудь исчезнет у разработчика.

Я взволнован возможностью появления блоков, таких как список хлебных крошек, при запуске редактора сайта. Многие подобные функции не имеют смысла в редакторе сообщений. Однако, когда пользователи могут напрямую редактировать свои шаблоны, это откроет целый мир возможностей.

Кривая обучения

Я знаю достаточно JavaScript, чтобы представлять опасность для себя и других. Провести почти всю свою профессиональную карьеру в сфере WordPress означало сосредоточиться на PHP. Но программирование есть программирование. Как только вы хорошо понимаете один язык, вам не составит труда повозиться достаточно, чтобы создать функциональный сценарий на другом. Там почти все те же основополагающие концепции. Часто возникает проблема с изучением нового синтаксиса.

Однако самым большим препятствием для «современного» JavaScript является настройка инструментов сборки, сборщиков и прочего. Даже напечатать первую строчку кода может оказаться непростой задачей.

Конечно, в некоторой документации есть ванильные примеры JavaScript, но когда вы входите в что-то более сложное, чем основы, это уже не так ванильно. Вам понадобится способ связать JavaScript и преобразовать синтаксис JSX. Это означает такие инструменты, как webpack и Babel.

В WordPress есть собственный скрипт для преодоления большей части сложности, но я рекомендую Laravel Mix . Он достаточно прост даже для самых неискушенных программистов на JavaScript среди нас и содержит подробную документацию. Это сценарий, созданный для людей, которые хотят меньше беспокоиться об инструментах и ​​больше о написании кода.

Блок-билдинг – это тоже прыжок разного рода. Будь то пользовательские теги шаблонов, шорткоды, виджеты или хуки, традиционная разработка WordPress означала создание их в среде PHP. Я подозреваю, что у большинства разработчиков плагинов есть множество функций, которые они могут донести до масс через редактор блоков. Они часто полагаются на рендеринг на стороне сервера. В WordPress есть ServerSideRenderкомпонент для решения этой проблемы.

Одной из самых удобных функций регистрации типов блоков является система «поддержки» блоков . Хотите вариант цвета фона? Достаточно одной строчки кода. Хотите, чтобы пользователь получил доступ к элементу управления размером шрифта? Это тоже одна строка. С небольшими усилиями я расширил свой блок хлебных крошек, включив в него массу вариантов стилей для пользователей. И они адаптируются к активной теме сайта.

Список поддерживаемых блоками функций предлагает множество стандартизованных опций практически без затрат на разработку. Даже Customize API, который раньше был наиболее продвинутым инструментом для создания полей форм, не подошел так близко.

Создание настраиваемых элементов управления инспектором оказалось несложным, как только я понял, как работает элемент головоломки для редактирования блоков. На данный момент у меня есть простой вариант переключения для включения / отключения функции. Часто самое сложное – просто найти то, что вы ищете. WordPress имеет огромную библиотеку компонентов на выбор.

На данный момент у меня есть базовый блок на стороне клиента (редактора). Большая часть сложности обрабатывается на сервере через PHP. Если бы я мог построить это за полдень, ухаживая за нервными кошками, это не должно было стать преградой для большего числа авторов плагинов, чтобы сесть в этот поезд. Существуют тысячи шорткодов и виджетов, которые разработчики могут преобразовать в блоки с минимальным кодом.

Я еще не готов выпустить свой блок панировочных сухарей в дикую природу. Осталось сделать еще некоторую тонкую настройку и реализовать несколько дополнительных функций. Кроме того, список хлебных крошек в первую очередь необходим в контексте редактора сайта, где пользователи могут поместить его во что-то вроде своего шаблона заголовка. Мы еще не достигли этого, но я, несомненно, поделюсь окончательным результатом с сообществом, когда мы будем.

Далее я попытаюсь создать блок, который не полагается на рендеринг на стороне сервера. Я думаю, что теперь у меня есть навык. Преодоление этого начального барьера – всегда самый трудный шаг.