WebDevStudios выпускает инструмент создания блочных шаблонов для разработчиков

Во вторник WebDevStudios представила общественности свой инструмент для создания пользовательских блоков . Это форк основного скрипта WordPress, который был выпущен в феврале вместе с Gutenberg 7.4 . Цель состоит в том, чтобы позволить разработчикам плагинов приступить к созданию без утомительной настройки, необходимой для создания даже самого простого блока.

Скрипт доступен в виде пакета npm под названием @ webdevstudios / block . Одним из отличий основного пакета от этого является добавление пользовательских стандартов кодирования CSS, JavaScript и PHP WebDevStudios. Он использует проект WDS Block Starter для создания плагина начального блока. Пакет также включает поддержку Sass, PostCSS, Webpack, Babel и ESLint.

«Одно из основных отличий заключается в том, что для инструмента построения блоков WDS требуется пространство имен PHP, – сказал Майкл Джозеф Панага, бэкэнд-инженер WebDevStudios. «У ядра WP есть –namespace опция в своем инструменте создания лесов, но он используется только как внутреннее пространство имен блока, а не в PHP».

Панага также отметила, что не так просто настроить настройку сборки, когда начинаешь со стартера ядра. «В WDS это как webpack.config.js раз то, что позволяет разработчикам легко делать с ними то, что они хотят», – сказал он.

Этот скрипт предназначен в первую очередь для создания моноблочных плагинов, а не для построения блоков в существующем плагине. В идеале, это будет путь, которым многие разработчики плагинов выберут в долгосрочной перспективе, особенно когда каталог блоков становится более важной частью WordPress.

«Разработка блоков WordPress может быть сложной задачей», – написал Панага в объявлении. «Уже достаточно устрашающе, что вам нужно знать ReactJS, вам также необходимо установить и настроить такие инструменты, как webpack, Babel и ESLint».

Для работы инструмента требуются последние версии Node и npm, которые у большинства разработчиков WordPress уже должны быть в своей среде разработки. Из командной строки разработчикам просто нужно перейти в свою wp-content/pluginsпапку и выполнить следующую команду:

npm init @webdevstudios/block [Namespace]/[BlockName]

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

Пакет включает в себя несколько готовых команд, которые разработчики могут использовать для создания собственного блока:

• npm run start – Автоматически создает и компилирует файлы по мере внесения изменений в разработку.
• npm run build – Создает окончательный код для производства.
• npm run lint:css – Выполняет линтинг CSS-файлов плагина.
• npm run lint:js – Выполняет линтинг файлов JavaScript плагина.
• npm run lint:php – Выполняет линтинг PHP-файлов плагина.

Скрипт прост в использовании даже для начинающего разработчика блоков. После нескольких минут, когда он установил необходимые зависимости и начал процесс сборки, я был готов к работе с моим новым блоком «Tavern Box». Я открыл свой редактор кода, внес несколько косметических изменений и протестировал его в редакторе.

В сообществе WordPress есть несколько инструментов для быстрого запуска процесса создания блоков, поэтому у разработчиков плагинов нет особых причин не изучать новые идеи блоков. Я мог бы даже попробовать свои силы в чем-то более сложном, чем базовая цветная коробка, которую я использовал с этим тестом (не стесняйтесь высказывать некоторые идеи в комментариях).