Крістофер Джон, дизайнер з Сіетла та інженер UX, опублікував свій перший проект у каталозі плагінів. Позитивно розглядається на Twitter, плагін Wayfinder є рішенням для підсвічування контуру блоків у WordPress- Ред.

Як і у випадку з подібними плагінами, метою Wayfinder є полегшення вибору користувачами вкладених блоків. Wayfinder показує контур кожного блоку в редакторі, коли ви наводите курсор миші. При цьому в лівому верхньому кутку поля (над контуром) відображається ім’я блоку.

Моя улюблена функція, яку ви не знайдете більше ніде, – це виведення класу кожного блоку в нижньому правому куті шляху. Це полегшує пошук класу для подальшої укладки.

Користувачі також можуть вмикати або вимикати елементи інтерфейсу користувача через сторінку налаштувань плагіна. Проте будь-які внесені зміни впливають на всіх користувачів сайту. В даний час немає індивідуальних налаштувань для кожного користувача.

На перший погляд плагін функціонував відмінно. Зовнішній вигляд шляху був цілком зрозумілий, і мені не потрібно було міняти настройки за замовчуванням. Wayfinder виглядав як кращий продукт для виводу контуру блоку. Він перевершує існуючі плагіни майже в усіх відношеннях.

Однак незабаром ситуація пішла вниз. Досить було почати писати типовий пост, що складається тільки з заголовків, блоків Paragraph і Image. Спочатку я помітив, що не можу навести звичайну кількість слів в одному рядку. Моя ідеально налаштована типографіка зламалася швидше, ніж я очікував. Інтервал між абзацами здавався завеликим. Мої широко вирівняні зображення виглядали трохи менше, ніж зазвичай.

До цього моменту досвід взаємодії здавався приємним. Але дивацтва нагромаджуються. Щось не так. Плагін отримав похвалу в Twitter і зібрав три 5-зіркових відгуки в перший же день. Можливо, проблема була в моїй нестандартній темі. Однак у мене були подібні проблеми при тестуванні на інші теми – Twenty Twenty-One, Nutmeg, Eksell. Всі ці теми добре продумані, заточені для редактора блоків.

Незалежно від того, наскільки чистий інтерфейс, плагін має свій недолік – він часто порушує основні відступи для блоків у темі. Це стає більш помітним, коли ви додаєте вкладені блокові шари.

Проблема полягає в тому, що плагін додає відступ 18px біля кожного блоку через свою список стилів.

.wp-block:not(.block-list-appender) {
    position: relative;
    outline: 1px dashed transparent;
    padding: 18px;
    overflow: visible !important;
}

Часто це непомітно. Це впливає на кожен сайт по-різному. Додаткові відступи 18px для кожного блоку, безсумнівно, можуть призвести до розбивки дизайну (якщо сама тема не використовує однаковий інтервал для відступів).

Більш помітні проблеми спостерігаються з іконками соціальних мереж (блок Social Icons):

Навіть блок, максимально простий, може мати помилкове вирівнювання:

Розробники тем можуть писати власні CSS, щоб запобігти перезапису відступів. Природно, це не найкращий підхід, але що можна зробити. Навряд чи в громаді WordPress Я хотів би бачити війну за стилізацію з боку тем і плагінів.

Видалення цього правила одноразового заповнення з файлу в стилі редактора.css плагін виправить 99% проблем. Зрештою, все буде працювати безперебійно.

Як розробник, я б краще бачити використання зсув контуру для відступу між блоком і його контуром (а 18px – це багато, я б його скоротив). Шляхи не є частиною моделі css box, і тому не впливають на відступи. Коригування може знадобитися для будь-яких окремих блоків, особливо якщо вони вкладені або мають невеликий розмір (наприклад, Соціальні іконки, Навігація). Це може призвести до інших труднощів, але цей курс принаймні менш руйнівний.

Правило переповнення плагіна також іноді може порушити дизайн. Але це відбувається набагато рідше. Правила розташування та структури можуть переписувати деякі стилі блоків, але вони важливі для того, щоб плагін функціонувати взагалі. Зокрема, я бачив проблеми з позиціонування липкими заголовками при редагуванні сайтів.

Інша проблема може бути пов’язана з псевдоелементами ::before і ::after для блоків. Додаток повинен буде переписати їх, щоб відобразити назву блоку і список класів. Це прикордонний випадок, який варто пам’ятати.

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

Повнороз ширина блоків редактора Gutenberg (ну, ім’я!) — це ще один нещодавній додаток, який надає подібну функціональність. Правда, він порушує дизайн теми по всій дошці.

Блок-структура редактора – Цей плагін був частиною моїх рекомендацій на деякий час. У нього є пара рРоблем з дизайном, але деякі з них досить вирішувані. Останнім часом плагін став занадто повільним для редактора. Крім того, зловживання системою повідомлень WP для просування в Twitter вбиває в бутоні всі позитивні аспекти цього рішення.

Набір редакторів має схожу функціональність “блоч-покажчики” – в ній використовується поле-тінь замість відступів і контуру. Такий підхід дозволяє зберегти розмітку теми. Тим не менш, я зіткнувся з іншими конфліктами стилю в плагіні. EditorsKit буде зайвим для користувачів, яким потрібна лише одна функція.

Залишається тільки Wayfinder. Тепер це найкращий автономний варіант.

Він сподобається тим, хто шукав ефективне рішення для виділення контурів блоків. Wayfinder може вийти вперед і випередити своїх конкурентів. Досить внести невеликі стилістичні корективи. Я з нетерпінням чекаю, щоб спробувати майбутні ітерації плагіна.

джерело: wptavern.com

0 коментарів “Wayfinder: додаток для ідентифікації та вибору блоків у WordPress”

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *