Gutenberg by a developer’s eyes: материалы митапа

Приход весны в латвийской WordPress группе отметили женским митапом. Katya Leurdo сделала доклад на тему «Gutenberg by a developer’s eyes — создание кастомных блоков». Это был второй митап технической серии, начатой в марта 2021 года. В ходе доклада показано создание трёх кастомных блоков Gutenberg, с примерами кода на GitHub. Материалы митапа доступны для скачивания по ссылкам ниже.

Доклад включал в себя рассмотрение настройки сборщика и создание трёх блоков: тестовый блок, аккордеон с одной панелью и блок с вложенными блоками.

Установка сборщика проектов вызывает трудности у начинающих. Доклад описывает этот процесс и даёт ссылку на шаблон плагина, содержащий все необходимые файлы для webpack. Показано, как в автоматическом режиме пересобирать проект при изменении исходных файлов js.

Первый пример тестового блока основан на шаблоне плагина блоков Gutenberg. Дан анализ содержимого файлов шаблона и их предназначение. Полученный текстовый блок в действии показан в административной части сайта и на фронте. Тестовый блок имеет крайне простое содержимое — один параграф.

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

Третий пример идёт дальше в сторону усложнения и показывает реальный кастомный блок — аккордеон со многими панелями. Такой блок реализован через вложенные блоки Gutenberg. Вложенные блоки требуют несколько иного процесса определения и настройки, что подробно освещено с пояснениями по коду.

В ходе доклада получили освещение вопросы, связанные с атрибутами, состоянием (state) и useBlockProps. Докладчик также остановился на вопросе отличия версий API Gutenberg. Недавно, в выходом WordPress 5.6, была выпущена версия 2 API.

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

Скачать презентацию митапа «Gutenberg by a developer’s eyes» можно здесь. Репозиторий демонстрационного плагина находится тут. Запись митапа доступна ниже.