Создание блоков без JavaScript: тестирование ACF, Block Lab и Lazy Blocks

Опубликовано: 2019-05-17

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

Есть и третий способ: плагины, которые создают для вас блоки из набора определенных настраиваемых полей с шаблоном для управления отображением блоков во внешнем интерфейсе. Три самых популярных варианта для этого включают: Block Lab, ACF (расширенные настраиваемые поля) и Lazy Blocks.

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

Для каждого плагина я продемонстрирую

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

Я использовал Local by Flywheel в качестве локального инструмента разработки. Тестовый сайт работал на WordPress 5.1.1, Gutenberg 5.4 и бизнес-теме с WordPress.com.

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

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

Члены команды XWP создали Block Lab, и он доступен в виде бесплатного плагина с коммерческой версией. Сначала я использовал Block Lab, установил плагин, а затем запустил новый блок.

Вот видео о том, как настроить поля.

Следующий шаг — настройка шаблона блока

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

Чтобы создать шаблон, я открыл свой редактор кода, создал файл block-team-member.php и добавил HTML + и минимальный PHP для ссылки на поля.

 <h2>
<?php block_field('имя');?> 
<?php block_field('фамилия');?>
</h2>
<p><img class="teamphoto" src="<?php block_field('picture'); ?>"
 alt="<?php block_field('имя');?> 
<?php block_field('фамилия');?> " width="150"/>
<?php block_field('краткая биография'); ?></p>

<p><em>Вы можете связаться с <?php block_field('first-name');?></em> 
<br/>по электронной почте <span><a href="mailto:<?php block_field('адрес электронной почты'); ?>">
<?php block_field('адрес электронной почты'); ?></а></промежуток>
 или <br/>
по телефону: <span><?php block_field('extension'); ?></span></p>

На последнем шаге я закончил настройку этого блока с помощью свойств блока.

  • Ставлю иконку человеку,
  • выбрал «Элементы макета» в качестве категории и
  • добавлены «член команды, команда» в качестве ключевых слов

Все это необходимо для вставки блоков в редакторе.

Давайте посмотрим, как это работает.

Я добавил новую страницу под названием « Познакомьтесь с нашей командой Block Lab» и добавил членов команды, используя блок «Член команды».

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

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

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

Когда я хочу переключить тему, я все равно хотел бы сохранить блок и макет для блока с моим сайтом, поэтому мне нужно обязательно скопировать папку блоков в каталог новой темы. Другой способ описан в документации Blocklab на Github. Он предлагает два фильтра для изменения местоположения шаблона по умолчанию:

«Чтобы использовать другой шаблон внутри вашей темы, используйте фильтр block_lab_override_theme_template($theme_template). Чтобы использовать другой шаблон вне вашей темы (например, в плагине), используйте фильтр block_lab_template_path($template_path)».

Это было довольно легко настроить, даже если вы не являетесь разработчиком PHP, вы, вероятно, можете использовать одну функцию PHP block-field() и убедиться, что ссылаетесь на правильные имена полей.

Block Lab, по сути, предоставляет вам метод для создания полей и настройки свойств блока на одном экране, а затем вам нужно добавить соответствующий шаблон блока в папку /blocks/ в каталоге вашей темы. Это довольно прямолинейно.

Создание командного блока с помощью ACF 5.8

Версия 5.8 ACF (Advanced Custom Fields) вышла с построителем блоков (доступен только в версии Pro). Для моего теста я использовал ACF 5.8 RC 1. Финальная версия уже доступна. Эллиот Кондон является автором плагина, и первая версия была выпущена в 2011 году. Плагин превратился в чрезвычайно популярный инструмент разработки как для фрилансеров, так и для агентств, и его установили более 1 миллиона раз.

Его успех и универсальность делают создание группы полей более сложным процессом по сравнению с двумя другими плагинами. Версия Pro 5.8 содержит первый выпуск инструмента для построения блоков.

Это представление администратора группы полей «Член команды».

Теперь, как мне превратить это в блок? Документация достаточно полная. Примечание. В этом тесте я пошел в несколько ином порядке…

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

Я использовал два файла. Во-первых, мне нужно было зарегистрировать блок в functions.php моей темы. Для кода рендеринга шаблона/блока я использовал content-block-team-member.php, который также должен храниться в папке активной темы.

Через секунду вы увидите, как эти двое сочетаются друг с другом. Остальную работу выполняет плагин в бэкенде.

Итак, давайте напишем блочный код на PHP.

Первый фрагмент — это регистрация блока. Я дал ему имя, заголовок, описание, указал на шаблон рендеринга, дал ему категорию, иконку и несколько ключевых слов, по которым производитель контента может найти блок в вставке блоков. Я прокрутил до конца файл functions.php моей темы и добавил этот фрагмент:

 функция register_acf_blocks() {
   // зарегистрировать блок члена команды.
   acf_register_block (массив (
       'name' => 'acf-team-member',
       'title' => __('Член команды ACF'),
       'description' => __('Настраиваемый блок участника команды, созданный с помощью ACF 5.8'),
       'render_template' => 'content-block-team-member.php',
       'категория' => 'форматирование',
       'icon' => 'комментарии администратора',
       'ключевые слова' => массив( 'член команды', 'команда' ),
   ));
}
// Проверяем, существует ли функция, и подключаемся к настройке.
если (функция_существует('acf_register_block')) {
   add_action('acf/init', 'register_acf_blocks');
}

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

В следующем разделе я создал шаблон рендеринга блока. Имя файла должно соответствовать атрибуту «render_template» в приведенном выше тексте, то есть « content-block-team-member.php ».

Я также просто следил за документацией ACF и изменил только несколько значений и обновил код отображения.

 <?php
// создаем атрибут id для определенного стиля
$id = 'член команды'. $блок['идентификатор'];

// создаем класс выравнивания ("alignwide") из настроек блока ("wide")
$align_class = $block['align'] ? 'выровнять' . $блок['выравнивание'] : '';

// Загрузка значений и назначение значений по умолчанию для полей блока.
$short_bio = get_field('short_bio') ?: 'здесь идет краткая биография... ';
$first_name = get_field('first_name') ?: 'Имя';
$last_name = get_field('last_name') ?: 'Фамилия';
$image = get_field('картинка');
$email_address = get_field('email_address');
$extension = get_field('расширение');
?>


" class="член команды">
       

   

   " alt="" alt=" " ширина="150"/>

Поскольку я начал с Fieldgroup, мне нужно было вернуться и убедиться, что группа связана с блоком, который я только что зарегистрировал. Под экраном группы полей я создал правило для местоположения: оно должно гласить: «Показать эту группу полей, если блок равен члену команды ACF.

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

Это был интересный опыт. Вы можете использовать форму в разделе редактора для ввода данных. Другой вариант — ввести данные в поля формы, доступные на боковой панели, и вы увидите обновление блока в режиме реального времени. Вы можете переключаться между двумя методами, нажимая кнопку «Переключиться на редактирование» или «Переключиться на предварительный просмотр», в зависимости от того, какой метод вы используете прямо сейчас.

Пользовательский интерфейс редактора блоков работает хорошо. Стоит пройти более сложную настройку и необходимый код.

Создание командного блока с ленивыми блоками

Третий плагин в этом тесте называется «Lazy Blocks» Никиты из nkdev.info, той же команды, которая также опубликовала коллекцию блоков GhostKit.

Это не только позволяет мне хранить информацию в post_content, но также дает возможность хранить ее в таблице post_meta.

Вот видео использования интерфейса для создания полей.

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

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

Мне не нужно было добавлять какой-либо код в файл functions.php моей темы, а также мне не нужно было создавать дополнительные файлы с кодом моего шаблона.

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

Я скопировал/вставил тот же код на вкладку «Редактор HTML», чтобы я мог видеть интерфейс, отображаемый под полями формы.

Давайте использовать его.

Кажется, это работает. Было немного неловко, что форма не исчезла, когда я снял выделение с блока. Он занимает много места в редакторе. Хотя я хотел, чтобы члены команды находились в блоке из двух столбцов, мне не удалось перетащить два блока в блок столбцов. Я упомянул об этом в своей теме поддержки, и nK ответил: «… скрытие элементов управления, когда блок не выбран, — это хорошая функция, которая уже добавлена ​​в блоки ACF и скоро будет добавлена ​​в ленивые блоки». Вот и все — всему свое время.

Вывод: сложный, развитый или простой.

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

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

На данный момент только версия ACF 5.8 Pro поддерживает функцию построителя блоков. Кондон рассматривает возможность сделать его отдельным плагином. (Посмотрите, что в Твиттере думают об этой идее…)

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

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

XWP — агентство, работающее с корпоративными клиентами на VIP-хостинге WordPress.com и другими корпорациями. Члены их команды вносят свой вклад в другие большие идеи в пространстве WordPress, включая Customizer, AMP и Tide. Я ожидаю, что плагин останется и вырастет вместе с Gutenberg Phase 2 в надежную систему для разработчиков сайтов, агентств и разработчиков тем.

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

Если есть необходимость иметь дополнительные поля для страницы или раздела поста, Lazy Blocks — отличный инструмент для создания прототипа и быстрого перехода от идеи к проверке концепции.

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

ACF 5.8 довольно сложен; Block Lab — это очень гибкий и только полукомплекс; и Lazy Blocks имеет адекватное название и является самым простым в использовании. Ни один из них не позволяет вам обойтись без написания кода, так как каждый блок требует некоторого вывода на экран в HTML.

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