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