Нік Дієго випустив плагін 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, плагін Ніка як і раніше зможе існувати як альтернативне гнучке рішення.