管理CSS：标准化表单控件的高度、对齐方式等。

[阿费西娅]

核心默认样式没有为表单控件设置标准高度。只有按钮有4个默认大小。输入和选择不会。

当水平对齐表单控件时，这一点非常明显。以下是WordPress 5.2（Chrome和Firefox）中的一个示例：

看看select、input=text、input=number和按钮如何具有不同的默认高度，并且对齐方式远非理想。

为了使表单控件在必要时对齐，例如在Posts列表的顶部，core设置了一系列默认样式的例外，覆盖了默认的CSS。

默认情况下使用标准高度和良好的对齐方式不是很好吗？以下是WordPress 5.3中引入的新样式的示例：

更不用说水平对齐表单控件的插件被强制覆盖核心CSS。

这不应该发生：核心应该提供良好的默认样式，并且不要求插件作者做额外的工作。

最近一次​设计和无障碍团队在Slack上共享会议（需要注册）同意将所有表单控件的高度标准化为30像素，因此这是对​WordPress 5.3中引入的管理CSS更改看见门票：47477#评论：67

本提案的主要目标：

• 使表单控件具有相同的默认高度（30像素）并对齐良好
• 这样，就不再需要各种例外
• 小按钮、正常按钮、大按钮和英雄按钮的高度将从WordPress 5.2的24/28/30/46像素高度更改为26/30/32/46像素，因此正常大小为30像素，并且大小之间的比例保持不变
• 在某些方面改进新表单控件的样式，例如在Customizer中

手机：

在WordPress 5.2及以前的版本中：

• 除“英雄”外的所有按钮都被“压平”到31像素的高度
• 输入=文本，输入=数字，输入=电子邮件，输入=密码字段高度为40像素
• 选择获得40像素的高度
• input=搜索字段和其他很少使用的输入（日期、时间等）的高度为32像素
• input=url字段的高度为26像素
• Customiser覆盖并重置了核心响应样式：在我看来，这不是一个好主意，应该重新考虑
• 理想情况下，核心中应该没有例外：所有表单控件都应该始终具有默认样式

在WordPress 5.3上：
其中一些不一致已经在WordPress 5.3中得到了修复，大多数控件的高度标准化为40像素。还需要进一步改进，以使所有内容都达到40像素，例如：按钮组。

[阿费西娅]

需要探索的进一步改进：

输入和选择元素的默认边距为1像素
请参见https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/forms.css？rev=46559&marks=29-32号L28
我想建议删除它，因为它使控件对齐在点核心本身就很麻烦，它已经在不同的地方重置了这个默认边距。我确实意识到它的存在有一些历史原因，但我认为今天没有什么好的理由保留它，至少可以说，它一直是令人讨厌的。

标准化控制边界半径
表单控件具有不同的边界半径值，在古腾堡也是如此。不确定这有什么好的原因。标准化会很好。请参见门票：34904#评论：109这需要一个设计决策。

将所选字体大小恢复为14像素
这在中更改为13像素https://core.trac.wordpress.org/changeset/46356但在我看来，这并不是一个很大的改进，而且会使校准变得麻烦。所有表单控件的字体大小都应该相同，因为这会影响水平对齐和计算的线条高度值。这需要设计反馈。

Windows上的表格边界Webkit错误
确保使用边界塌陷：塌陷；上.宽脂肪表来解决仅在Windows上发生的奇怪Webkit故障。这似乎是由5.3管理员CSS更改后的行高值四舍五入触发的，但它在技术上无关，似乎真的是Webkit的一个错误。无论如何，边界塌陷：塌陷；是标准的，而且比现在更好边界间距：0值得注意的是核心已经使用边界塌陷：塌陷；在其他表上，应该是用户打开的.widefat（宽默认）表以及从一开始。@azaozz的帽子尖​在Slack上报告.

解决边缘案例

• tinymce按钮，例如插入链接UI按钮
• 改进.分页操作按钮-链接
• 考虑添加-moz外观：无选择样式以覆盖旧的Firefox版本，如SeaMonkey，请参阅门票：47477#评论：73
• 在核心的一些地方，超基本表单“验证”为无效字段添加了一个红色边框：至少在Customizer中，这似乎无法很好地处理新的输入样式（参见屏幕截图）

请报告在与WordPress 5.2仔细比较后发现的任何故障，以确保它实际上与5.3中引入的CSS更改有关：）

[阿费西娅]

48420.迪夫​是解决上述大多数问题的第一步，并建立在最后一个补丁上传于47477.

[阿费西娅]

#48429被标记为重复。

[阿费西娅]

#48430被标记为副本。

[阿费西娅]

一些历史背景：

在WordPress 3.7上，表单控件的默认对齐方式非常好。似乎对这种细节给予了一些关注。请参阅下面的第一张截图。

随着WordPress 3.8的重新设计，事情发生了一些变化：不同的按钮和选择高度加上一些新的垂直对齐CSS属性使默认对齐中断。在某种程度上，这可以被认为是一种回归。

注意：为了了解表单控件在WordPress 3.7和3.8中的实际外观，应该使用当时使用的浏览器（2013年10月）对其进行测试。很可能一些CSS旨在覆盖浏览器之间的布局怪癖，尤其是旧的IE版本。下面的截图展示了最新Chrome 78的渲染效果。

[阿费西娅]

WordPress 3.7上的表单控件对齐

[阿费西娅]

WordPress 3.8上的表单控件对齐

[audrasjb公司]

里程达到5.4早期的（可能有5.3.x点版本的后端口）

[阿费西娅]

关于：边界半径：在选择/按钮和输入字段之间是不同的。输入稍微“四舍五入”（4px），不确定是否有具体原因：

古腾堡也不同，这里的新风格来自：

古腾堡WP 5.2上的边界半径

古腾堡WP 5.3边界半径

任何变化都需要移植到古腾堡。

[阿费西娅]

这似乎只发生在Windows最新的Firefox上：单选按钮“蓝点”没有完全居中：

它出现了浮动：左侧应用于CSS生成的“蓝点”是不一致的根本原因，据我所知，它不再需要。

[阿费西娅]

#48465被标记为重复。

[詹姆斯科斯特]

小按钮、正常按钮、大按钮和英雄按钮的高度将从WordPress 5.2的24/28/30/46像素高度更改为26/30/32/46像素，因此正常大小为30像素，并且大小之间的比例保持不变

好奇保持这个比率有多重要？

考虑到​建议的类型比例所有值都使用4的倍数，我想知道默认的表单元素高度是否应该是28px，因为30与新的类型比例不一致？

看起来新按钮样式的大小是：

小：24px；
正常：28px；
大：32px；

我认为将这种比例应用于其他形式元素也是有意义的。

[阿费西娅]

当然。在这张罚单之后，提出了间隔系统的建议。我完全支持标准化，但Small:24px、Normal:28px、Large:32px感觉太小了。我会把所有东西都放大4像素。在手机上，除了“英雄”，所有尺寸都应该“扁平化”到40像素。

[谢尔盖·比尤科夫]

相关：#48531

[谢尔盖·比尤科夫]

相关：#48537

[阿费西娅]

#48537个被标记为副本。

[阿费西娅]

关于Windows上的垂直对齐，我强烈建议考虑更改字体堆栈，请参阅#48423.

[GDragoN公司]

我注意到5.3中还有几个问题：

1. 输入type=number在右侧有填充，因此箭头位于控制区域内，而不是靠近边框。

2. 所有管理员端列表页面（帖子、页面…）上的搜索控件未与新按钮正确对齐。

3. 自定义程序中的选择控件中的文本垂直对齐错误（高度和/或线条高度有问题）。

[阿费西娅]

感谢大家的报告和反馈。由于表单控件的呈现因操作系统和浏览器而异，我希望能在报告中添加以下详细信息：

• 使用的操作系统
• 浏览器版本
• 请记住在所有插件都被停用且默认主题被激活的情况下进行测试

[阿费西娅]

相关：#48269.

[阿费西娅]

48420.2.差异​在上一个补丁的基础上构建，并添加了更多的调整。还有一些问题需要解决，但我认为补丁已经为第一轮测试做好了准备。

在接下来的几天里，我将尝试总结补丁的功能和剩余功能。与此同时，我正处于需要做出决定的时刻。要使所有表单控件在默认情况下都具有良好的垂直对齐方式（尤其是在可见标签或其他文本靠近它们的情况下），我可以想到两个可能的选项：

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

我倾向于使用垂直对齐：中间因为它能够对齐不同高度的元素和文本。然而，这意味着表单控件不应使用上边距或下边距。

以下是使用的默认路线示例垂直对齐：中间:

其他值，如顶部或基线需要根据具体情况对CSS进行调整，这是一个很好的避免方法。这些CSS更改的目标之一是，所有WordPress管理表单控件都应该是现成的，不需要任何进一步的工作或调整。

示例垂直对齐：顶部:

示例垂直对齐：基线:

[动态链接库]

#48269被标记为副本。

[audrasjb公司]

将其移至5.3.1。至少要在下一个小调中处理一些第一次修复。

[阿佐兹]

相关：#48531.

快速查看48420.2.diff和5.3中提交的类似更改：通常从“硬编码”转换现有值二甲苯到“动态”雷姆,%、无单位线高等是一个好主意，似乎“足够安全”。但是，同时更改这些值不是一个好想法，也不“安全”，尤其是在点版本中：）

理想情况下，转换应该首先进行，提交，在所有浏览器中进行（彻底）测试，并在需要时最终进行优化和修复。

之后，可以对值进行任何更改。

[阿佐兹]

5.3中CSS更改引入的另一个错误/回归（可能适合此处的上下文）是<选项>selects中的元素以及某些情况下缺少的下边框/轮廓。

[米歇拉雷斯塔德]

边界半径差异是在​本周的设计会议.

听起来人们都同意他们应该保持一致。对于3px，没有什么好的论据。4px的参数为：

• 它非常适合8px的网格。
• 它允许在沿途的其他元素上使用2px的边界半径，从而提供了更大的灵活性。它不会在当前的设计系统中使用，但它是一个很好的考虑因素。

在提出这些论点之前，我一直使用3px，现在建议使用4px。同样，更重要的是这些表单元素要保持一致。

[阿费西娅]

回复阿佐兹:

5.3中CSS更改引入的另一个错误/回归（可能适合这里的上下文）是缺少的填充<选项>selects中的元素以及某些情况下缺少的下边框/轮廓。

我认为5.3中的CSS更改没有触及选择选项。在我看来，这两个问题都不算倒退。

我看不出有什么不同<选项>元素填充与5.2相比。事实上，我认为WordPress没有设计<选项>元素，因为它们不能在浏览器之间保持一致的样式。

关于缺少的下边框/轮廓，我也可以在WordPress 5.2中复制，至少在Windows上是这样的Firefox浏览器Chrome，尽管它似乎是随机发生的，没有明显的原因。请参阅下面的屏幕截图（Windows Chrome/Firefox）。

[阿费西娅]

在WordPress 5.2中选择选项

[阿费西娅]

在WordPress 5.3中选择选项

[audrasjb公司]

48420.2.diff-帖子列表顶部的表单字段现在已正确对齐

[audrasjb公司]

48420.2.diff-导入/导出个人数据屏幕中的表单字段现已对齐

[audrasjb公司]

48420.2.diff-表单字段在设置屏幕中正确对齐

[audrasjb公司]

48420.2.diff-隐私设置屏幕顶部的表单字段现已正确对齐

[audrasjb公司]

在afercia干得好！谢谢！
我测试了48420.2.差异它修复了WP 5.3中大多数更重要的对齐错误和不一致/回归。

我赞成在5.3.1中提交这些更改，作为关于WP 5.3错误和小回归的（伟大的）第一步。

谢谢！

[谢尔盖·比尤科夫]

在46866:

管理：标准化整个管理员的表单控制高度和对齐方式。

这改进了管理员中各种表单控件的外观，并解决了WordPress 5.3中的一些视觉不一致问题。

Props afercia、audrasjb、jameskoster、GDragoN、azaozz、michaelarestad、murgroland、Samuel Fernandez、chetan200891、veminom、dlh。
修复#48420.

[谢尔盖·比尤科夫]

在46867:

管理：标准化整个管理员的表单控制高度和对齐方式。

这改进了管理员中各种表单控件的外观，并解决了WordPress 5.3中的一些视觉不一致问题。

Props afercia、audrasjb、jameskoster、GDragoN、azaozz、michaelarestad、murgroland、Samuel Fernandez、chetan200891、veminom、dlh。
合并[46866]到5.3分支。
修复#48420.

[阿费西娅]

如果没有人反对，我想建议将此票据作为一项任务，跨越下一个次要版本，也可能跨越5.4里程碑。

表单控件改进方面的工作需要进一步迭代，我不确定创建一个新票据是否是最佳的前进道路。这张票据上有很多上下文，对于表单控件的未来工作很有帮助。需要解决的一些问题包括：

• 使边界半径一致，参见设计反馈评论：28
• 标准化垂直对齐，请参见评论：20
• 实现基于8像素的“网格”​间距系统方案关于Make
• 等。

[谢尔盖·比尤科夫]

回复阿费西娅:

如果没有人反对，我想建议将此票据作为一项任务，跨越下一个次要版本，也可能跨越5.4里程碑。

听起来不错：）

[阿佐兹]

回复阿费西娅:

如果没有异议，我想提议把这张票作为一项任务
...
表单控件改进方面的工作需要进一步迭代，我不确定创建一个新票据是否是最佳的前进道路。

不要认为在一张“巨大”的票上混合使用许多bugfux和增强是一个好主意。这导致了对所做内容和原因的混淆，对更改和审查的跟踪不佳，最终导致不一致的跟踪和遗漏。

• 使边界半径一致，参见设计反馈评论：28
• 标准化垂直对齐，请参见评论：20
• 实现基于8像素的“网格”

第一个是一个相当重要的错误修复，需要大量的测试和审查，主要是关于视觉设计。

第二个听起来像是一个需要进一步测试/考虑的增强功能。这个垂直对齐：中间可能适用于许多浏览器，在许多情况下，但并不是所有地方都适用。

第三个是一个非常大的项目，它（可能）需要一个功能项目才能正确完成。它需要大量的迭代、测试和评审，因为“破坏”现有布局的可能性似乎很大。看起来它甚至可能跨越多个版本。

认为“把所有这些放在一起”是一个不好的主意，这将妨碍适当的发展。

此外，最初这张票是针对5.4里程碑的。我被带到5.3.1里程碑，试图修复5.3中介绍的一些CSS回归。现在已经完成，门票已经关闭。所有剩余的错误修复、增强和新功能都应该转移到新问题中。

[谢尔盖·比尤科夫]

相关：#48928

[audrasjb公司]

现在按固定方式关闭，以便在发布5.3.1 RC 2之前明确里程碑。

（还添加了缺少的has-dev-注释关键字）

[谢尔盖·比尤科夫]

链接到开发说明，以供参考：​https://make.wordpress.org/core/2019/12/11/admin-form-controls-height-and-allignment-standardization-in-wordpress-5-3-1/

[动态链接库]

#45147被标记为副本。

[阿费西娅]

在48362:

管理：修复输入错误表单.css之后[46866].

流浪汉e（电子）使浏览器忽略了一个CSS规则集，该规则集阻止选择元素在悬停时更改颜色。

道具柳树。
请参见#48420.
修复#50580.