Objetivos
Hemos estado avanzando con pequeños cambios de preparación, como mover el interruptor de vista previa, integrar sugerencias de IA, añadir GIFs a la barra de herramientas, y ahora estamos listos para probar el cambio más grande, que está disponible para probar como un cambio experimental próximo.
Nuestros objetivos principales son:
-
Actualizar el compositor en línea con nuestros cambios generales para modernizar nuestra apariencia y sensación
-
Mejorar la experiencia de composición en móviles
Nos encantaría tu ayuda para probarlo antes de que avance más.
Cómo probarlo
- Ve a Administrador → Cambios próximos en
/admin/config/upcoming-changes - Busca Rediseño del compositor y actívalo
- Abre el compositor (respuesta, nuevo tema o nuevo mensaje) y pruébalo tanto en escritorio como en móvil
Puedes desactivarlo en cualquier momento desde el mismo lugar. Aquí en Meta puedes unirte al nuevo grupo de prueba composer-testers.
Necesitamos especialmente comentarios de quienes utilicen componentes de temas o plugins que personalicen el compositor — este rediseño cambia ligeramente la estructura del compositor, no solo su estilo. Más sobre esto a continuación.
Qué ha cambiado
Diseño y estructura
General
- El título se ha incorporado al contenido, haciendo que parezca más como un título de documento (los usuarios de Notion encontrarán esto familiar)
- La barra de herramientas se ha movido al pie. Esto requerirá un pequeño ajuste de memoria muscular (también me molestó durante los primeros días
) - Campos de categoría y etiqueta rediseñados (incluyendo un icono de etiqueta y una selección mínima)
- Menos bordes, sensación más espaciosa
Markdown
- El título, la categoría y las etiquetas ahora se encuentran en un área de metadatos de ancho completo sobre el editor + panel de vista previa, en lugar de estar restringidos a la columna izquierda.
Móvil
Un factor impulsor muy importante de este proyecto es intentar mejorar la experiencia en móviles. Ha habido una abundancia de quejas justificadas al respecto en Meta a lo largo de los años [1] [2] [3].
Para aumentar el espacio disponible mientras se escribe, estamos experimentando con un editor expandible, que se desliza hacia arriba al enfocarse, cubriendo los campos del compositor, y permanece expandido mientras el editor está enfocado. Esto aplica al crear un nuevo tema o nuevo mensaje privado, no al responder.
Esto más que duplica el espacio de escritura disponible, pasando de 103px a 212px (al probar en mi dispositivo – los resultados reales pueden variar).
Otros
- El interruptor de la barra de herramientas se elimina en el nuevo diseño
- Desliza hacia abajo para descartar el teclado y colapsar el editor de nuevo a normal
- Las etiquetas seleccionadas solo son visibles cuando se abre el menú. El icono está coloreado para indicar que se ha hecho una selección.
Comentarios
Esto sigue siendo altamente experimental y principalmente me interesa saber cómo funciona en tamaños de pantalla regulares (escritorio y móvil) en Foundation. Tablets, teléfonos plegables, otros temas, etc., aún no han sido optimizados.
Llamada a autores de temas y plugins 
Si te conectas a salidas de plugins del compositor o styles el compositor, por favor prueba con el rediseño activado. El DOM se ha movido, y algunas personalizaciones pueden necesitar ajustes:
- El bloque de campos del compositor ahora se renderiza como un hijo de ancho completo del contenedor del editor, ya no dentro de la columna de texto del editor
- El contenido inyectado en la salida
composer-fieldsahora aparece sobre el título (entre el grupo de categoría/etiquetas y el título), de ancho completo - El campo de título se renderiza como su propia fila, separado del grupo de categoría/etiquetas y debajo de ellos en lugar de encima
Ninguna salida ha sido renombrada o eliminada (aunque podrían serlo más tarde para ajustar semánticamente los cambios) — tus conectores aún se adjuntarán. Lo que ha cambiado es dónde y qué tan ancho se renderiza tu contenido.
Si encuentras algo roto en tu tema o plugin, por favor responde aquí con el componente/plugin y una captura de pantalla. Ese feedback es exactamente para lo que sirve esta fase de pruebas.
Diseño 
Aquí hay algunas compensaciones o decisiones de diseño sobre las que yo mismo dudo y que podrían necesitar alguna opinión. Por supuesto, todo lo demás también es bienvenido.
A) ¿Por qué el campo de título es tan malditamente grande?
La idea es que se aumente a un tamaño mayor que el de un H1 añadido manualmente, para asegurar que siempre sea visualmente el título en el documento. A veces lo miro y pienso “qué asco”, otras veces pienso “sí, esto funciona”.
Otra idea es reducir ligeramente los títulos existentes, para lograr el mismo efecto.
B) ¿Las etiquetas ocultas son un problema…
…suficientemente grande como para no valer la compensación en móvil (más espacio para la categoría).
Si es así, ¿por qué?
C) ¿Cómo funciona la animación del editor expandible en tu dispositivo?
¿Es una ciudad de fallos? ¿Suficientemente bueno? ¿Una mejora? ¿Ideas alternativas o ajustes para mejorarlo?
D) ¿Qué hay del botón de sugerencia de título de IA?
No me gusta demasiado cómo flota solo allí. ¿Qué tal se siente para otros (que lo usan)? Muy abierto a escuchar ideas de diseño.
Gracias por ayudarnos a hacerlo bien antes de que se lance más ampliamente. 
Se siente como una forma mucho más moderna y elegante de componer. También intenté mover la barra de herramientas a la parte inferior en el pasado, y creo que es mucho más cómodo así.
