Определите и выберите блоки через плагин Wayfinder WordPress

Кристофер Джон, дизайнер и UX-инженер из Сиэтла, вчера опубликовал свой первый проект в каталоге плагинов. Анонсированный в Twitter с высокой похвалой, Wayfinder представляет собой блочное решение для редактора WordPress.

Как и аналогичные плагины, цель состоит в том, чтобы упростить конечным пользователям выбор вложенных блоков, которые иногда бывает сложно определить. Wayfinder обрисовывает каждый блок в редакторе при наведении курсора. Затем он отображает имя блока в верхнем левом углу поля.

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

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

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

Однако вскоре ситуация пошла под откос, когда вы написали типичный пост в блоге, не содержащий ничего, кроме заголовков, абзацев и изображений. Сначала я заметил, что не могу набрать в одной строке такое же количество слов, как обычно. Моя идеально настроенная типографика сломалась раньше, чем следовало. Интервал между абзацами казался слишком большим. Мои широкоформатные изображения были немного меньше, чем обычно.

До этого момента пользовательский опыт оставался приятным, но мелкие странности накапливались. Что-то было не так. Плагин получил хвалебные отзывы в Твиттере и уже получил три пятизвездочных отзыва за первые 24 часа. Возможно, проблема была в моей нестандартной теме. Однако аналогичные проблемы возникли при тестировании нескольких других, таких как Twenty Twenty-One, Nutmeg и Eksell – каждая из которых представляет собой хорошо продуманную тему, обслуживаемую редактором блоков.

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

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

Для неподготовленного глаза во многих случаях это может быть не видимой проблемой. Это повлияет на каждый сайт по-разному, но 18 пикселей дополнительных отступов на каждом блоке, несомненно, в некоторой степени испортят ситуацию, если сама тема не использует точно такой же интервал в своем дизайне.

Более заметные проблемы наблюдаются с такими блоками, как значки социальных сетей.

Но даже такая простая вещь, как блок List, может быть неправильно выровнена.

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

Удаление этого единственного padding правила из плагина editor-style.css убило 99% его проблем. После этого все шло как хорошо отлаженная машина.

Как разработчик, я бы исследовал outline-offsetрасстояние между блоком и его контуром, возможно, 18px немного уменьшив его. Поскольку контуры не являются частью блочной модели CSS, это не повлияет на интервал. Корректировки могут потребоваться для каждого блока, особенно если эти блоки вложены или небольшие (например, значки социальных сетей, навигация). У него будут свои проблемы, но курс должен быть менее разрушительным.

В меньшей степени overflow правило плагина время от времени нарушает дизайн темы. Его правила положения и контура также могут отменять некоторые стили блоков с краевым регистром, но они необходимы для того, чтобы плагин действительно выполнял свою работу. В частности, я мог видеть проблемы с позиционированием из-за  прикрепленных заголовков, когда мы переходим к редактированию сайта.

Несмотря на проблемы, на данный момент плагин опережает остальных.

Gutenberg Editor Full Width Blocks Border ( немного запутанный ), еще один недавний плагин, предлагающий аналогичную функциональность, ломает дизайн пользовательской темы по всем направлениям. Он действительно выполняет работу по упрощению выбора блоков, но жертва WYSIWYG того не стоит.

Плагин Outline Editor был моей рекомендацией в течение некоторого времени. У него есть несколько собственных проблем с дизайном, но некоторые из них настраиваются для каждого пользователя. Однако в последнее время редактор стал вялым. Кроме того, неправильное использование системы уведомлений администратора WordPress для подписчиков Twitter делает ее тем, от чего я бы предпочел держаться подальше.

В EditorsKit есть похожая функция «блочных указателей», в которой вместо заполнения и контура используется тень блока. Такой прием не портит большинство макетов тем. Однако я столкнулся с другими конфликтами стилей с плагином. Кроме того, EditorsKit является излишним для пользователей, которым просто нужна только одна функция.

Остается Wayfinder. Бородавки и все такое, сейчас это лучший автономный вариант. Может быть, это мало что говорит, но что-то говорит. Это особенность, которую сложно определить. Я не завидую разработчикам, которые пытаются творить чудеса.

Это обязательно понравится многим, кто искал решение для блочного контура. Благодаря своему относительно твердому первому выходу он может вырваться вперед и опередить конкурентов. При более тщательном тестировании темы и небольшой корректировке ее подхода все могло бы стать еще лучше. Я с нетерпением жду возможности протестировать будущие итерации.