Как быстро создать стартовую структуру блока Gutenberg? ➤ Node.js ➤ @wordpress/create-blocks

Как быстро создать стартовую структуру блока 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.

Блок Gutenberg в таблице wp_posts Базы данных

Блок в БД выглядит как обычный HTML. На техническом жаргоне это «сериализованный» блок. Обратите внимание на данные JSON в комментариях HTML, «textColor»: «palette-color-1». Это атрибут — свойство, связанное с блоком.

На фронтенде (публичная часть сайта) блок подгружается в готовом виде из БД сайта и это положительно влияет на скорость загрузки страницы.

Но, когда мы открываем запись вместе с блоком в редакторе, то в блоке подгружаются и его атрибуты (выбор цвета, ширина, размер шрифта, отступы, выравнивание и т.д.). WordPress знает эти атрибуты.

Откуда? Все возможные свойства определенного блока прописаны в специальном JS-файле блока. WordPress благодаря этому файлу подгружает графический интерфейс блока, чтобы мы могли настроить свойства блока и отправить новые данные в БД.

Следует отметить, что все это преобразование из сериализованных данных в графический интерфейс — и наоборот — происходит только в редакторе блоков.

Как быстро создать стартовую структуру блока?

Мы рассмотрели, что такое блоки и как они хранятся в БД. Теперь, давайте создадим первый наш стартовый блок.

Для этого нам понадобится javaScript-окружение Node.js.

Сайт проекта 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-адрес страницы с информацией об обновлении плагина

Видеоинструкция: Как создать свой блок?

Как быстро создать стартовую структуру блока Gutenberg? ➤ Node.js ➤ @wordpress/create-blocks

Подпишитесь на канал 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.txt

readme.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 надо знать.

Источники

 
Подписаться
Уведомить о
guest

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии