Как создать простой плагин Gutenberg Block

Разве мы все не любим WordPress? Платформа пользовалась огромным успехом с момента своего создания, и разработчики постоянно добавляли новые функции. Одной из самых примечательных особенностей последнего времени является редактор блоков WordPress под кодовым названием Gutenberg .

Gutenberg предлагает пользователям WordPress новый захватывающий способ публикации контента и настройки вашего сайта. Он невероятно прост в использовании, что является отличной новостью как для новичков, так и для разработчиков. Если вы используете последнюю версию WordPress, вы уже знакомы с редактором блоков и концепцией блоков.

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

Тем не менее, у вас может быть особая потребность, которая побуждает вас создавать собственные пользовательские блоки. Вот где начинается сегодняшний пост. За пару абзацев вы точно узнаете, как создавать собственные блоки Гутенберга в соответствии с вашими конкретными потребностями.

Без дальнейших церемоний, давайте начнем, так как есть чему поучиться.

Что такое блоки?

Если вы идеальный новичок, вам, вероятно, интересно, что это за бизнес Гутенберга. Я знаю, я был очень сбит с толку, когда представили Гутенберга. Но никто не виноват, мы все привыкли к классическому редактору, что делать сдвиг поначалу было неудобно.

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

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

В прошлом пользователи WordPress полагались на текст произвольной формы и шорткоды для добавления контента. Гутенберг использует блоки . Новый редактор позволяет использовать единицы блоков для создания богатых и гибких макетов, которыми легко управлять. В настоящее время вы можете использовать редактор блоков для постов и страниц, но в будущем есть активные планы по поддержке полного редактирования сайта.

Редактор Гутенберга показывает некоторые блоки

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

Так же, как конструктор страниц, встроенный непосредственно в WordPress.

Если вы знакомы с визуальными конструкторами страниц, такими как Elementor, вы, вероятно, знакомы с концепцией создания страниц с помощью перетаскивания. Gutenberg — это попытка полностью внедрить создание сайтов с помощью перетаскивания в ядро ​​WordPress. Не стесняйтесь ознакомиться с нашим пошаговым руководством по Gutenberg Builder для WordPress, чтобы узнать больше.

С этим покончено, давайте перейдем к лучшей части сегодняшнего поста. Давайте узнаем, как создать простой блок. Вы можете сделать это вручную или с помощью таких плагинов, как Genesis Custom Blocks (ранее BlockLab), Lazy Blocks или ACF. Создание пользовательских блоков немного технически сложно, поэтому для целей сегодняшнего поста мы будем использовать плагин.

Как создать пользовательский блок (используя пользовательские блоки Genesis)

Использовать плагин проще, поскольку для создания пользовательских блоков Gutenberg с нуля требуется хорошее знание HTML, CSS, PHP и, что более важно, JavaScript. Вам также нужно будет понять React, который ставит новичков в затруднительное положение.

В следующем разделе мы будем использовать пользовательские блоки Genesis, предоставленные вам StudioPress и WPEngine, а также другими разработчиками. Бесплатная версия Genesis Custom Blocks доступна в официальном репозитории WordPress, что означает, что мы можем установить ее в панели администратора WordPress.

Установите пользовательские блоки Genesis

Войдите в панель администратора WordPress и перейдите в «Плагины» > «Добавить новый », как показано ниже.

Затем введите «Пользовательские блоки Genesis» в поле поиска по ключевому слову и нажмите кнопку « Установить сейчас» :

После этого активируйте плагин, чтобы начать вечеринку.

у тебя все хорошо

Далее давайте создадим новый пользовательский блок. В целях иллюстрации давайте создадим собственный призыв к действию (CTA), который мы будем добавлять в конце каждого публикуемого нами сообщения. Самое приятное то, что вы можете повторно использовать блоки, чтобы избавить вас от необходимости создавать одни и те же блоки снова и снова.

В меню администратора WordPress перейдите в раздел «Пользовательские блоки» > «Добавить новый », как показано ниже.

Это приведет вас на следующую страницу, где вы найдете все параметры для создания нашего пользовательского блока (в нашем случае CTA):

Вот несколько слов, чтобы объяснить, что вы видите на скриншоте выше. Начиная сверху, у вас есть.

Основная область редактирования:

• Builder — вы, вероятно, потратите здесь много времени на разработку своего пользовательского блока. Конструктор позволяет добавлять заголовок, поля, ярлык, ключевые слова, категорию и предварительно просматривать свой пользовательский блок. Вы узнаете, как добавлять поля.
• Редактор шаблонов . После создания пользовательского блока (то есть добавления различных полей) вам нужно будет создать шаблон блока (читай, добавить немного кода) в редакторе шаблонов . Мы узнаем больше, когда будем разрабатывать CTA.
• Предварительный просмотр в редакторе — это позволяет вам просмотреть пользовательский блок в редакторе блоков WordPress.
• Front-end Preview — здесь вы можете просмотреть, как пользовательский блок выглядит на вашем сайте.
• Поля редактора — будут отображать поля в основной области редактирования сообщения или страницы (вы знаете, точно так же, как вы видите свои обычные сообщения в редакторе WordPress).
• Инспектор полей — поле будет отображаться на правой боковой панели под инспектором блоков.

Параметры боковой панели

• Слаг — Слаг автоматически заполняется на основе заголовка, который вы даете своему пользовательскому блоку. Это важно при создании шаблона блока.
• Значок — эта опция позволяет добавить значок к вашему пользовательскому блоку.
• Категория — позволяет назначить категорию пользовательскому блоку. Вы можете классифицировать свой пользовательский блок, используя одну из встроенных категорий, или вы можете создать совершенно новую категорию.
• Ключевые слова — добавьте не более трех ключевых слов, связанных с вашим пользовательским блоком, чтобы люди могли легко найти его в селекторе блоков.
• Открывать поля блока в модальном окне вместо рендеринга на месте — включите, если хотите открывать поля в модальном окне. Это полезно, если у вас есть пользовательский блок с большим количеством полей.
• Типы сообщений — установите флажки, чтобы ваш пользовательский блок отображался для каждого типа сообщений. Например, если вы снимите флажок «Сообщения», блокировка вообще не будет отображаться ни в одном сообщении.

Создание пользовательского блока

Теперь, когда вы лучше понимаете пользовательский интерфейс и то, что делает каждая его часть, давайте засучим рукава и приступим к работе.

В Конструкторе дайте своему пользовательскому блоку подходящее название. Я использую CTA для этого, как показано ниже.

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

Этот набор, давайте добавим несколько полей в наш пользовательский блок. Для нашего примера блока CTA мы добавим всего три поля в следующем порядке: изображение, некоторый текст и поле файла, которое позволяет людям загружать воображаемую электронную книгу.

Добавление полей блока

В разделе « Поля редактора » щелкните значок « Плюс» (+) , чтобы добавить первое поле, как показано ниже.

Далее давайте добавим поле изображения. На боковой панели установите тип поля на изображение и определите другие параметры. Также обратите внимание на слаг (я установил для себя значение image-field ), потому что мы будем использовать его при создании шаблона блока. См. изображение ниже.

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

Не празднуй пока, остался один шаг. Перейдите в Редактор шаблонов > Разметка:

У меня уже есть какой-то код, но у вас будет пусто

Здесь мы разработаем, как ваш пользовательский блок будет выглядеть на вашем сайте. Редактор шаблонов принимает HTML, CSS и слаги полей (которые необходимо заключить в 2 скобки). Если вам нужно использовать PHP, вы можете создать шаблон, используя метод шаблонов PHP.

Не волнуйтесь, это легко.

В редакторе шаблонов на вкладке « Разметка » (см. изображение выше) добавьте следующий фрагмент HTML-разметки (код):

 <div class="cta-блок">
<div class="cta-изображение">
<img src ="{{поле изображения}}">
</div>
<div class="текст-загрузка">
<h2>{{текстовое поле}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Загрузить</button></a>
</div>
</div>

Когда вы пишете HTML-разметку, вы заметите, что Редактор шаблонов автоматически заполняет слаги полей (например, {{image-field}} ) за вас.

Затем перейдите в раздел CSS , чтобы добавить несколько простых стилей.

Вы можете добавить желаемые стили, но это то, с чем я работаю:

 .cta-блок {
выравнивание текста: по центру;
цвет фона: оранжевый;
ширина:100%;
высота:авто;
граница: 2 пикселя сплошного оранжевого цвета;
}

.dwnld {
цвет фона: черный;
граница: 2px сплошной черный;
цвет: зеленый;
отступ: 5px 10px;
выравнивание текста: по центру;
отображение: встроенный блок;
размер шрифта: 20px;
поля: 10px 30px;
курсор: указатель;
радиус границы: 2px;

}

И все готово! Нажмите Опубликовать :

Чтобы увидеть свой новый пользовательский блок в действии, вернитесь в панель администратора WordPress и перейдите в « Сообщения» > «Добавить новый» (это также работает со страницами):

Создайте публикацию, как обычно, нажмите « Плюс» (+) , чтобы добавить новый блок, и выберите свой новый блестящий настраиваемый блок, как показано ниже.

Затем заполните свой пользовательский блок по желанию и опубликуйте свой пост:

Теперь, если я проверю свой новый пользовательский блок CTA во внешнем интерфейсе, я увижу это:

Мой пользовательский призыв к действию прямо здесь! Пожалуйста, не обращайте внимания на мои дизайнерские способности — конечно, в реальном сценарии вам захочется потратить дополнительное время на стилизацию своего блока. Но я надеюсь, что сегодня вы чему-то научились.

Создание пользовательских блоков не должно быть сложной задачей с такими инструментами, как Genesis Custom Blocks и Lazy Blocks, среди прочих. Кроме того, вы можете сделать свои пользовательские блоки сложными или простыми в зависимости от ваших потребностей. Если вам необходимо создавать пользовательские блоки вручную, пройдите несколько уроков JavaScript. Это поможет

Есть мысли или вопросы? Пожалуйста, дайте нам знать в комментариях ниже.