Как быстро создать стартовую структуру блока Gutenberg? ➤ Node.js ➤ @wordpress/create-blocks
В этой статье я объясню вам как можно быстро создать готовую структуру блока Gutenberg для дальнейшей его разработки. Это ускоряет нашу работу и освобождает нас от рутины создания необходимых файлов. Данная статья знакомит читателя с общими принципами создания блоков с помощью кода и рассчитана на новичков. В конце статьи вы найдете ссылки на источники и рекомендуемые материалы для самостоятельного изучения.
На своем компьютере я использую следующий комплекс программного обеспечения:
- Windows 10 x64
- Локальный WEB-сервер Local (или Laragon)
- Node.js — JavaScript-окружение
- Visual Studio Code или терминал
- Команда: npx @wordpress/create-block
Есть и др. способы создания своих кастомных блоков. Например, с помощью плагина ACF или специальных плагинов, которые позволяют создавать блоки без знаний языков программирования. На своем сайте и Youtube-канале я планирую их всех разобрать и изучить.
Если у вас не стоит задача создавать свои блоки, но вам интересно создание сайта на блоках Gutenberg, то тогда я рекомендую вам использовать плагины с набором готовых блоков. Ничего не нужно создавать и программировать. Название этих плагинов указаны ниже.
Перед тем, как мы рассмотрим вопрос создания структуры блока мы немножко поговорим о том, что такое блок для редактора Gutenberg и для чего его используют.
Что такое блоки для редактора Gutenberg?
Блоки — это объект с определенными свойствами (атрибутами), который представляет определенный контент на странице.
Блок позволяет визуально оформлять в редакторе определенный контент. Например, мы можем вывести в содержимом статьи цитату, профиль сотрудника, призыв к действию и т.д. Все что нам нужно сделать это заполнить специальные поля, которые предоставляет блок, выбрать цвет оформления, выравнивание и параметры шрифта. Конечно, у каждого блока есть свои свойства и возможности. Блоки позволяют красиво оформить содержимое статьи или страницы, разнообрать форму подачи контента и заинтересовать читателя содержимым.
В каждой современной установке WordPress на борту уже присутствует набор готовых блоков для оформления контента. Эти блоки доступны для использования когда мы создаем/редактируем страницу, запись или добавляем виджеты в сайдбар.
1 — панель с блоками
2 — область редактирования контента
3 — настройки страницы / свойства блока
Блоки могут использоваться не только в статье или на странице. Их можно вставить на страницу товара, в сайдбар, в шапку или футер сайта. Т.е. в любом месте сайта, где они поддерживаются темой.
Блок — это плагин
Технически блок — это плагин. Блок может быть представлен как отдельный плагин, или в плагине может быть несколько блоков. Блок(и) может быть частью темы WordPress. Но, блоки создаются и функционируют как плагины. Поэтому, чтобы создавать свои блоки нужно иметь представление о создании плагинов.
Например, плагины Kadence Blocks, Qubely и Stackable предлагают набор готовых блоков и макетов для визуального оформления контента в редакторе Gutenberg. Установив один из таких плагинов вы сможете более эффектно и стильно представить свой контент, чем если бы вы пользовались блоками по умолчанию.
Где хранится блок и его данные?
Представление блока, после того как мы нажали на кнопку опубликовать/обновить запись хранится в самой записи/странице в которую мы его вставили, т.е. в БД. А точнее, в таблице wp_posts, в поле post_content.
Блок в БД выглядит как обычный HTML. На техническом жаргоне это «сериализованный» блок. Обратите внимание на данные JSON в комментариях HTML, «textColor»: «palette-color-1». Это атрибут — свойство, связанное с блоком.
На фронтенде (публичная часть сайта) блок подгружается в готовом виде из БД сайта и это положительно влияет на скорость загрузки страницы.
Но, когда мы открываем запись вместе с блоком в редакторе, то в блоке подгружаются и его атрибуты (выбор цвета, ширина, размер шрифта, отступы, выравнивание и т.д.). WordPress знает эти атрибуты.
Откуда? Все возможные свойства определенного блока прописаны в специальном JS-файле блока. WordPress благодаря этому файлу подгружает графический интерфейс блока, чтобы мы могли настроить свойства блока и отправить новые данные в БД.
Следует отметить, что все это преобразование из сериализованных данных в графический интерфейс — и наоборот — происходит только в редакторе блоков.
Как быстро создать стартовую структуру блока?
Мы рассмотрели, что такое блоки и как они хранятся в БД. Теперь, давайте создадим первый наш стартовый блок.
Для этого нам понадобится javaScript-окружение Node.js.
Это даст вам доступ к командам npm и npx, где npm устанавливает зависимости вашего блока и помогает компилировать материал, а npx запускает команды для пакетов без их установки. Если вы используете macOS, вероятно, у вас уже есть Node и вы можете использовать команду nvm. Если вы работаете в Windows, вам необходимо загрузить и установить Node (ссылка ниже).
Переходим в папку с нашим проектом. Например, в папку локального сайта, в папку с плагинами и с помощью командной строки/терминала, или терминала в Visual Studio Code запускаем следующую команду:
npx @wordpress/create-blockЭтот пакет создает полностью сформированную папку проекта со всеми зависимостями и инструментами, необходимыми для начала разработки.
В терминале, во время создания проекта мы указываем информацию о нашем блоке или оставляем информацию по умолчанию (эту информацию всегда можно изменить позже):
- slug блока
- пространство имен блока
- название блока
- краткое описание блока
- иконка блока
- категория блока
При желании, мы также можем указать информацию о плагине. Если вы планируете пушить плагин на GitHub, или выложить плагин в официальном каталоге WordPress-плагинов, то указание такой информации является обязательным (особенно, во втором случае).
На вопрос: Do you want to customize the WordPress plugin? (y/N)
Отвечаем: y
И дальше, пошагово отвечаем на вопросы установщика:
- URL-адрес страницы плагина
- текущая версия плагина
- автор плагина
- краткое описание лицензии, по которой распространяется ваш плагин
- URL-адрес страницы с полным текстом лицензии
- текстовый домен для создания локализации
- URL-адрес страницы с информацией об обновлении плагина
Видеоинструкция: Как создать свой блок?
➤ Підпишіться на Youtube-канал InwebPress!
Описание структуры проекта
Как результат, мы получим следующую структуру папок и файлов проекта:
block-example/
├── build
├── node_modules
├── src/
│ ├── block.json
│ ├── edit.js
│ ├── editor.scss
│ ├── index.js
│ ├── save.js
│ └── style.scss
├── .editorconfig
├── .gitignore
├── block-example.php
├── package-lock.json
├── package.json
└── readme.txtreadme.txt — описание плагина и предоставление дополнительных сведений об использовании и установке. Этот файл помогает заполнить страницу плагина в каталоге плагинов на wordpress.org. Если вы планируете создать репозиторий GitHub для своего блочного плагина, вы также можете подумать о создании файла README.md с аналогичной информацией.
plugin.php — это основной файл плагина.
Остальные файлы либо предоставляют информацию, либо используются для управления средой разработки.
package.json — определяет пакеты Node, необходимые для разработки. Аналог файла composer.json.
/build — в папке находятся скомпилированные ресурсы при обработке файлов.
/node_modules — содержит все зависимости разработки, которые мы установили при запуске npm install.
/src — эта папка содержит исходный код плагина, который компилируется и отправляется в папку build.
.editorconfig — содержит конфигурации для адаптации вашего редактора кода к согласованности кода.
.gitignore — это стандартный файл репо, определяющий локальные файлы, которые следует исключить из отслеживания контроля версий. Папка node_modules обязательно должна быть включена сюда.
package-lock.json — это автоматически сгенерированный файл, который отслеживает наличие обновлений необходимых пакетов, которые мы установили с помощью npm install.
Активация плагина и вставка блока
После создания проекта и размещения его папки на сайте, в разделе /wp-content/plugins/ в админке, в разделе Плагины появится новый плагин. Например:
Как и любой другой плагин его необходимо активировать. После этого наш кастомный блок станет доступным в редакторе для вставки в контент. Оформление блока представляет из себя простой текст в белом цвете на синем фоне. У блока отсутствуют атрибуты.
Открываем любую страницу для редактирования. Слева вверху нажимаем на иконку «+», чтобы открыть панель с блоками. Вставляем блок на страницу:
Что дальше?
Дальше мы можем добавить для нашего блока необходимые свойства и указать классы CSS для визуального оформления блока на сайте и в редакторе.
Для создания своих кастомных блоков с помощью кода вам необходимо разбираться в следующем стеке языков: HTML + CSS + PHP + JS (React — JavaScript-библиотека). Если JS вас пугает и вы не готовы сразу с ним работать, то есть специальный сервис, который преобразует код HTML в JS.
В следующей статье мы разберем способ создания кастомных блоков для Gutenberg с помощью специального плагина. Этот вариант намного упрощает создание своего блока, но HTML и CSS надо знать.
Источники
Читайте также
