Objetivos
Temos realizado ajustes preparatórios menores, como mover o botão de alternância de visualização, integrar sugestões de IA e adicionar GIFs à barra de ferramentas, e agora estamos prontos para testar a mudança maior, que está disponível como uma alteração experimental futura.
Nossos principais objetivos são:
-
Atualizar o editor em conformidade com nossas mudanças gerais para modernizar nossa aparência e sensação visual.
-
Melhorar a experiência de composição no mobile.
Gostaríamos muito da sua ajuda para testá-lo antes que ele avance mais.
Como testar
- Acesse Admin → Alterações Futuras em
/admin/config/upcoming-changes - Encontre Redesign do Editor e ative-o.
- Abra o editor (resposta, novo tópico ou nova mensagem) e experimente-o tanto no desktop quanto no mobile.
Você pode desativá-lo a qualquer momento no mesmo local. Aqui no Meta, você pode entrar no novo grupo de teste composer-testers.
Precisamos especialmente de feedback de quem usa componentes de tema ou plugins que personalizem o editor — este redesign altera ligeiramente a estrutura do editor, não apenas seu estilo. Mais detalhes abaixo.
O que mudou
Layout e estrutura
Geral
- O título foi incorporado ao conteúdo, fazendo com que pareça mais um título de documento (usuários do Notion devem achar isso familiar).
- A barra de ferramentas foi movida para o rodapé. Isso exigirá um pequeno ajuste de memória muscular (também me irritou nos primeiros dias
). - Campos de categoria e tags reformulados (incluindo um ícone de tag e exibição mínima de seleção).
- Menos bordas, sensação mais espaçosa.
Markdown
- O título, a categoria e as tags agora ficam em uma área de metadados de largura total acima do editor + painel de visualização, em vez de restritos à coluna esquerda.
Mobile
Um grande fator motivador deste projeto é tentar melhorar a experiência no mobile. Houve uma abundância de reclamações justificadas sobre isso no Meta ao longo dos anos [1] [2] [3].
Para aumentar o espaço disponível durante a composição, estamos experimentando um editor expansível, que sobe ao receber foco, cobrindo os campos do editor, e permanece expandido enquanto o editor estiver em foco. Isso se aplica ao criar um novo tópico ou nova mensagem privada, mas não ao responder.
Isso mais do que dobra o espaço de escrita disponível, passando de 103px para 212px (ao testar no meu dispositivo – os resultados reais podem variar).
Outros
- A alternância da barra de ferramentas foi removida no novo layout.
- Deslize para baixo para dispensar o teclado e recolher o editor ao normal.
- As tags escolhidas só são visíveis quando o menu está aberto. O ícone é colorido para indicar que uma seleção foi feita.
Feedback
Isso ainda é altamente experimental e estou principalmente interessado em descobrir como funciona em tamanhos de tela regulares (desktop e mobile) no Foundation. Tablets, celulares dobráveis, outros temas, etc., ainda não foram otimizados.
Chamando autores de temas e plugins 
Se você se conecta a saídas de plugins do editor ou estila o editor, por favor, teste com o redesign ativado. O DOM mudou e algumas personalizações podem precisar de ajustes:
- O bloco de campos do editor agora é renderizado como um filho de largura total do contêiner do editor, não mais dentro da coluna de texto do editor.
- O conteúdo injetado na saída
composer-fieldsagora aparece acima do título (entre o grupo de categorias/tags e o título), em largura total. - O campo de título é renderizado como sua própria linha, separado do agrupamento de categorias/tags e abaixo deles, em vez de acima.
Nenhuma saída foi renomeada ou removida (embora possam ser alteradas posteriormente para ajustes semânticos nas mudanças) — seus conectores ainda se conectarão. O que mudou é onde e quão largo seu conteúdo é renderizado.
Se você notar algo quebrado em seu tema ou plugin, por favor, responda aqui com o componente/plugin e uma captura de tela. Esse feedback é exatamente para o que esta fase de teste serve.
Design 
Aqui estão algumas compensações ou decisões de design sobre as quais eu mesmo estou em dúvida e que poderiam usar alguma contribuição. Claro, qualquer outro feedback é bem-vindo.
A) Por que o campo de título é tão grande?
A ideia é que ele seja aumentado para um tamanho maior do que um H1 adicionado manualmente, para garantir que seja sempre visualmente o título no documento. Às vezes, olho para ele e penso “nojento”, outras vezes penso “sim, isso funciona”.
Outra ideia é reduzir ligeiramente os títulos existentes para alcançar o mesmo efeito.
B) As tags ocultas são um problema…
…grande o suficiente para não valer a compensação no mobile (mais espaço para a categoria).
Se sim, por quê?
C) Como funciona a animação do editor expansível no seu dispositivo?
Está travando? É bom o suficiente? Uma melhoria? Ideias alternativas ou ajustes para torná-lo melhor?
D) E o botão de sugestão de título da IA?
Eu mesmo não gosto muito de como ele fica flutuando sozinho lá. Como parece para os outros (que o usam)? Muito aberto a ouvir ideias de design.
Obrigado por nos ajudar a acertar isso antes que seja lançado mais amplamente. 
Parece uma forma muito mais moderna e elegante de compor. Eu também tentei mover a barra de ferramentas para a parte inferior no passado, e acho que é muito mais confortável assim.
