med大屏幕上的菜单编辑器UI问题

[加里特日食]

你好，

使用菜单编辑器只报告两个UI问题；

1. 在不太位于中等断点但不太宽的屏幕上，您会发现“保存菜单”按钮位于菜单名称输入的正下方。

*当输入与按钮重叠时，按钮被聚焦时，这是最糟糕的。

2. 在较大的屏幕上，当输入位于按钮旁边时，您会发现按钮稍大一些。

*我看到一些票据在UI的其他部分标记类似的问题。

谢谢

[加里特日食]

在大屏幕的菜单名称输入中直接创建菜单。

[加里特日食]

按钮w/焦点与菜单名称输入重叠。

[加里特日食]

与“菜单名称”输入相比，“保存菜单”按钮的高度稍大

[加里特日食]

#48430类似于我提到的第2项

[曼4托曼]

它发生在783px到852px之间。

[贾维尔卡萨雷斯]

回复男人4女人:

它发生在783px到852px之间。

我的电话是783-852和961-976。

补丁修复了第一个，但没有修复第二个……：(

[audrasjb公司]

菜单：修复大屏幕上的菜单编辑器响应问题

[audrasjb公司]

谢谢你的补丁@man4toman，

我更新了补丁，在49576.1差异:

• 将媒体查询的值更改为（最小宽度：783px）和（最大宽度：870px）处理更多用例
• 一些编码标准修复

我想现在可以走了，谢谢！
添加屏幕截图和犯罪关键字。

干杯，
Jb公司

[audrasjb公司]

59576.1.diff之后

[曼4托曼]

@JavierCasares是的，你说得对，我错过了第二个。

谢谢@audrasjb，更新的补丁很好。

[加里特日食]

感谢您提供补丁@man4toman&@audrasjb和测试@JavierCasares。测试最新的补丁，它在新菜单和编辑菜单屏幕上都很适合我自己。

@audrasjb在罚单中的第二个项目上，我应该把它分解成一个唯一的罚单，我们应该在这里处理还是在那里有另一个ui罚单，它处理字段和按钮高度之间的差异。

在较大的屏幕上，当输入位于按钮旁边时，你会发现按钮稍大。

*我看到一些票据在UI的其他部分标记类似的问题。

非常感谢

[曼4托曼]

我们可以删除大按钮类名来自创建/保存菜单，它修复了高度问题。
但另一件事会出现，两个高度创建/保存菜单按钮将不同。

[audrasjb公司]

嘿，

我认为按钮高度问题应该单独处理，或者#48531，因为它是自WP 5.3 CSS管理员更改后更为可见的内容。

[加里特日食]

谢谢你看@man4toman，这样这张票就可以继续了。我把第二期移到了#48531作为@audrasjb，这似乎是一个更好的家。
让我们在这里提交第一个问题，并在更合适的问题中查看另一个问题。

[阿费西娅]

谢谢@garrett-eclipse。为了澄清，WordPress 5.3中没有引入垂直对齐问题。

对于与CSS相关的问题，最好总是与以前的版本进行比较，以验证问题的原始原因。正如@man4toman所提到的，按钮有一个大按钮使其高度为32像素的类。它比输入字段高。我不明白为什么这个按钮应该是大的所以我就把大按钮类。

在WordPress 5.2中，这一点更加明显，请参阅下面的屏幕截图。在5.2版中，我还可以重现下拉输入的按钮和焦点样式问题（虽然不太明显）。

我认为5.3略微改善了对齐。关于各种表单控件之间垂直对齐的一般问题，这是管理员长期存在的问题。通常，根本原因是CSS垂直对齐属性在管理员中的使用是不一致的，具体视情况而定。

从长远来看，逐个案例的调整是不好的，因为它们引入了大量的不一致性，而这些不一致性实际上很难修复。对于一些CSS健全性，应该删除异常和特殊情况。该问题也在https://core.trac.wordpress.org/ticket/48420#评论：20

我正处于需要做出决定的时刻。要使所有表单控件在默认情况下都具有良好的垂直对齐方式（尤其是在可见标签或其他文本靠近它们的情况下），我可以想到两个可能的选项：

• 使用flexbox：然而，这将需要一个包装器元素作为flex容器，因此需要更改大量的标记输出，这并不理想
• 使用内联格式上下文（内联级框）的CSS属性，如垂直对齐

我倾向于对所有表单控件使用vertical-align:middle，因为它可以对齐不同高度的元素和文本。然而，这意味着表单控件不应使用上边距或下边距。

没有做出决定，这个问题仍然需要整个行政部门解决。

[阿费西娅]

在WordPress 5.2中，错位更加明显。

[阿费西娅]

在WordPress 5.2中，按钮也放在输入下面

[加里特日食]

另一种方法使用页边空白来说明问题的发生，并考虑到备用区域设置的可变字符串长度。

[加里特日食]

谢谢@afercia，我很感激您的概述，并衷心同意我们应该避免在这里逐个进行调整。让我们将按钮大小和对齐项目留给相关的票据(#48531&#48420)对于这些不一致，可以采取适当的决策和行动。对于这个特定的bug，提供了补丁@audrasjb(49576.1差异)仍然正确应用，但只解决了一个断点的问题，没有考虑到它在x和y之间的中断。

我试图扩展媒体查询，但也发现由于语言环境的原因，字符串长度也受到了影响，几乎导致查询应用于大多数桌面。尝试仅减少输入宽度在没有媒体查询的情况下有效，但在使用较长字符串区域设置（如Armenian）进行测试时无效。

在49576.替代.diff我找到了另一种解决方案，使用边距为输入和按钮提供自己的空间，而不管它们的距离或语言环境字符串的长度。

这种方法似乎工作得很好，并且很喜欢团队的投入。如果我们都同意，让我们将此修复应用于此特定问题。

[加里特日食]

说明备用补丁。另一个好处是，我们不再强制将菜单名称标签设置为自己的行。

[阿费西娅]

@garrett-eclipse看看替代方法，看起来是一个不错的方法。一些考虑因素：

• 我不会添加新断点最小宽度：783px，这将是前所未有的核心。我倾向于认为我们应该尝试重用现有的断点。有可能扭转这种做法吗？如：默认情况下添加这些规则，并在小于782px时重置它们。
• 我看到你在测试时没有菜单。当设置了一个由2-3层嵌套的菜单项时，此页面响应行为会发生很大的变化，基本上会中断大约950/782像素之间的视口宽度。这是一个与此修补程序无关的预先存在的问题。需要注意的是，这个页面有更严重、长期存在的布局问题，需要进行重大重构

[audrasjb公司]

这张票还需要修改。
考虑到我们即将做好准备，让我们把这个移到5.6而不是未来版本.

感谢@garrett-eclipse为您所做的工作。

[克布尔戈因]

这是在#core-css分类会议上讨论的，有人问我们是否需要保留两个“创建菜单”按钮？或者我们是否可以删除一个？

请参阅此处的成绩单：​https://wordpress.slack.com/archives/CQ7V4966Q/p1598560491097900

[托盘]

不需要设计。讨论分诊9/7/20

[托盘]

不需要设计。讨论了9/7/20分诊（抱歉重复评论）

[加里特日食]

刷新以避免引入新媒体查询

[加里特日食]

回复阿费西娅:

@garrett-eclipse看看替代方法，看起来是一个不错的方法。一些考虑因素：

• 我不会添加新断点最小宽度：783px，这将是前所未有的核心。我倾向于认为我们应该尝试重用现有的断点。有可能扭转这种做法吗？如：默认情况下添加这些规则，并在小于782px时重置它们。
• 我看到你在测试时没有菜单。当设置了一个由2-3层嵌套的菜单项时，此页面响应行为会发生很大的变化，基本上会中断大约950/782像素之间的视口宽度。这是一个与此修补程序无关的预先存在的问题。只需注意，此页面存在更严重、长期存在的布局问题，需要进行重大重构。请另附说明：）

谢谢@afercia，感谢您的反馈。我已经更新了实现，以避免在中出现新的媒体查询49576.3.差异。我认为它只需要一些测试就可以了。

在审查过程中，多次提到双按钮以及您提到的布局问题。我觉得这些都不在这个问题的范围内，更多的是一个增强，所以不希望他们破坏这个修复。因此，我打开了#51631在将来的版本中作为增强功能解决这些问题。

@afercia/@audrasjb你能重新测试一下吗，看看我们是否能在Beta 2之前获得它。

[audrasjb公司]

补丁解决了这个问题

[audrasjb公司]

谢谢@garrett-eclipse，你太棒了🙌
这个补丁很适合我这边。

[口香糖27]

@garett-eclipse-In补丁49576.3.差异​你能把两张保证金的财产做成单张吗？如下所示

#保存菜单标题{边距：0；底部边距：4倍；}

替换为

#保存菜单标题{边距：0 0 4px；}

[口香糖27]

更新的修补程序。

[加里特日食]

很好的接球@mukesh27，谢谢。感谢@audrasjb的测试。这看起来不错。

[海伦]

我不知道我是不是没有正确地测试这个，还是尽管在多个浏览器中尝试过，但我还是遇到了缓存问题，但最新的补丁似乎并没有为我解决这个问题。我认为这是一个相当小的错误，所以我将从5.6开始，这样我们就可以专注于其他事情了，因为我们现在处于测试后期。

[加里特日食]

回复海伦:

我不知道我是不是没有正确地测试这个，还是尽管在多个浏览器中尝试过，但我还是遇到了缓存问题，但最新的补丁似乎并没有为我解决这个问题。我认为这是一个相当小的错误，所以我将从5.6开始，这样我们就可以专注于其他事情了，因为我们现在处于测试后期。

感谢测试@helen，您的屏幕截图说明了在解决按钮焦点和输入之间的干扰问题时改进的行为；

不用担心将赌注押到5.7，我们将访问相关的增强票#51631希望能联合起来。

[hellofrom托尼亚]

安排此票据用于测试Scrub，但需要更多信息供测试人员进行QA：

• 重现问题的步骤是什么？
• 是否有任何测试依赖项，例如插件或脚本？
• 应用修补程序后的预期行为是什么？

[帕尔约阿希姆]

我看了@helen以前的屏幕截图，注意到在WordPress beta 5.7中，菜单屏幕只包含一个保存菜单按钮。位于底部。顶部的那个看起来已经被删除了。

基于最初发布的顶部菜单按钮的位置，因为它不再存在，使得票据无效。我建议我们关闭罚单。

[帕尔约阿希姆]

在5.7的测试版中调整菜单屏幕的大小

[萨伯恩哈特]

@paaljoachim谢谢你的检查。我同意在顶部按钮隐藏在[50115].

我将此称为已修复，但可以随意更改分辨率。

多级菜单布局(评论：26)可以是一张单独的票。