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

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

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

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

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

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

  1. Создайте блок — укажите название, ярлык, иконку и выберите категорию.
  2. Добавьте элементы управления — укажите параметры (текст, изображение, ссылка и т.д.).
  3. Создайте код вывода — выберите метод вывода блока и сверстайте его дизайн.
Настройки блока и элементы управления — Lazy Block
Метод вывода блока — 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 Выводы.

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

Подпишитесь на канал 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 — это {{некоторое содержимое}}. Когда шаблон выполняется, выражения заменяются значениями входных параметров.

Выражения 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 сам подскажет правильный путь для создания файла блока:

Вывод блока в шаблоне темы — Lazy Block

Код:

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

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

Полезные 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' );

Источники и файлы

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

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