22 Фев
В этом уроке вы узнаете, как создать свой первый блок в Gutenberg. В последние годы прогресс API Gutenberg был значительным. Благодаря @wordpress/create-block стало гораздо проще начать разработку Gutenberg блока. Это руководство «создать блок для gutenberg» написано для самых начинающих, в нем мы рассмотрим самые первые шаги.
Предполагается, что вы установили/настроили и имеете базовые знания по следующим необходимым инструментам и технологиям, перечисленным ниже:
- Версия Node.js минимум 12.0.0 (или выше).
- NPM (менеджер пакетов Node) версии минимум 6.0.0 (или выше).
- Редактор кода (рекомендуется Visual Studio Code).
- Некоторые базовые знания о работе скриптов CLI.
- Некоторые базовые знания о react.js, javascript.
Как создать каркас для вашего блока Гутенберга?
@wordpress/create-block — это официальный инструмент для генерации каркаса, который позволяет быстро генерировать код на Javascript/PHP/CSS со всем, что вам может понадобиться для начала разработки своего собственного блока для Гутенберга. В этом уроке мы будем использовать @wordpress/create-block для создания каркаса. Есть 2 режима, которые вы можете использовать для создания каркаса вашего блока:
- Интерактивный режим (Interactive Mode)
- Быстрый режим (Quick Mode)
Как запустить интерактивный/быстрый режим?
К сожалению, в @wordpress/create-block нет конкретных флагов, которые позволяли бы нам просто указать режим. Рассмотрим следующую команду в качестве примера:
npx @wordpress/create-block [slug]Здесь slug является необязательным параметром, когда он не указывается, @wordpress/create-block запускает интерактивный режим, в противном случае запускается быстрый режим.
Вы можете запустить эти команды в каталоге вашей установки WordPress → wp-content → plugins, чтобы мы могли позже протестировать плагин блоков в WordPress.
Давайте создадим структуру нашего блока с каждым режимом по порядку.
Создать блок для gutenberg в интерактивном режиме
Интерактивный режим позволяет вам настроить свой блок в процессе пошаговой конфигурации. Это может быть очень полезно, если вы новичок в Gutenberg API. Давайте создадим новый блок. Допустим, мы создаем «блок Кнопки».
Создание каркаса может занять несколько минут. Чтобы убедиться, что все прошло правильно, по завершении вы должны увидеть следующее.
После создания каркаса у вас должна появиться новая директория для вашего блока. В нашем случае название блока должно быть «awesome-button-block» (из-за указанного slug).
Создать блок для gutenberg в режиме Quick (быстром)
Задачу, описанную выше, можно выполнить быстрее с помощью дополнительных флагов. Вместо настройки блока пошагово можно задать некоторые флаги в одной команде.
Давайте создадим похожий блок (как мы делали выше), но быстрее.
npx @wordpress/create-block awesome-button-block --title "Awesome Button Block" --short-description "This is an awesome button block" --category "theme"Доступные флаги. Как создать блок для gutenberg
Флаги командной строки — это распространенный способ указать опции для программ командной строки. Вот список флагов, которые можно использовать при создании на основе @wordpress/create-block.
-v или --version | Выводит текущую версию @wordpress/create-block. |
-t <name> или --template <name> | Шаблон проекта, который следует использовать. Доступные значения: «static» (шаблон по умолчанию), «es5«. Помимо этих шаблонов, вы также можете указать имя внешнего пакета npm или путь к локальному каталогу. |
--namespace <name> | Внутреннее пространство имён для блока. |
--title <title> | Название, используемое для блока и плагина WordPress. |
--short-description <description> | Краткое описание, описывающее ваш блок и плагин для WordPress. |
--category <name> | Категория для вашего блока. По умолчанию используется категория «core» и имеется следующие категории: – text – media – design – widgets – theme – embed Кроме этих категорий, вы можете создать свою собственную категорию блоков, но мы рассмотрим это в будущих уроках. |
--wp-scripts | Этот флаг включает интеграцию для пакета @wordpress/scripts. |
--no-wp-scripts | Отключает интеграцию для пакета @wordpress/scripts. |
--wp-env | Включает интеграцию для пакета @wordpress/env, который позволяет легко создавать экземпляр WordPress для тестирования/разработки вашего плагина. |
Иерархия файлов
Если вы создали каркас блока, откройте недавно созданную директорию в редакторе кода. Такова структура плагина блока.
/build
/node_modules
/src
block.json
edit.js
editor.scss
index.js
save.js
style.scss
.editorconfig
.gitignore
awesome-button-block.php
package-lock.json
package.json
readme.txt/build
Директория /build содержит все скомпилированные ассеты. Например, здесь находится скомпилированный CSS-код из ваших файлов SCSS (препроцессор CSS, обычно используемый в блоках Gutenberg для стилизации).
/node_modules
Директория node_modules — это место, где хранятся все зависимости Node. Рекомендуется исключить эту директорию из любых репозиториев Git.
/src
Каталог с файлами блока с которыми вам придется работать для добавления функционала и верстки.
block.json
Этот файл JSON включает базовую мета-информацию о блоке. Вот некоторые преимущества использования block.json:
- Условная загрузка: ресурсы frontend для блока будут загружаться только тогда, когда будет использоваться определенный блок.
- Ленивая загрузка: когда тема поддерживает ленивую загрузку ресурсов, регистрируемые блоки с помощью block.json будут иметь оптимизированную автоматически загрузку своих ресурсов.
- Обмен кодом: block.json упрощает обмен кодом между разными языками, такими как PHP, JavaScript, что приводит к более организованному и лучшему решению.
edit.js и save.js
Файл edit.js содержит компонент edit, который определяет поведение блока в редакторе Gutenberg.
Файл save.js содержит компонент save, который определяет, как блок должен отображаться на фронтенде.
index.js, editor.scss и style.scss
index.js — здесь происходит регистрация блока в клиентском API Gutenberg.
editor.scss — файл стилей, который будет подключен/применен в редакторе Gutenberg.
style.scss — файл стилей, который будет подключен/применен на фронтенде (только когда используется блок).
Остальные файлы. Создать блок для gutenberg
Файл .gitignore может использоваться для указания файлов, которые нужно игнорировать при сохранении проекта в систему контроля версий Git.
.editorConfig помогает поддерживать согласованный стиль кодирования для нескольких разработчиков.
readme.txt включает основное описание плагина, используемое WordPress для отображения информации о плагине.
awesome-button-block.php Основной файл плагина на PHP. На данный момент он должен содержать только регистрацию серверной части блока.
Файл package.json — это файл в формате JSON, используемый Node.js для отслеживания зависимостей проекта для управления и запуска проекта. Он указывает зависимости, необходимые для сборки проекта на Node.js и часто используется для управления зависимостями проекта. Обычно файл находится в корневой директории проекта.
package-lock.json — этот файл генерируется автоматически при любых операциях, при которых npm изменяет node_modules или package.json. Этот файл позволяет пользователям зафиксировать зависимости на конкретную версию, что снижает риск нарушения работы кода при обновлении пакетов npm.
Тестирование блока
Теперь, когда мы рассмотрели, как создать каркас блока Гутенберга и дали некоторое общее представление, давайте протестируем, как блок выглядит в редакторе Гутенберга и на фронтенде.
Тестирование блока в редакторе Gutenberg
Вот как вы можете вставить блок в редактор Gutenberg.
Если вы задаетесь вопросом, почему в блоке написано «Awesome Button Block — hello from the editor!», то это содержание генерируется автоматически скриптом создания каркаса (@wordpress/create-block).
Тестирование блока Gutenberg на веб-странице
Теперь давайте протестируем, как блок в настоящее время отображается на фронтенде. Чтобы протестировать блок на фронтенде, сначала сохраните пост, как показано ниже.
После сохранения, посетите только что созданный пост
Вот как блок должен выглядеть на фронтенде в данный момент:
Заключение. Создать блок для gutenberg
Это был простой пример как генерировать структуру для блока под Gutenberg. В следующих уроках мы научимся создавать блоки с функционалом и настройками. Уроки по разработке блоков Gutenberg вы всегда найдете на Genius Courses.
