Создание блока Gutenberg @wordpress/create-block

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

С блоками для Gutenberg история начала повторяться, ещё в 2019-м успел полностью разобраться в создании блоков Gutenberg и запилить видеокурс по ним и только потом обратил внимание на утилиту @wordpress/create-block (ранее она называлась create-guten-block).

Я решил подробно рассказать вам о ней, потому что она очень лёгкая в освоении и может действительно облегчить вам весь процесс создания блока. Хотя бы как минимум потому, что вам не придётся настраивать сборку проекта.

Создание стартового блока

Прежде всего нам понадобится Node.js и npm версии 5.2 или выше. Команды рекомендую запускать из папки wp-content/plugins, потому что в этом примере подразумеваем, что наш кастомный блок будет в виде плагина. Но он может быть также и частью темы WordPress.

1. Переходим в папку плагинов командой cd.
2. Проверяем текущую версию npm командой npm -v.

Подробнее про работу с командной строкой есть в уроке про настройку Webpack и про WP CLI.

Всего есть два способа работы с командой @wordpress/create-block – в первом мы запускаем её и отвечаем на все вопросы, которые будет задавать нам утилита в командной строке, а во втором – запускаем команду сразу со всеми параметрами и готово.

1-й способ

Тут мы будем указывать параметры блока в командной строки непосредственно в процессе создания блока. Записал для вас пример видео:

По шагам, что происходит на видео:

1. Перехожу в терминале в папку с плагинами на моём тестовом сайте, который находится в MAMP командой cd.
2. Чекаю версию npm -v (каждый раз это делать не нужно разумеется).
3. Запускаю установку блока командой npx @wordpress/create-block
4. Указываю различные настройки блока.
5. «Do you want to customize WordPress plugin» – если указать Y (что я и сделал), то тулса попросит указать все метаданные плагина.
6. Далее запускается установка, нужно минутку подождать.
7. Когда установка завершиться, в командной строке отобразятся команды для запуска сборки блока. Если коротко, то нужно будет перейти в директорию блока командой cd прежде всего. А потом внутри уже используем либо npm start либо npm run build. Чуть подробнее об этом рассказывал в уроке про Webpack и в уроке про пакеты @wordpress/scripts.

После того, как всё проделали, вы сможете найти новый блок в админке, не забудьте только активировать новый появившийся плагин сначала!

По факту у нас получается изишный блок, который всего-навсего выводит статический текст, но главное не это, главное, что у нас есть заготовка блока Gutenberg с уже настроенной сборкой.

2-й способ

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

Например:

npx @wordpress/create-block misha-super-block --title "Misha Super Block" --short-description "Какое-то описание" --category "theme"

Параметры, которые я использовал в команде выше:

Файловая структура

Если вы перейдёте в папку wp-content/plugins и найдёте наш плагин блока там, то его файловая структура будет следующей:

/build
/node_modules
/src
   block.json
   edit.js
   editor.scss
   index.js
   save.js
   style.scss
.editorconfig
.gitignore
misha-super-block.php
package-lock.json
package.json
readme.txt

• misha-super-block.php – основной файл плагина. В нашей ситуации ничего особенного не содержит – только информацию о плагине и функцию регистрации блока register_block_type().
• /build – CSS и JS в скомпилированном виде, непосредственно так, как они подключаются в админке.
• block.json – содержит метаданные блока.
• edit.js – содержит компонент редактирования блока, подробнее в уроке.
• editor.scss – стили блока в редакторе.
• index.js – тут вы найдёте код регистрации блока функцией registerBlockType(), подробнее про неё в этом видеоуроке.
• save.js – содержит компонент сохранения блока, подробнее в видеоуроке.
• style.scss – стили блока непосредственно на сайте.