На прошлой неделе Ник Диего выпустил плагин Icon Block. В отличие от аналогичных доступных блоков, этот плагин не привязан к сторонним библиотекам. Добавление SVG производится непосредственно в сам редактор.
Ник является автором нашумевшего плагина Block Visibility, которому чуть больше года и который является одним из лучших проектов в своей сфере. Летом Ник добавил к плагину платную версию, которая добавляет еще больше узкоспециализированных опций. Что касается редактора блоков, Ник уже доказал свою готовность находить креативные решения проблем с упором на продуманный опыт взаимодействия. Его свежий плагин, похоже, продолжает эту линию.
К созданию плагина Icon Block Ника подтолкнуло желание вывести на экран страницу с тарифами Block Visibility. У плагина был огромный список возможностей, и для каждой из них ему пришлось вручную прописывать иконки через блок HTML.
«Я решил выпустить Icon Block на этой неделе, поскольку мне надоело использовать блоки HTML для SVG-иконок (и мне не хотелось прибегать к блочным библиотекам)», – отметил Ник. – «Моей целью было создание простого блока для SVG-иконок на базе родных WP-компонент. Я планирую добавлять и другие возможности (поля и т.д.), как только они будут появляться в ядре».
Результат оказался успешным.
Пользователи могут скопировать и вставить любой SVG-код в текстовое поле, после чего SVG-иконка будет выводиться в редакторе и во фронтэнде.
Но и это еще не все. Плагин использует ряд базовых (входящих в ядро) и блочных возможностей. К примеру, есть поддержка цветов и выравниваний. Пользователи могут настроить размер иконок, отступы, радиус границ, а также задать привязку к URL.
Плагин Icon Block имеет и дополнительный функционал. К примеру, есть кнопка rotate, которая позволяет поворачивать иконку на 90 градусов. Также есть кнопки для отражения иконок по горизонтали и вертикали.
Наиболее распространенный сценарий использования плагина – вывод простого набора квадратных боксов с изображением сверху.
Для этого можно взять блок Columns, и в него уже добавить блок Icon.
Однако в ядре WordPress сейчас имеются некоторые пробелы. К примеру, сложно создавать горизонтальные разметки. Это затрудняет выравнивание иконок рядом с текстом.
Недавно добавленная вариация Row для блока Group выглядит многообещающей. С ее помощью я сделал простую таблицу цен с иконками-галочками.
Тут есть некоторые небольшие замечания. Во-первых, нельзя управлять расстоянием между элементами в каждой строке. Поэтому иконки стоят далеко от текста. Во-вторых, все это стоило бы сделать списком. Однако блок List не поддерживает вложенные блоки.
В 2019 году руководитель проекта Матиас Вентура открыл тикет, связанный с изучением идеи вставки SVG в редакторе. Пока что все это существует только на уровне идеи. Но даже если вставка SVG и появится в ядре WordPress, плагин Ника по-прежнему сможет существовать как альтернативное гибкое решение.
Источник: wptavern.com
