Плагин Lazy Blocks ➤ Легко создавайте кастомные блоки для редактора Gutenberg + своя верстка

Плагин Lazy Blocks — это конструктор блоков для редактора Gutenberg. Он позволяет создавать свои произвольные блоки под задачи вашего проекта. Плагин быстро работает и не перегружает ваш сайт лишним функционалом.

Lazy Blocks прекрасно подойдет для тех, кто хочет легко и быстро создавать свои блоки Gutenberg без необходимости сложного программирования (PHP, JS). Хотя, от создания верстки блоков вас никто здесь не освобождает. Так что знания HTML + CSS вам будут все равно необходимы. Если и здесь у вас есть некоторые пробелы, то посмотрите мое видео — я для вас там сделал подсказку, как можно быстро сверстать свой блок.

Создавайте произвольные блоки визуально, добавляйте элементы управления для своих блоков с помощью перетаскивания, выберите вывод блоков с помощью кода HTML или PHP. Вы можете создавать настраиваемые блоки, а также настраиваемые мета-поля для определенных типов записей. Кроме того, вы можете создавать шаблоны записей с предопределенными блоками для любого произвольного типа записей.

Как начать создавать свои блоки?

Создайте блок — укажите название, ярлык, иконку и выберите категорию.
Добавьте элементы управления — укажите параметры (текст, изображение, ссылка и т.д.).
Создайте код вывода — выберите метод вывода блока и сверстайте его дизайн.

Настройки блока и элементы управления — Lazy Block

Вставка блока на странице. Параметры блока — Lazy Block

Типы элементов управления (параметры)

Для использования в блоках доступны следующие элементы управления:

Basic

Text
Textarea
Number
Range
URL
Email
Password

Content

Image
Gallery
File
Rich Text
Classic Editor
Code Editor
Inner Blocks

Choice

Select
Radio
Checkbox
Toggle

Advanced

Color Picker
Date Time Picker

Layout

Repeater

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

В видео показано как создать блок, задать ему параметры и создать верстку.

Как пример показан только первый метод вывода блока: HTML + Handlebars-выражения.

Тайминги:

00:00 Вступление.
00:33 Установка плагина Lazy Blocks. Как пользоваться?
01:47 Импорт/Экспорт блока.
02:20 Что делает плагин, а что делаем мы?
04:10 Знакомство с интерфейсом плагина. Типы полей.
13:48 Пример блока. Вставка блока на странице. HTML+CSS блока.
24:00 Создаем свой кастомный блок с нуля. Тестируем верстку блока.
33:53 Добавляем элементы управления блоком (параметры).
40:33 Вставка выражений в верстку блока для вывода содержимого полей.
44:43 Вставка блока в редакторе Gutenberg. Просмотр.
46:22 Используем условия для вывода выражений и кода HTML.
48:53 Финальный тест отображения блока на странице.
50:29 Выводы.

Смотрите это видео на YouTube

➤ Підпишіться на Youtube-канал InwebPress!

Примечание: я в своем видео элементы управления блока называю атрибутами/свойствами. А Handlebars-выражения — переменными 🙂

Методы вывода блока

Для отображения блоков на страницах и/или в предпросмотре в редакторе необходимо добавить код вывода. Есть несколько способов сделать это:

1.HTML + Handlebars-выражения
2.Функции PHP
3.Шаблон темы (функции PHP) — в отдельном файле

Предлагаю кратко рассмотреть каждый из них на конкретном примере.

Пример — Карточка сотрудника

Есть верстка карточки сотрудника. Наша задача создать свой готовый блок на базе этой верстки, чтобы на нужных страницах сайта можно было легко выводить профили сотрудников.

Параметры нашего блока:

Ссылки на социальные сети
Имя и Фамилия
Должность
Фото

При наведении на карточку появляются иконки социальных сетей на красном фоне.

После некоторой правки код CSS выглядит так:

.our-team{
    border: 1px solid #dedede;
    text-align: center;
    color: #8b2635;
    overflow: hidden;
    transition: all 0.3s ease 0s;
}
.our-team:hover{
    background: #8b2635;
    color: #fff;
}

.our-team:hover .title{
    color: #fff;
}

.our-team .pic{ position: relative; }
.our-team .pic img{
    width: 100%;
    height: auto;
    transition: all 0.3s ease 0s;
}
.our-team:hover .pic img{ transform: translateY(-20px); }
.our-team .social{
    width: 20%;
    height: 100%;
    background: #8b2635;
    padding: 20px 0;
    margin: 0;
    list-style: none;
    position: absolute;
    top: 0;
    left: -50%;
    transition: all 0.5s ease 0s;
}
.our-team:hover .social{ left: 0; }
.our-team .social li{ display: block; }
.our-team .social li a{
    display: block;
    padding: 10px 0;
    font-size: 20px;
    color: #fff;
    transition: all 0.5s ease 0s;
}
.our-team .social li a:hover{ color: #ff9b19; }
.our-team .team-content{ padding: 25px 0; }
.our-team .title{
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.our-team .post{
    display: block;
    font-size: 15px;
    text-transform: capitalize;
}
@media only screen and (max-width: 990px){
    .our-team{ margin-bottom: 30px; }
}

1 способ: HTML + Handlebars-выражения

Пример HTML-кода для вывода блока с выражениями Handlebars и блочным хелпером IF:

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="our-team">
                <div class="pic">
                    <img src="{{foto.url}}" alt="{{name}}">
                    <ul class="social">
                     
                      {{#if fb}}
                        <li><a href="{{fb}}" class="fab fa-facebook"></a></li>
                      {{/if}}
                     
                     {{#if google}}
                        <li><a href="{{google}}" class="fab fa-google-plus"></a></li>
                      {{/if}}
                      
                      {{#if insta}}
                        <li><a href="{{insta}}" class="fab fa-instagram"></a></li>
                      {{/if}}
                      
                      {{#if linkedin}}
                        <li><a href="{{linkedin}}" class="fab fa-linkedin"></a></li>
                        {{/if}}
                    </ul>
                </div>
                <div class="team-content">
                    <h3 class="title">{{name}}</h3>
                    <span class="post">{{dolzhnost}}</span>
                </div>
            </div>
        </div>
        
    </div>
</div>

Объясню некоторые термины и понятия.

Handlebars

Handlebars — это шаблонизатор, который упрощает создание HTML за счет использования шаблонов.

Шаблоны выглядят как обычный HTML-код, в который добавлены выражения Handlebars.

Выражение Handlebars

Выражение Handlebars — это {{некоторое содержимое}}. Когда шаблон выполняется, выражения заменяются значениями входных параметров.

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

Выражения Handlebars являются основной единицей шаблона Handlebars.

Хелперы

Хелперы — это функции, которым можно передать любое количество выражений. После обработки результата они возвращают HTML-код.

Handlebars-хелпер представляет собой простой идентификатор, за которым следуют ноль или более параметров (через пробел). Каждый параметр представляет собой handlebars-выражение. Параметром хелпера может также являться простая строка, число или логическое значение. Хелпер производит определенные операции с параметрами и возвращает HTML код.

Блочные хелперы

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

Чтобы указать, что вы вызываете блочный хелпер, добавьте в его имя решетку: {{#if}}. В отличие от обычного хелпера, блочный хелпер нужно закрыть. Закрывается блочный хелпер так же, как и обычный тег: {{/if}}.

В Handlebars уже есть встроенные блочные хелперы: If, Unless, Each, With.

if — используйте для вывода блока по условию. Я его использую как пример в своем видео (см.выше).

<div class="entry">
  {{#if author}}
    <h1>{{firstName}} {{lastName}}</h1>
  {{else}}
    <h1>Автор неизвестен</h1>
  {{/if}}
</div>

unless — используйте этот хелпер как обратный хелперу if. Блок будет выведен, если выражение вернет ложное значение.

<div class="entry">
  {{#unless license}}
  <h3 class="warning">ВНИМАНИЕ: Эта запись не имеет лицензии!</h3>
  {{/unless}}
</div>

each — используйте этот хелпер для перебора списков. Внутри блока Вы можете использовать this для ссылки на элемент списка.

<ul class="writers_list">
  {{#each writers}}
    <li>{{@index}}: {{this}}</li>
  {{else}}
    <li>Список пуст</li>
  {{/each}}
</ul>

2 способ: Функции PHP

Пример вывода блока (блок тот же) на сайте с помощью html + функций PHP. Для некоторых полей выполняю проверку наличия данных в параметрах:

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="our-team">
                <div class="pic">
				
	        <img src="<?php echo esc_url( $attributes['foto']['url'] ); ?>">
				
		<ul class="social">
				  
	        <?php if ( $attributes['fb'] ) : ?>
		<li><a href="<?php echo esc_url( $attributes['fb'] ); ?>" class="fab fa-facebook"></a></li>
		<?php else: ?>
		<?php endif; ?>
				  
		<?php if ( $attributes['google'] ) : ?>
		<li><a href="<?php echo esc_url( $attributes['google'] ); ?>" class="fab fa-google-plus"></a></li>
		<?php else: ?>
		<?php endif; ?>
				  
		<?php if ( $attributes['insta'] ) : ?>
		<li><a href="<?php echo esc_url( $attributes['insta'] ); ?>" class="fab fa-instagram"></a></li>
		<?php else: ?>
		<?php endif; ?>
				  
		<?php if ( $attributes['linkedin'] ) : ?>
		<li><a href="<?php echo esc_url( $attributes['linkedin'] ); ?>" class="fab fa-linkedin"></a></li>
		<?php else: ?>
		<?php endif; ?>
				  
                    </ul>
                </div>
                <div class="team-content">
                    <h3 class="title"><?php echo $attributes['name']; ?></h3>
                    <span class="post"><?php echo $attributes['dolzhnost']; ?></span>
                </div>
            </div>
        </div>
        
    </div>
</div>

3 способ: Шаблон темы

Пример вывода блока (блок тот же) на сайте с помощью html + функций PHP, которые прописаны в файле шаблона (block.php). Разница между этим способом и предыдущим в том, что код мы вставили в отдельный файл PHP, который создали и загрузили в эту папку:

/wp-content/themes/blocksy/blocks/lazyblock-member3/

Я использовал тему Blocksy, у вас может быть другая тема. В любом случае, плагин Lazy Blocks сам подскажет правильный путь для создания файла блока:

Код:

<?php
/**
 * Сотрудник 3
 *
 * @var  array  $attributes Block attributes.
 * @var  array  $block Block data.
 * @var  string $context Preview context [editor,frontend].
 */

?>
<div class<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="our-team">
                <div class="pic">
				
	        <img src="<?php echo esc_url( $attributes['foto']['url'] ); ?>">
				
		<ul class="social">
				  
	        <?php if ( $attributes['fb'] ) : ?>
		<li><a href="<?php echo esc_url( $attributes['fb'] ); ?>" class="fab fa-facebook"></a></li>
		<?php else: ?>
		<?php endif; ?>
				  
		<?php if ( $attributes['google'] ) : ?>
		<li><a href="<?php echo esc_url( $attributes['google'] ); ?>" class="fab fa-google-plus"></a></li>
		<?php else: ?>
		<?php endif; ?>
				  
		<?php if ( $attributes['insta'] ) : ?>
		<li><a href="<?php echo esc_url( $attributes['insta'] ); ?>" class="fab fa-instagram"></a></li>
		<?php else: ?>
		<?php endif; ?>
				  
		<?php if ( $attributes['linkedin'] ) : ?>
		<li><a href="<?php echo esc_url( $attributes['linkedin'] ); ?>" class="fab fa-linkedin"></a></li>
		<?php else: ?>
		<?php endif; ?>
				  
                    </ul>
                </div>
                <div class="team-content">
                    <h3 class="title"><?php echo $attributes['name']; ?></h3>
                    <span class="post"><?php echo $attributes['dolzhnost']; ?></span>
                </div>
            </div>
        </div>
        
    </div>
</div>

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

/wp-content/themes/{YOUR_THEME}/blocks/lazyblock-blockquote/editor.php

Шаблоны для оформления страниц

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

Работает это так:

В разделе Шаблоны создаете новый шаблон.
В настройках шаблона укажите поддерживаемый тип записи и правила изменения:
1. None — блоки можно добавлять, перемещать и удалять.
2. Prevent all operations — запретить все операции с блоками.
3. Prevent inserting new blocks, but allows moving existing ones — запрет вставки новых блоков, но позволяет перемещать существующие.
Создайте структуру блоков в Шаблоне — добавьте колонки, заголовки, абзацы, картинки и т.д. Укажите параметры для каждого блока.
Перейдите на страницу редактирования страницы/записи и заполните готовые блоки вашим контентом. Сохраните запись.

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

Полезные PHP-функции

Скрываем раздел Lazy Blocks в админке сайта

Это предотвратит изменение/удаление блоков вашим клиентом и обеспечит бесперебойную работу сайта. Вставьте эту функцию в файл functions.php (например, в дочерней теме).

add_filter( 'lzb/show_admin_menu', '__return_false' );

Как создать свою категорию для блока?

function my_lzb_controls_categories( $categories ) {
    // Add new control category "My Category"
    $categories['my-category'] = __( 'My Category' );

    return $categories;
}

add_filter( 'lzb/controls/categories', 'my_lzb_controls_categories' );