Цели
Мы постепенно вводим небольшие подготовительные изменения, такие как перенос переключателя предпросмотра, интеграция ИИ-подсказок, добавление GIF в панель инструментов, и теперь мы готовы попробовать более крупное изменение, доступное для тестирования как экспериментальная грядущая функция.
Наши основные цели:
-
Обновить редактор в соответствии с нашими общими изменениями, чтобы модернизировать внешний вид и стиль
-
Улучшить опыт создания сообщений на мобильных устройствах
Мы будем рады вашей помощи в тестировании, прежде чем эта функция будет распространена дальше.
Как попробовать
- Перейдите в Администрирование → Грядущие изменения по адресу
/admin/config/upcoming-changes - Найдите Переработка редактора (Composer redesign) и включите её
- Откройте редактор (ответ, новая тема или новое сообщение) и поэкспериментируйте как на десктопе, так и на мобильном
Вы можете отключить его в любой момент в том же месте. Здесь, на Meta, вы можете присоединиться к новой тестовой группе composer-testers. На Meta она теперь включена для всех.
Нам особенно нужна обратная связь от тех, кто использует компоненты тем или плагины, настраивающие редактор — эта переработка слегка меняет структуру редактора, а не только его стилизацию. Подробнее об этом ниже.
Что изменилось
Макет и структура
Общие изменения
- Заголовок теперь встроен в контент, что делает его похожим на заголовок документа (пользователям Notion это должно быть знакомо)
- Панель инструментов перемещена в нижнюю часть. Это потребует некоторой привычки (первые несколько дней меня это тоже раздражало
) - Переработаны поля ввода категории и тегов (включая иконку тегов и минимальное отображение выбора)
- Меньше границ, более просторное ощущение
Markdown
- Заголовок, категория и теги теперь находятся в области метаданных на всю ширину над панелью редактора + предпросмотра, а не ограничены левой колонкой.
Мобильные устройства
Одним из главных движущих факторов этого проекта является попытка улучшить мобильный опыт. За последние годы на Meta накопилось множество обоснованных жалоб на этот счёт [1] [2] [3].
Чтобы увеличить доступное пространство при написании, мы экспериментируем с расширяющимся редактором, который при получении фокуса поднимается вверх, закрывая поля редактора, и остаётся расширенным, пока редактор сфокусирован. Это применимо при создании новой темы или нового ЛС, но не при ответе.
Это более чем вдвое увеличивает доступное пространство для написания текста, с 103 пикселей до 212 пикселей (при тестировании на моём устройстве – фактические результаты могут отличаться).
Другое
- Переключатель панели инструментов удалён в новом макете
- Смахните вниз, чтобы скрыть клавиатуру и свернуть редактор обратно в нормальное состояние
- Выбранные теги видны только при открытии меню. Иконка окрашивается, чтобы показать, что выбор был сделан.
Обратная связь
Это всё ещё очень экспериментальная функция, и меня в первую очередь интересует, как она работает на стандартных размерах экранов (десктоп и мобильные) на платформе Foundation. Планшеты, складные телефоны, другие темы и т. д. пока не оптимизированы.
Призыв к авторам тем и плагинов 
Если вы используете точки подключения плагинов редактора или стилизуете редактор, пожалуйста, протестируйте с включённой переработкой. DOM изменился, и некоторые кастомизации могут потребовать корректировки:
- Блок полей редактора теперь рендерится как дочерний элемент контейнера редактора на всю ширину, а не внутри текстовой колонки редактора
- Контент, вставляемый в точку подключения
composer-fields, теперь появляется над заголовком (между группой категорий/тегов и заголовком), на всю ширину - Поле заголовка рендерится как отдельная строка, отделённая от кластера категорий/тегов и расположенная под ними, а не над ними
Ни одна точка подключения не была переименована или удалена (хотя это может произойти позже для семантической адаптации к изменениям) — ваши коннекторы всё ещё будут подключаться. То, что изменилось, — это где и на какой ширине рендерится ваш контент.
Если вы заметите что-то сломанное в вашей теме или плагине, пожалуйста, ответьте здесь с указанием компонента/плагина и скриншотом. Именно для этого и предназначена эта фаза тестирования.
Дизайн 
Вот несколько конкретных компромиссов или дизайнерских решений, в которых я сам сомневаюсь и которые могли бы потребовать вашего мнения. Конечно, приветствуется и всё остальное.
A) Почему поле ввода заголовка такое чертовски большое?
Идея в том, что его размер увеличен до размера, превышающего размер вручную добавленного H1, чтобы гарантировать, что он всегда визуально является заголовком документа. Иногда я смотрю на него и думаю «фу», а иногда «ну, это работает».
Ещё одна идея — немного уменьшить существующие заголовки, чтобы достичь того же эффекта.
Отменено в следующей итерации.
B) Являются ли скрытые теги проблемой…
…достаточно серьёзной, чтобы не стоить компромисса на мобильных (больше места для категории)?
Если да, то почему?
C) Как работает анимация расширяющегося редактора на вашем устройстве?
Она дёргается? Достаточно хороша? Это улучшение? Альтернативные идеи или настройки, чтобы сделать её лучше?
D) Что насчёт кнопки ИИ-подсказки заголовка?
Мне самому не очень нравится, как она одиноко парит там. Как это ощущается для других (тех, кто использует)? Очень открыт к дизайнерским идеям.
Перемещена в сторону, см. ИИ-подсказки заголовков перемещены в помощник редактора
Спасибо за помощь в том, чтобы мы всё сделали правильно, прежде чем функция будет широко выпущена. 
Кажется, это гораздо более современный и элегантный способ создания постов. Я тоже пробовал переносить панель инструментов вниз, и, думаю, так гораздо удобнее.
