Блоки ACF предоставляют набор блоков, созданных из Advanced Custom Fields Pro

Опубликовано: 2020-05-07

На выходных Мунир Камаль выпустил версию 2.0 своего плагина ACF Blocks — проекта, который создает набор блоков для редактора. Плагин предлагает 18 пользовательских блоков в бесплатной версии и еще 15 в профессиональной версии. Он построен на основе Advanced Custom Fields Pro (ACF Pro).

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

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

Тесная связь с ACF Pro вредит пользовательскому интерфейсу плагина. Однако идеи, лежащие в основе блоков ACF и его настраиваемых параметров, компенсируют недостатки, связанные с зависимостью от его зависимого родительского плагина. Разделение этих двух факторов маловероятно, но это сделало бы работу с ним более плавной и открыло бы плагин для более широкой аудитории.

Камаль черпал вдохновение для плагина из ACF и его профессиональной версии. Он описал процесс построения блоков с помощью фреймворка как «очень простой» даже для разработчика среднего уровня. «В течение многих лет это была потрясающая среда WordPress для создания настраиваемых полей», — сказал он. «И когда [Эллиот Кондон] объявил о функции создания блоков в ACF, это быстро побудило меня создать эту коллекцию готовых к использованию блоков ACF».

Самым большим техническим ограничением является то, что Kamal не может создавать вложенные блоки, что является текущим ограничением ACF. «Я уже обсудил это с [Кондоном], и он уже работает над внедрением этой функциональности, надеюсь, в ближайшее время», — сказал он. «Как только это дойдет до ACF, мы сможем создавать более удивительные и мощные блоки Гутенберга».

Посмотрите небольшое пошаговое руководство о том, как работает плагин:

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

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

Одним из лучших блоков в коллекции является блок Photo Collage. Это ответ блоков ACF на основной блок галереи. Параметры сетки только для этого блока делают этот плагин достойным внимания. Блок предлагает от 2 до 15 макетов сетки, в зависимости от варианта сетки, который выбирает пользователь.

Скриншот блока Photo Collage из плагина ACF Blocks в редакторе WordPress.
Установка сетки для блока Photo Collage.

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

Скриншот блока Testimonial из плагина ACF Blocks в редакторе WordPress.
Работа с Google Fonts в блоке Testimonial.

Это небольшая выборка того, что может сделать плагин. Блок «Прайс-лист» может помочь ресторанным сайтам настроить свое меню. Блок Pricing Box, особенно когда он вложен в основной блок Columns, позволяет легко настроить раздел ценообразования с несколькими вариантами продуктов. Кроме того, блок «Команда» упрощает создание разделов профиля на странице команды/о компании.

В бесплатной версии доступны следующие блоки (и еще несколько в профессиональной версии):

  1. Прокручиваемый блок изображения
  2. Блок вкладок
  3. Переключить блокировку
  4. Аккордеонный блок
  5. Блок слайдера изображения
  6. Блок социальных сетей
  7. Блок фотоколлажей
  8. Блок сообщений
  9. Блок отзывов
  10. Командный блок
  11. Многокнопочный блок
  12. Блок с ценами
  13. Блок прайс-листа
  14. Начать рейтинговый блок
  15. Блок индикатора выполнения
  16. Блок номера счетчика
  17. Нажмите, чтобы твитнуть Заблокировать
  18. Блок рабочих часов

Любимые блоки Камала из всего набора — это Image Hotspot, который позволяет пользователям устанавливать фоновое изображение с «указателями» для всплывающего контента; Изображение «До После», которое позволяет пользователям сравнивать два изображения с помощью ползунка; и Photo Collage, блок галереи на основе сетки плагина. Первые два доступны только в профессиональной версии плагина. Создатель плагина сказал, что, по его мнению, все блоки полезны, но создавать их было интереснее всего.

Возможности для совершенствования

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

Самая неотложная проблема и, вероятно, самая простая для исправления — это стили плагина для левого и правого полей в каждом блоке. Плагин сбрасывает эти поля на 0 по умолчанию. В зависимости от активной темы на сайте, это может привести к смещению блоков к краю экрана, а не к области контента в интерфейсе. Некоторые темы используют левое/правое поле для выравнивания содержимого. Это не проблема только с блоками ACF. Он распространен среди плагинов с внешним интерфейсом.

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

Редактирование содержимого блока происходит на панели параметров блока, а не непосредственно в блоке. Я не уверен, является ли это ограничением использования платформы ACF Pro или дизайнерским решением со стороны Камала. Странно переключаться между редактированием содержимого в области содержимого и редактированием содержимого на боковой панели.

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

Установка параметров блока иногда может показаться немного вялой, поскольку вывод блока в редакторе не сразу отражает изменения. В первую очередь это связано с тем, что блоки ACF полагаются на возможности рендеринга на стороне сервера ACF Pro. Вряд ли это можно решить в плагине блоков. Некоторым пользователям может показаться утомительным отложенный рендеринг при редактировании нескольких параметров.

Последние мысли

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

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

Камаль понимает, что некоторые пользователи ACF Pro могут попробовать свои силы в создании похожих блоков, но считает, что знания его команды и стремление предложить поддержку являются наиболее важными частями уравнения. «ACF Blocks экономит время и усилия при самостоятельном создании блоков для наиболее распространенных элементов веб-дизайна», — сказал он.

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