Начну с того, что сколько себя помню, я всегда игнорировал использование стартовых тем в WordPress, и разрабатывал темы для WordPress с нуля. Возможно это объясняется тем, что количество проектов за промежуток времени у меня всегда было не очень большим, чаще это были супер-крупные или свои проекты, которыми я занимался на протяжении нескольких лет, и поэтому мне не казалось запарным создать каждый файлик вручную и потратить на это на полчаса больше времени.
С блоками для Gutenberg история начала повторяться, ещё в 2019-м успел полностью разобраться в создании блоков Gutenberg и запилить видеокурс по ним и только потом обратил внимание на утилиту @wordpress/create-block (ранее она называлась create-guten-block).
Я решил подробно рассказать вам о ней, потому что она очень лёгкая в освоении и может действительно облегчить вам весь процесс создания блока. Хотя бы как минимум потому, что вам не придётся настраивать сборку проекта.
Создание стартового блока
Прежде всего нам понадобится Node.js и npm версии 5.2 или выше. Команды рекомендую запускать из папки wp-content/plugins, потому что в этом примере подразумеваем, что наш кастомный блок будет в виде плагина. Но он может быть также и частью темы WordPress.
Всего есть два способа работы с командой @wordpress/create-block – в первом мы запускаем её и отвечаем на все вопросы, которые будет задавать нам утилита в командной строке, а во втором – запускаем команду сразу со всеми параметрами и готово.
1-й способ
Тут мы будем указывать параметры блока в командной строки непосредственно в процессе создания блока. Записал для вас пример видео:
По шагам, что происходит на видео:
Перехожу в терминале в папку с плагинами на моём тестовом сайте, который находится в MAMP командой cd.
Чекаю версию npm -v (каждый раз это делать не нужно разумеется).
Запускаю установку блока командой npx @wordpress/create-block
Указываю различные настройки блока.
«Do you want to customize WordPress plugin» – если указать Y (что я и сделал), то тулса попросит указать все метаданные плагина.
Далее запускается установка, нужно минутку подождать.
Когда установка завершиться, в командной строке отобразятся команды для запуска сборки блока. Если коротко, то нужно будет перейти в директорию блока командой cd прежде всего. А потом внутри уже используем либо npm start либо npm run build. Чуть подробнее об этом рассказывал в уроке про Webpack и в уроке про пакеты @wordpress/scripts.
После того, как всё проделали, вы сможете найти новый блок в админке, не забудьте только активировать новый появившийся плагин сначала!
По факту у нас получается изишный блок, который всего-навсего выводит статический текст, но главное не это, главное, что у нас есть заготовка блока Gutenberg с уже настроенной сборкой.
2-й способ
Можно кстати ускорить процесс создания стартового блока, отказавшись от диалога с командной строкой и указав все необходимые параметры сразу же в виде ключей.
misha-super-block.php – основной файл плагина. В нашей ситуации ничего особенного не содержит – только информацию о плагине и функцию регистрации блока register_block_type().
/build – CSS и JS в скомпилированном виде, непосредственно так, как они подключаются в админке.
block.json – содержит метаданные блока.
edit.js – содержит компонент редактирования блока, подробнее в уроке.
editor.scss – стили блока в редакторе.
index.js – тут вы найдёте код регистрации блока функцией registerBlockType(), подробнее про неё в этом видеоуроке.
save.js – содержит компонент сохранения блока, подробнее в видеоуроке.
style.scss – стили блока непосредственно на сайте.