Добавление пользовательских SVG-файлов через плагин WordPress Icon Block

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

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

Собирание воедино страницы с ценами на Block Visibility – вот что подтолкнуло его к созданию Icon Block. У него был обширный список функций, и он вручную кодировал значки с помощью блока HTML.

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

Результат удался. Он проверяет множество флажков для такого решения для значков, которое опирается на блочную систему WordPress.

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

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

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

Поддержка основных компонентов была бы хорошей для запуска, но Диего сделал дополнительный шаг и добавил настраиваемые функции. Блок значков имеет кнопку «повернуть», которая позволяет пользователям поворачивать значок с шагом 90 °. Также есть кнопки для поворота значка по горизонтали и вертикали.

В редакторе WordPress есть множество вариантов использования таких плагинов значков. Один из наиболее распространенных сценариев – это простой набор ящиков с изображением вверху.

С блоком значков это достаточно просто сделать, используя блок столбцов, добавляя пользовательские значки и настраивая их. Однако возможно гораздо больше.

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

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

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

Другая проблема в том, что это должен быть список. Нет никаких причин использовать другие блоки для построения макета. Однако блок List не позволяет пользователям вкладывать блоки.

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

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

Хотя плагин в его нынешнем виде может служить идеальным решением для значительной части сообщества WordPress, у Диего есть планы по его улучшению. Он рассматривает возможность добавления селектора значков для пользователей, которые не хотят добавлять код SVG. По умолчанию будут отображаться встроенные значки WordPress. Однако он также планирует разрешить сторонним разработчикам расширять его с помощью пользовательских «пакетов значков».