Icon Block: плагин для добавления произвольных SVG-файлов в WordPress

0 10

Icon Block: плагин для добавления произвольных SVG-файлов в WordPress

На прошлой неделе Ник Диего выпустил плагин Icon Block. В отличие от аналогичных доступных блоков, этот плагин не привязан к сторонним библиотекам. Добавление SVG производится непосредственно в сам редактор.

Ник является автором нашумевшего плагина Block Visibility, которому чуть больше года и который является одним из лучших проектов в своей сфере. Летом Ник добавил к плагину платную версию, которая добавляет еще больше узкоспециализированных опций. Что касается редактора блоков, Ник уже доказал свою готовность находить креативные решения проблем с упором на продуманный опыт взаимодействия. Его свежий плагин, похоже, продолжает эту линию.

Icon Block: плагин для добавления произвольных SVG-файлов в WordPress

К созданию плагина Icon Block Ника подтолкнуло желание вывести на экран страницу с тарифами Block Visibility. У плагина был огромный список возможностей, и для каждой из них ему пришлось вручную прописывать иконки через блок HTML.

Icon Block: плагин для добавления произвольных SVG-файлов в WordPress

«Я решил выпустить Icon Block на этой неделе, поскольку мне надоело использовать блоки HTML для SVG-иконок (и мне не хотелось прибегать к блочным библиотекам)», – отметил Ник. – «Моей целью было создание простого блока для SVG-иконок на базе родных WP-компонент. Я планирую добавлять и другие возможности (поля и т.д.), как только они будут появляться в ядре».

Результат оказался успешным.

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

Icon Block: плагин для добавления произвольных SVG-файлов в WordPress

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

Плагин Icon Block имеет и дополнительный функционал. К примеру, есть кнопка rotate, которая позволяет поворачивать иконку на 90 градусов. Также есть кнопки для отражения иконок по горизонтали и вертикали.

Icon Block: плагин для добавления произвольных SVG-файлов в WordPress

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

Для этого можно взять блок Columns, и в него уже добавить блок Icon.

Icon Block: плагин для добавления произвольных SVG-файлов в WordPress

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

Недавно добавленная вариация Row для блока Group выглядит многообещающей. С ее помощью я сделал простую таблицу цен с иконками-галочками.

Тут есть некоторые небольшие замечания. Во-первых, нельзя управлять расстоянием между элементами в каждой строке. Поэтому иконки стоят далеко от текста. Во-вторых, все это стоило бы сделать списком. Однако блок List не поддерживает вложенные блоки.

Icon Block: плагин для добавления произвольных SVG-файлов в WordPress

В 2019 году руководитель проекта Матиас Вентура открыл тикет, связанный с изучением идеи вставки SVG в редакторе. Пока что все это существует только на уровне идеи. Но даже если вставка SVG и появится в ядре WordPress, плагин Ника по-прежнему сможет существовать как альтернативное гибкое решение.

Источник: wptavern.com

Источник: oddstyle.ru

Оставьте ответ

Ваш электронный адрес не будет опубликован.