跳到内容
新问题

对这个项目有疑问吗?注册一个免费的GitHub帐户以打开一个问题,并联系其维护者和社区。

单击“注册GitHub”,表示您同意我们的服务条款隐私声明。我们偶尔会向您发送与帐户相关的电子邮件。

已经在GitHub上了?登录到您的帐户

启用“显示按钮文本标签”时,全局样式面板标题按钮文本重叠 #61761

正常开放
阿费西娅已打开此问题2024年5月17日·9条评论
正常开放
标签
[功能]显示按钮文本标签 Post and Site Editor中的首选项,使按钮显示文本而不是图标 [焦点]可访问性(a11y) 影响可访问性并需要相应审查的更改(例如标记更改)。 需要设计反馈 需要一般设计反馈。 [Package]编辑站点 /包/编辑位置 [类型]回归 与最新版本中的回归相关

评论

@阿费西娅
复制链接
贡献者

描述

启用“显示按钮文本标签”首选项时,“样式”面板标题中按钮的文本重叠,使文本几乎不可读。

来自主干的屏幕截图:

大旅行箱

这似乎是对WordPress 6.5的回归,文本是可读的。截图:

工作包65

认为最近添加的是紧凑的尚未针对“显示按钮文本标签”测试按钮的CSS类和样式。无论如何,按钮文本不应重叠。

值得注意的是,面板标题中的水平空间非常有限。首先,放置一个标题、三个动作按钮和一个关闭按钮似乎并不理想。

另一方面,在设计和测试阶段,“Show button text labels”首选项似乎经常被忽略和遗漏。我希望看到这个功能在这个项目中被视为一流的公民,我认为任何新功能的设计都应该提供“显示按钮文本标签”的设计和模型。

注意:我创建了一个新的GitHub标签[功能]显示按钮文本标签,类似于其他使用的首选项,如[功能]无干扰以更好地跟踪与此相关的问题。有三个问题和PR需要修复,以修复启用了此首选项的按钮的损坏,这些问题都分散在周围,很难搜索。

分步复制说明

  • 转到站点编辑器>选项>首选项>辅助功能,并启用“显示按钮文本标签”首选项。
  • 打开“样式”面板。
  • 注意按钮文本重叠。

屏幕截图、屏幕录制、代码片段

无响应

环境信息

无响应

请确认您已搜索回购中的现有问题。

是的

请确认您已测试除古腾堡外的所有插件。

是的

@阿费西娅 阿费西娅补充[焦点]可访问性(a11y) 影响可访问性并需要相应审查的更改(例如标记更改)。 需要设计反馈 需要一般设计反馈。 [类型]回归 与最新版本中的回归相关 [Package]编辑站点 /包/编辑位置 [功能]显示按钮文本标签 Post and Site Editor中的首选项,使按钮显示文本而不是图标标签2024年5月17日
@贾斯穆森
复制链接
贡献者

你想要什么样的设计反馈?

@阿费西娅
复制链接
贡献者 作者

@贾斯穆森在我看来:

  • 根本问题是,所有这些按钮都不应该首先放在那里。
  • 如果相关的话,我会感谢设计团队为“Show button text labels”首选项提供设计和模型,因为这是界面的一个组成部分。

面板标题中的按钮太多,可能只包含标题和X关闭按钮:

屏幕截图2024-05-21,10 04 39

@贾斯穆森
复制链接
贡献者

啊,我同意,纯文本标签模式状态不佳,块工具栏尤其需要大量关注,检查器中有许多缺失的部分。我之所以这么问,是因为这似乎主要报告了一个回归,希望很容易及时修复6.6。这是否意味着围绕扩展主题的一个更大的问题?在这种情况下,您对用于处理溢出的下拉列表有何看法?

@阿费西娅
复制链接
贡献者 作者

我认为唯一真正解决这个问题的方法是停止在面板标题中放置按钮。
另请参见#61553理想情况下,面板标题应仅包含:

  • 面板标题
  • 关闭按钮(如果有)

其他控件不应放置在那里,因为启用“显示按钮文本标签”时可用空间不足。visibel文本的长度确实无法预测。因此,面板的UI应该提供另一个位置,使visibel文本可以完全可读并根据需要流动。

我认为这种特定的回归可以及时修正6.6,但真正的解决方案是让任何设计都考虑到“显示按钮文本标签”的偏好。

纯文本标签模式状态不佳

不幸的是,是的。我希望看到它被优先化,添加到设计指南中,并对任何涉及UI相关部分的问题/公关进行审查。

@阿费西娅
复制链接
贡献者 作者

当然,这个问题在英语以外的语言中更为明显,因为它们通常使用更长的字符串。例如:意大利语:

截图2024-05-27,15 54 29

在这种情况下,不确定CSS修复是否足够。想知道面板是否应该有“副标题”。

@阿费西娅
复制链接
贡献者 作者

#61726当启用“显示按钮文本标签”首选项时,LinkControl预览已得到改进,可以在第二行中显示文本按钮。动画GIF演示:

链接控件显示按钮文本标签

以类似的方式,我建议在启用首选项时更改面板的标题以显示“子标题”,并在其中呈现文本按钮。

@达尼·瓜迪奥拉
复制链接
贡献者

@贾斯穆森当设置被启用时,可以采用“副标题”方法吗@阿费西娅? 我个人认为这是一个合理的妥协。

@贾斯穆森
复制链接
贡献者

在这一点上,毫无疑问,任何事情都比我们所拥有的要好。但我不清楚添加副标题是否能解决当前的问题。如果有的话,允许页眉当然,这将是一次可怕的经历。

这就是为什么我们需要在更普遍的意义上更好地处理溢出。采取这个例子,块工具栏被裁剪在视口的两侧,这没有什么用处,但这里的解决方案不是限制插件可以添加到块工具栏中,因为即使我们将最大值设置为n个按钮,它们仍然可以提供长的描述性动作。即便如此,也有翻译,德语平均增加了20%。

因此,我们需要一些方法来处理溢出,虽然它可以根据具体情况而定,但我建议将这些原语视为WordPress组件系统的一部分,然后提供工具和最佳实践来利用它们。即使我们在块编辑器中处理所有边缘案例,也不会让插件受益。

@阿费西娅
复制链接
贡献者 作者

阿费西娅 评论2024年7月8日

更深入地研究这个问题,我认为有两个独立的问题:

1
补充区域标题中按钮的大小在中更改#61331现在是契约。没关系。不过,我不知道为什么现在要使用“关闭”按钮小的.

  • 在聚焦按钮时,不同的尺寸非常明显。请参阅下面的屏幕截图。
  • 应始终首选提供更大目标大小(尽可能多)的Sze。

为了保持一致性和更好的可用性,我会使X关闭按钮紧凑,但不知道为什么它需要变小。
复写的副本@里奇塔博

屏幕截图:样式面板和插件面板:

大小不一致

2
第二个问题是契约小的Button组件的大小是唯一使用固定宽度。请参阅相关CSS:

&.紧凑 {
高度: $按钮大小紧凑;
&.has-icon:不(.has-text) {
衬垫:0;
宽度:$按钮大小紧凑;
最小宽度:$按钮大小紧凑;
}
}
&.is-小{
高度:$按钮-大小-小;
线路高度:22二甲苯;
衬垫:0 8二甲苯;
字体大小:11二甲苯;
&.has-icon接口:不是(.has文本) {
衬垫:0;
宽度:$按钮-大小-小;
最小宽度:$按钮-大小-小;
}
}

固定宽度仅在按钮使用图标且不包含文本时应用。然而,“显示按钮文本标签”的当前实现不使用文本。它使用CSS生成的内容。通过设置固定宽度,这些大小与“显示按钮文本标签”不兼容。

我不知道为什么一开始就需要固定宽度。似乎第一个固定宽度是很久以前为小的尺寸英寸#19344

我倾向于认为所有固定宽度都应该删除,它们对我来说似乎没有必要。

免费注册 在GitHub上加入此对话.已经有帐户了吗?登录以发表评论
标签
[功能]显示按钮文本标签 Post and Site Editor中的首选项,使按钮显示文本而不是图标 [焦点]可访问性(a11y) 影响可访问性并需要相应审查的更改(例如标记更改)。 需要设计反馈 需要一般设计反馈。 [Package]编辑站点 /包/编辑位置 [类型]回归 与最新版本中的回归相关
项目
还没有
开发

没有分支或拉请求

3名参与者