Что представляет собой Claro, новая тема для административной панели в Drupal 10

Главные вкладки

Аватар пользователя ADCI_Solutions ADCI_Solutions 2 февраля в 12:02

14 декабря 2022 года вышла Drupal 10. Среди особенностей новой версии CMS — тема для административной панели Claro, которая теперь включена в ядро Drupal. Администрировать сайты на Drupal будет одним удовольствием, и те, кто не собирался переносить сайт на Drupal 10, должны прочесть статью и поменять планы.

Роль темы администратора в Drupal

Основное ожидание от административной панели любой CMS — это понятный интерфейс. У среднестатистического редактора сайта нет глубоких познаний в PHP, HTML и CSS и возможности постоянно обращаться за помощью к разработчику. Поэтому в идеале работа с контентом не должна быть труднее, чем писать в Google Docs или собирать сайт в Tilda. Чем интерфейс админки удобнее и интуитивно понятнее для человека без бэкграунда разработчика, тем меньше времени надо на то, чтобы научиться с ней работать, и тем быстрее владелец сайта получит от него то, что хотел при его разработке.

Если вы ещё не работали с Drupal и не видели функциональность админ-панели этой CMS, то давайте изучим основные разделы. В их перечень входят:

  • Содержимое/Content. В этом разделе выводится списком весь контент, созданный администраторами и пользователями (данные в профайлах, комментарии и т. п.). Здесь администратор работает с контентом, в том числе создаёт новый.
  • Структура/Structure. Через этот раздел администратор получает доступ к различным частям сайта: блокам и их расположению, контент-типам (главная страница, статьи, аватарки в профайлах и т. п.).
    Оформление/Appearance. Отсюда админ задаёт тему оформления административной панели и интерфейса.
  • Расширения/Extend. Раздел для более продвинутых пользователей, умеющих ставить и удалять модули.
  • Конфигурация/Configuration. Здесь настраивается всё, что можно настроить на сайте: от настройки языков и имейла администратора до настроек кэша и размеров картинок.
  • Пользователи/People. Если контент на сайте должен меняться кем-то ещё кроме администратора, то в этом разделе создаются профайлы и роли для таких пользователей.
  • Отчёты/Reports. Здесь можно просмотреть логи сайта, сообщения с предупреждениями и ошибками, информацию об обновлениях, информацию об окружении и ошибках при настройке CMS.
  • Справка/Help. Здесь можно найти список всех работающих на сайте модулей с описанием их функциональности.

Страница сайта с административной панелью Drupal

Начиная с версии Drupal 7 сайт-билдеры и контент-менеджеры работали с темой Seven. За прошедшие с тех пор годы в веб-разработке и веб-дизайне появилось много свежих идей и стандартов, с которыми Seven не имеет ничего общего. Напрашивались перемены.

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

Как начиналась работа над темой админ-панели для Drupal 10

С версией Drupal 8.8 разработчики сайтов получили экспериментальную тему Claro. Она создавалась и доводилась до ума Drupal-энтузиастами, объединившимися в рамках Drupal Administration User Interface and Javascript Modernization Initiative. Их целью было повысить качество работы сайт-билдеров и создателей контента с админ-панелью при помощи появившихся за это время наработок в дизайне интерфейсов и JavaScript. В апреле 2022 года было объявлено о том, что Claro работает стабильно (т. е. тема прошла внутреннее тестирование и не содержит критических ошибок) и вошла в ядро Drupal, начиная с версии 9.4.

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

Вы можете выразить благодарность за проделанную работу членам команды, проводившим Admin UX User Study. Это их аккаунты на drupal.org: Sarah Lowe, Michelle Jackson, Cristina Chumillas, Antonella Severo, и Roy Scholten.

Что нового в теме Claro

Вот полный список элементов интерфейса, которые затронул редизайн.

Base:й

  • Typography
  • Color palette
  • Iconography
  • Layers and surfaces
  • Spacing and sizing

Individual Components:

  • Buttons and Dropdowns
  • Form fields
  • Selects
  • Basic Form Controls
  • Tables
  • Messages
  • Tags or Entity reference
  • Breadcrumb and page title
  • Navigation list
  • Details and accordions

Pages:

  • Node edit form
  • Content list
  • Admin forms

Теперь расскажем о некоторых частностях.

Современный UI с учётом требований accessibility design

Извечный вопрос, какая CMS лучше: Drupal или WordPress? Опрошенные в рамках Admin UX User Study честно признавали, что по части юзабилити выигрывает WordPress. Может быть, улучшения в UI админ-панели, учитывающие требования Web Content Accessibility Standards, однажды приведут Drupal на первое место среди CMS.

Для лучшей разборчивости основным размером шрифта был выбран 16px. Остальные размеры подобраны по модульной сетке.

Размеры шрифтов в Claro. Источник: drupal.org

Уделено внимание работе с пространством для лучшего сканирования элементов интерфейса.

Размеры иконок в Claro. Источник: drupal.org

Отступы и поля в Claro. Источник: drupal.org

Минимальный размер области нажатия для иконок — 24x24px.

Область нажатия у иконок в Claro. Источник: drupal.org

Каким бы языком, системой письменности или операционной системой ни пользовался администратор Drupal-сайта, интерфейс выглядит одинаково читабельным благодаря использованию системных шрифтов.

Письменность Деванагари в интерфейсе Drupal. Источник: drupal.org

Интерфейс Linux, KDE (шрифт Oxygen) и Mac OS (шрифт San Francisco). Источник: drupal.org

Фокус ввода и визуальные подсказки ориентируют пользователя, с какой частью темы и элементом он работает. Сами же интерактивные элементы управления приведены к стандарту AA для простоты работы в админ-панели с сенсорных устройств.

Фокус ввода в Claro. Источник: drupal.org

Иконки максимально упрощены: меньше переплетающихся линий, больше ясных форм и контраста.

Иконки в Claro. Источник: drupal.org

У элементов появились тени (привет, Material Design).

Тени у элементов Claro. Источник: drupal.org

Улучшения в редакторе WYSIWYG

Для наполнения сайта текстами и медиафайлами администраторы сайтов на Drupal будут пользоваться WYSIWYG-редактором CKEditor 5 — поддержка предыдущей версии кончится в 2023 году. Обещают, что работа с CKEditor 5 будет напоминать работу с Microsoft Word и Google Docs, контент можно будет редактировать в реальном времени, а добавлять медиафайлы — по принципу Drag and Drop.

Кибербезопасность

Допустим, что вы человек привычки и вас не впечатляет улучшенный, по сравнению с предшественником, UX/UI в Claro. Но с тех пор как была заявлена новая тема админ-панели, старая получает минимум поддержки от разработчиков и, как следствие, становится уязвимой для киберугроз. Поэтому — если уж не ради своего удобства и удобства работы администраторов вашего сайта, то ради безопасности своих и клиентских данных — планируйте миграцию на Drupal 10.

Заключение

Новые темы не создаются с нуля, а наследуют уже существующим. Claro — это клон Seven, поэтому никаких трудностей администраторы сайтов на Drupal 10 при работе с ней встретить не должны. Наоборот, всё сделано для их комфорта: улучшены внешний вид и работа компонентов, инструкции встроены прямо в интерфейс, соблюдены принципы доступного дизайна, ощущения от работы сравнимы с ощущениями от популярных текстовых редакторов. В переводе с испанского Claro значит «ясный», «чистый», и тема стремится соответствовать своему названию. Поэтому есть основания считать, что с приходом Drupal 10 сайтов на этой CMS станет больше.

Комментарии

Аватар пользователя Andruxa Andruxa 2 февраля в 12:43
2

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

Аватар пользователя gun_dose gun_dose 2 февраля в 14:36
1

Отступы, кстати, значительно уменьшили по сравнению с тем какими они были изначально, пока тема была ещё экспериментальной.
Что касается "хипстерскости" - это же наоборот круто. Клиенты хотят видеть в админке современный дизайн. А все эти старые темы вроде seven нравятся только разрабам старой закалки. Но пора бы уже понять, что админка нужна в первую очередь клиенту, поэтому она должна быть современной, модной, хипстерской и продающей.

Аватар пользователя marassa marassa 3 февраля в 19:14

Andruxa wrote: Тыкать на планшетике в чекбоксики сойдет

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

Аватар пользователя Никки Никки 22 февраля в 16:33
1

По прежнему нужно устанавливать дополнительный модуль, чтобы админское меню было выпадающим. Почему не сделать это по умолчанию?

Аватар пользователя gun_dose gun_dose 22 февраля в 16:38

Я скажу больше. Помимо admin_toolbar нужно включать ещё его подмодуль admin_toolbar_tools, чтобы выпадали ссылки третьего уровня вложенности))

Правда это не совсем относится к теме администрирования, т.к. тулбар показывается в обеих темах.