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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Посмотрим, как это работает.

Я добавил новую страницу под названием « Знакомство с нашей командой 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

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

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

^

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

^

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

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

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

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

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

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

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

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

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

Когда я начал с 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 поставляется с функцией построения блоков. Кондон рассматривает возможность сделать его отдельным плагином . (Посмотрите, что думают Twitteratti об этой идее…)

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

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

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

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

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

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

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

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