Создание в WordPress пользовательских блоков Gutenberg без JavaScript

Gutenberg разбивает содержимое поста на блоки, которые можно легко менять местами. По умолчанию WordPress поставляется с большим набором элементов. Но он также позволяет пользователю создавать собственные блоки. В этой статье мы познакомимся с некоторыми из инструментов, которые позволяют сделать это.

Пользовательские блоки Gutenberg: инструменты

Каждый из плагинов WordPress, рассматриваемый в этой статье, использует произвольные поля. Их использование обеспечивают гибкость относительно типов контента, который можно создавать.

Advanced Custom Fields PRO

Коммерческая PRO-версия этого плагина (стоимость которой начинается от 49$ в год) позволяет создавать пользовательские блоки для редактора Gutenberg. Функционал блоков ACF позволяет разработчикам создавать уникальный набор полей и назначать его для пользовательского блока.

Этот бесплатный плагин включает в себя сразу несколько пользовательских типов полей (называемых «элементами управления») для блока. Также есть API, предназначенный для создания пользовательских элементов управления.

Плагин также позволяет ограничить размещение блоков определенным типов записей, импортировать данные через JSON и включает в себя пользовательские шаблоны.

Block Lab

В плагине Block Lab создание пользовательских блоков происходит в несколько этапов. Сначала вы добавляете блок в панели администрирования WordPress. Затем нужный набор произвольных полей и настраиваете различные параметры. После чего создайте шаблон блока для темы оформления и задаете его стили.

Создание простого пользовательского блока с помощью плагина Block Lab

Для простоты мы рассмотрим создание блока уведомлений с помощью плагина Block Lab. Его можно использовать для отображения важной информации посетителям сайта. Для этого:

• После установки и активации плагина в панели администрирования WordPress перейдите в меню Block Lab> Добавить новый,чтобы создать новый блок.
• Начнем с добавления заголовка (панели уведомлений) и трех полей:

1. Цвет фона – поле выбора цвета фона для панели уведомлений.
2. Цвет текста - еще одно поле цвета, на этот раз для текста. Оно также будет отображаться в инспекторе блока.
3. Сообщение – текстовое поле, в котором будет отображаться пользовательское сообщение. Это поле будет размещено в редакторе Gutenberg.

Используемый нами плагин позволяет выбирать пользовательскую иконку и классифицировать создаваемый блок. Это поможет найти его, когда нужно будет добавить его на страницу сайта.

• После настройки полей нажмите кнопку «Опубликовать», чтобы сохранить созданный блок. После чего появится сообщение с URL, по которому необходимо разместить шаблон в используемой теме оформления:

/wp-content/themes/YOURTHEME/blocks/block-notification-bar.php

• Далее нужно создать шаблон блока. Для этого в любом редакторе кода создайте файл block-notification-bar.php и сохраните его в новой папке /blocks/ в каталоге используемой темы оформления.

Шаблоны блоков должны быть написаны с нуля. Плагин Block Lab предоставляетдокументацию по их созданию.

В данном случае есть только два типа блоков: Color (background-color; text-color) и Text (message). Добавим приведенный ниже код в шаблон пользовательского блока:

<div style="margin:30px auto; padding:5px 10px; background:<?php block_field( 'background-color' ); // Цвет фона (Поле цвета) ?>">

    <span style="color:<?php block_field( 'text-color' ); // Text Color (Color Field) ?>"><?php block_field( 'message' ); // Сообщение (Поле текста) ?></span>
    
</div>

Сохраните файл и загрузите его на свой сервер.

• Пользовательский блок уже создан. Теперь можно добавить его на страницу сайта.

• После этого на сайте отобразится панель уведомлений, которая обязательно привлечет внимание пользователя.

Что дальше?

Теперь, когда мы рассмотрели процесс создания пользовательских блоков, пришло время поэкспериментировать! Установите один из плагинов, описанных в этой статье, и улучшите свой WordPress-сайт.

Пожалуйста, оставьте свои отзывы по текущей теме материала. Мы очень благодарим вас за ваши комментарии, отклики, лайки, подписки, дизлайки!