WordPress.org网站
获取WordPress

使WordPress成为核心

已打开3年前

关闭3周前

上次修改时间3周前

#52551 关闭 增强 (固定的)

Twenty Twenty-One：搜索框对齐

报告人： vinita29的简介 葡萄酒29 所有者： 卡马托塞德剖面图 喀斯特化的
里程碑： 6.6 优先： 正常的
严重程度： 少数的 版本： 5.7
组件： 捆绑主题 关键词： has-屏幕截图 需求-测试 has-patch接口 犯罪
重点： css公司 复写的副本：

描述

我被定制为平板电脑和智能手机上的主题21搜索框视图。此处search-box文本字段和按钮未正确对齐。

附件（6）

搜索框.png​(37.8 KB)-由添加葡萄酒29 3年前。
52551补丁​(349字节)-由添加葡萄酒29 3年前。
52552-before.png​(17.8 KB)-由添加波纳 3个月前。
修补之前，输入与标签不对齐。
52552-png之后​(17.6 KB)-由添加波纳 3个月前。
应用PR 6287的搜索块
52551-批次前.png​(11.4 KB)-由添加沙鲁25 2个月前。
搜索框-修补程序之前
52551-修补后.png​(11.1 KB)-由添加沙鲁25 2个月前。
搜索框-修补程序之后

将所有附件下载为：.zip文件

更改历史记录(28)

@葡萄酒29
3年以前

@葡萄酒29
3年以前

#1 @谢尔盖·比尤科夫
3年以前

  • 组件已从更改主题到捆绑主题
  • 总结已从更改搜索框对齐二十二个主题。到Twenty Twenty-One：搜索框对齐

#2 随访： @波纳
3年以前

你好！

我认为你是对的，这个边距可以安全地从搜索输入字段中删除。

这个边距被添加到输入元素中，以便为焦点轮廓留出空间，但搜索输入字段的轮廓偏移量为负，不需要边距。

Twenty Twenty-One使用sass，需要对.scss文件进行更改。

此处添加边距：
https://core.trac.wordpress.org/browser/ttrunk/src/wp-content/themes/textentywentyone/assets/sass/04-elements/forms.scss#L21

我建议根据此处的搜索输入进行调整：
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss#L41

#3 @波纳
3年以前

  • 焦点 用户界面 管理远离的
  • 关键词 需要-刷新补充

#4 答复：↑ 2 @葡萄酒29
3年以前

嗨@poena

确切地说，搜索输入字段不需要空白。这个边距可以从搜索输入字段中安全删除。你做得很好！！

#5 @波纳
3个月以前

在最新的WordPress版本上测试这个问题有点棘手。
例如，在6.5 RC上，搜索块不会拆分为两行。当浏览器窗口宽度减小时，它只会减小输入字段的宽度。

在WordPress 5.7中，如果我将浏览器宽度设置得恰到好处，例如381px、953px，我可以复制它。

这张票是在​PR#6287在​WordPress/WordPress-develop开发通过​@波纳。
3个月以前 #6

  • 关键词 has-patch接口补充；需要-刷新远离的

删除搜索块输入字段的左边距。最初在搜索输入字段上设置的边距将搜索块稍微向左放置，这是意料之外的。

Trac票：
https://core.trac.wordpress.org/tickt/52551

@波纳
3个月以前

修补之前，输入与标签不对齐。

@波纳
3个月以前

应用PR 6287的搜索块

#7 @波纳
3个月以前

  • 里程碑已从更改等待审查到6.6

测试说明

应用上面链接的PR 6287。
在术语中打开主题文件夹
使用以下npm命令从scss文件构建CSS文件：
npm安装
npm运行生成

创建新帖子并添加搜索块。
保存并查看正面。
如果你的视力比我好，请确认输入字段与标签对齐。
或者使用浏览器工具确认输入字段没有左边距。

预期结果：
输入字段与标签对齐。
输入字段没有左边距。

#8 @沙鲁25
2个月以前

测试报告

此报告验证指示的修补程序是否解决了问题。✅

补丁测试： ​https://github.com/WordPress/WordPress-development/pull/6287

环境：

WordPress-6.5版
操作系统-Windows
浏览器-Firefox
主题：二十一
菲律宾比索-8.1.23
活动插件-测试报告

实际结果：

  • 问题已通过修补程序解决。✅

@沙鲁25
2个月以前

搜索框-修补程序之前

@沙鲁25
2个月以前

搜索框-修补程序之后

#9 @波纳
2个月以前

  • 关键词 需要-刷新补充

#10 @波纳
2个月以前

我添加了needs-refresh关键字，因为PR不再适用。

#11 @马克迪侯赛因
2个月以前

  • 分辨率设置为无效
  • 状态已从更改新的到关闭

#12 @沙鲁25
2个月以前

  • 分辨率 无效删除
  • 状态已从更改关闭到重新打开的

#13 @波纳
7周以前

  • 关键词 需要-刷新远离的

我们尝试在一个贡献者日测试这个，之后我添加了needs-refresh关键字，因为我们无法使用grunt补丁：52551命令。
但这张票二补丁，此grunt命令正在尝试应用补丁
https://core.trac.wordpress.org/attachment/ticket/52551/52551.补丁，3岁。

要应用和测试最新的PR 6287，可以使用此命令与PR的完整链接：

咕噜声补丁：https://github.com/WordPress/WordPress-develop/pull/6287

然后按照中的说明进行操作https://core.trac.wordpress.org/ticket/52551#评论：7

因此，我再次删除了needs-refresh关键字。

这张票是在​松弛（Slack）in#core由nhrrob提供。​查看日志。
4周以前

这张票是在​松弛（Slack）由nhrrob进行#核心测试。​查看日志。
4周以前

#16 @伊姆拉哈桑拉兹
4周以前

测试报告
此报告验证指示的修补程序是否解决了问题。✅
补丁测试：​https://github.com/WordPress/WordPress-develop/pull/6287
环境：

  • 新闻稿：6.6-alpha-57778-src
  • 菲律宾比索：8.2.19
  • 服务器：nginx/1.25.5
  • 数据库：mysqli（服务器：8.0.37/客户端：mysqlnd 8.2.19）
  • 浏览器：Chrome 124.0.0.0
  • 操作系统：Windows 10/11
  • 主题：Twenty Twenty-One 2.2
  • MU插件：未激活
  • 插件：
    • 测试报告1.1.0

修补前：网址：https://prnt.sc/Em9LPHTD34Vt
修补后：https://prnt.sc/Xs8Y7HB-XBor网站
问题已通过修补程序解决。✅

#17 @达什特拉伊亚古鲁97
4周以前

测试报告

补丁测试:​https://github.com/WordPress/WordPress-develop/pull/6287

环境：

操作系统：窗户
菲律宾比索：8.2.12
文字出版社：6.5
浏览器：铬
主题：二十一
插件：未激活

实际结果：

✅修补之前：
前端： ​https://prnt.sc/JLpd26iugvW5

✅修补后：
前端： ​网址：https://prnt.sc/u_LwIk_moIyD

✅ 补丁工作良好，符合所需解决方案

上次编辑时间4周前通过达尔希特拉吉亚古鲁97(以前的)(差异)

#18 @拉马拉扬
4周以前

测试报告
补丁测试：​https://github.com/WordPress/WordPress-develop/pull/6287
环境：
操作系统：Windows
菲律宾比索：8.2.12
新闻稿：6.6-alpha-57778-src
浏览器：Chrome、Edge
主题：二十一
插件：未激活
实际结果：
✅ 截图：​https://prnt.sc/8xpPVuvg-8J3
✅ 补丁工作良好，符合所需解决方案

#19 @喀斯特化的
3周以前

  • 关键词 犯罪补充
  • 所有者设置为喀斯特化的
  • 状态已从更改重新打开的到分配

感谢您的测试，现在将应用commit关键字并尝试将其移向该关键字。

#20 @喀斯特化的
3周以前

  • 分辨率设置为固定的
  • 状态已从更改分配到关闭

在58202:

Twenty Twenty-One：修复搜索框对齐。

搜索框未对齐。这就通过边距解决了这个问题。

道具vinita29、SergeyBiryukov、poena、shailu25、makdiahussain、imranhasanraaz、darshitrajyaguru97、lamarajan。
修复#52551。

#21 @喀斯特化的
3周以前

在58203:

Twenty Twenty-One：主题测试失败修复[58202]。

编译样式表以通过测试。

请参见#52551。

#22 @aishwarryapande公司
3周以前

测试报告
补丁测试：
https://core.trac.wordpress.org/tickt/52551

已验证修补程序，它工作正常✅
环境：
新闻稿：6.5.3
操作系统：Windows 11
浏览器：Chrome
主题：二十一
预期结果
搜索块应正确对齐，没有任何意外的左边距。
搜索块应与“二十一”主题的总体设计一致。
实际结果
搜索块正确对齐，没有任何意外的左边距。
搜索块与“二十一”主题的总体设计一致。
视觉对比：
之前：https://app.screenclip.com/r9UP网址

之后：

对于桌面

​https://app.screenclip.com/iip2

对于平板电脑

​https://app.screenclip.com/xr8X

适用于电话/手机

​https://app.screenclip.com/CTqA

注：请参见TracTickets公司有关使用的帮助门票。