帮助我们测试 Composer 重新设计

目标

我们一直在通过一些小型准备工作来逐步推进,例如移动预览切换按钮集成 AI 建议在工具栏中添加 GIF 动图,现在我们已经准备好尝试更大的改动,该改动目前作为实验性的即将推出的功能可供试用。

我们的主要目标是:

  1. 根据我们现代化整体外观和感觉的一般性变更,更新编辑器(Composer)

  2. 改善移动端编辑体验

我们非常希望您在功能进一步推广之前,协助我们进行测试。

如何试用

  1. 前往 Admin(管理员)→ Upcoming Changes(即将推出的变更),路径为 /admin/config/upcoming-changes
  2. 找到 Composer redesign(编辑器重新设计)并启用它
  3. 打开编辑器(回复、新话题或新私信),并在桌面端和移动端上试用一番

您可以随时在同一位置将其关闭。在这里,您可以加入 Meta 上的新测试用户组 composer-testers


我们特别需要来自运行自定义编辑器主题组件或插件的用户的反馈——此次重新设计不仅改变了样式,还略微调整了编辑器的结构。下文将详细介绍。

变更内容

布局与结构

通用

  • 标题已整合到内容中,使其看起来更像文档标题(Notion 用户对此应该很熟悉)
  • 工具栏已移至底部。这需要一点肌肉记忆的调整(前几天这也让我很烦恼 :wink:
  • 重新设计了类别和标签输入框(包括标签图标和极简的选择显示)
  • 减少边框,营造更宽敞的感觉

Markdown

  • 标题、类别和标签现在位于编辑器 + 预览窗格上方的全宽元数据区域,而不再局限于左侧栏。

移动端

改善移动端体验是本项目的一个主要驱动因素。多年来,Meta 上关于此问题有很多合理的投诉 [1] [2] [3]

为了增加编辑时的可用空间,我们正在尝试一种可扩展的编辑器:当获得焦点时,它会向上滑动,覆盖编辑器字段,并在编辑器保持焦点时保持展开状态。这适用于创建新话题或新私信,不适用于回复。

这将使可用的写作空间增加一倍以上,从 103 像素增加到 212 像素(在我的设备上测试的结果——实际结果可能因设备而异)。

其他

  • 新布局中移除了工具栏切换按钮
  • 向下滑动以关闭键盘并将编辑器折叠回正常状态
  • 选中的标签仅在打开菜单时可见。图标会变色以指示已做出选择。

反馈

这仍然处于高度实验阶段,我主要想了解它在 Foundation 主题的标准屏幕尺寸(桌面端和移动端)上的表现。平板设备、折叠屏手机、其他主题等尚未进行优化。

呼叫主题和插件作者 :wrench:

如果您连接到编辑器插件出口(outlets)或自定义编辑器样式,请在启用重新设计的情况下进行测试。DOM 结构已发生变动,某些自定义内容可能需要调整:

  • 编辑器字段块现在渲染为编辑器容器的全宽子元素,不再位于编辑器的文本列内
  • 注入到 composer-fields 出口的内容现在出现在标题上方(在类别/标签组和标题之间),且为全宽
  • 标题字段渲染为单独的一行,与类别/标签簇分离,并位于其下方而非上方

没有重命名或移除任何出口(尽管以后可能会为了语义调整而进行更改)——您的连接器仍将正常工作。改变的是您的内容渲染的位置宽度

如果您发现主题或插件中的任何内容损坏,请在此回复,说明组件/插件名称并附上截图。这正是此测试阶段所需要的反馈。

设计 :crayon:

以下是一些我自己也在犹豫的具体权衡或设计决策,希望能听到一些意见。当然,其他方面的反馈也欢迎。

A) 为什么标题输入框这么大?

想法是将其尺寸调得比手动添加的 H1 更大,以确保它在文档中始终在视觉上呈现为标题。有时我看着它觉得“太丑了”,有时又觉得“嗯,这样挺好用”。

另一个想法是稍微缩小现有标题的尺寸,以达到同样的效果。

B) 隐藏标签是否是个问题…

……在移动端(为类别留出更多空间)的权衡是否值得?

如果是,为什么?

C) 可扩展编辑器的动画在您的设备上表现如何?

是卡顿严重?还可以?有所改进?是否有其他想法或调整建议以使其更好?

D) AI 建议标题按钮呢?

我自己不太喜欢它孤零零地浮在那里的样子。其他人(使用它的人)感觉如何?非常乐意听取设计方面的想法。


感谢大家帮助我们在这项功能更广泛发布之前将其完善。:folded_hands:


  1. New Topic Editor Too Small iOS 26.5 Safari Web - #4 by fearlessfrog ↩︎

  2. Creating/Editing a post on mobile: let's discuss the 2026 Discourse experience ↩︎

  3. Such a tiny window to edit here on a cell phone ↩︎

5 个赞

嗯,老实说,我现在不太喜欢它放在文本区域附近,而不是一个独立的框……理论上听起来不错,但我就是不喜欢它现在的样子,它看起来像是开始文本输入的一部分,尤其是在可视化编辑器上。我更喜欢把它放在它一直所在的位置,也许再加一些水平空间。这完全可能是一种因为看到它改变而产生的本能反应,因为它以前完全没问题,也不需要改变,但根据我所看到的,我仍然不确定我是否喜欢它。

你说得对,它现在看起来确实很孤单。也许它应该固定在标题结束的地方,或者如果设计像我建议的那样恢复,那么旧的方式就可以了。

不过,我确实很喜欢这个。设计看起来很棒(边框更少!),我很期待移动端最终成为一个可用的体验,即使我主要还是桌面用户。

2 个赞

你好 :waving_hand:

这项工作做得真棒!我很喜欢。:heart_eyes: 感觉这是一种更现代、更优雅的编写方式。我之前也尝试过将工具栏移到底部,我觉得这样确实更舒适。

整体来看,界面相当简洁。我注意到一点:当标题缩回且正文获得焦点时,用户可能会感到困惑,不知道如何重新显示标题、类别等部分。既然整个编辑器文本区域在这种情况下是可以滑动的,我认为添加一个可视化的抓手/句柄会有助于向用户提示这一点。

2 个赞

这是否受到 AI 消息停靠式作曲器工作的启发?让我想起了它。

这似乎仅在 Meta 品牌应用中可用?

我喜欢图标变小了(我觉得?)且设计更极简。

但我觉得一个问题是我现在必须看得更高才能看到我输入的内容,因为工具栏挡着。如果工具栏在顶部会怎样?那样可行吗?(我现在用手机,所以无法移动它来查看)

1 个赞

倒也不是 :slight_smile:

不是的,应该与主题无关。你在其他主题上看不到吗?:eyes:

1 个赞

好吧,再仔细看看之后,当键盘收起时,是否可以让主题内容编辑器也收起?否则需要按两次才能完成(一次点击键盘按钮,一次滑动)。

我还觉得无色的类别图标有点不寻常。这是有意设计的吗?

是的,AI 标题建议功能让那里看起来有点拥挤,但我不确定还能放在哪里。

刚开始的时候确实出现过这种情况。看起来现在已经正常工作了。

总的来说,目前在移动设备上表现还不错!

1 个赞

你能详细说明一下吗?你是如何关闭键盘的?另一个方向应该是自动的:缩小编辑器 → 键盘自动关闭,所以只需要一个操作。

哦!你的意思是向下滑动以同时关闭内容编辑器键盘?嗯……

根据我的个人经验,在 Android 上我会点击主页栏中的按钮来关闭键盘。因为当前的编辑器并没有这种功能(即滑动或点击来关闭键盘),所以我觉得这样操作起来更不自然。

1 个赞

明白了,我觉得接线应该没问题。

纯属意外,谢谢提醒!正在修复中

1 个赞

我注意到,当您进入一个主题时,草稿总是会自动弹出,而编辑器却没有这种行为。这是有意设计的吗?(这让我有点烦)

1 个赞

我不太明白你的意思。你是说,当你为某个主题保存了草稿,然后进入该主题时,编辑器就会自动打开吗?如果是这样,这种情况已经存在一段时间了(或者说一直如此,我不太确定);无论如何,行为都没有(有意)被更改过。

还是说你指的是其他情况?

我之前的说法有些偏差。当前的 Composer 确实是打开的,但它稍微隐藏在了后台,新的 Composer “挡住了视线”。不过我现在发现可以移动这个新 Composer :slight_smile:

1 个赞