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

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

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

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

Advanced Custom Fields PRO

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

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

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

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

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

Block Lab

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

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

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

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

  • После установки и активации плагина в панели администрирования WordPress перейдите в меню Block Lab> Добавить новый, чтобы создать новый блок.
  • Начнем с добавления заголовка(панели уведомлений) и трех полей ввода:
  1. Цвет фона – поле ввода выбора цвета фона для панели уведомлений.
  2. Цвет текста — ещё одно поле ввода цвета, на этот раз для текста. Оно также будет выводиться в инспекторе блока.
  3. Сообщение – текстовое поле ввода, в котором будет выводиться пользовательское сообщение. Это поле ввода будет размещено в редакторе Gutenberg.
Создание в WordPress пользовательских блоков Gutenberg без JavaScript

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

  • После параметра полей ввода нажмите кнопку « Опубликовать», чтобы сохранить созданный блок. После чего появится сообщение с URL, по которому надо разместить шаблон в используемой теме оформления:
/wp-content/themes/YOURTHEME/blocks/block-notification-bar.php
Создание в WordPress пользовательских блоков Gutenberg без JavaScript
  • Далее необходимо создать шаблон блока. Для этого в любом редакторе кода создайте файл 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 пользовательских блоков Gutenberg без JavaScript
Создание в WordPress пользовательских блоков Gutenberg без JavaScript

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

Что дальше?

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *