跳到内容
新问题

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

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

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

原型:使用键盘在级别之间移动块 #22453

已合并
将16个提交合并到 2020年6月24日
已合并

对话

告诉机器
复制链接
贡献者

@告诉机器 告诉机器 评论2020年5月19日

描述

地址#22031

使用上述问题中描述的工具栏操作,仅通过键盘将块移入或移出嵌套层(目前只有通过拖放才能实现)。

我正在利用导航模式进行此操作,所以我不得不附带说明#20732此外,还可以在嵌套级别中导航。更新:#20732已单独处理。

将其设置为草稿,以便测试键盘交互。它还不能与鼠标/触摸板/触摸屏配合使用,因为我不确定这些交互模式的正确行为应该是什么。更新:现在可以进行审查了。已启用基本的鼠标交互:单击“移动到”,然后在目标块上单击一次,然后按空格键或Enter键,将块移动到目标块上方的适当位置。

感谢所有反馈和测试!

这是如何测试的?

到目前为止,只在带有键盘的浏览器中进行了测试。VoiceOver的快速旋转显示键盘流是有效的,但没有宣布所采取的行动(一旦我们决定这是否是我们想要的方式,也应该实施)。

工作原理:

  1. 在要移动的块的工具栏中,单击“移动到”;
  2. 使用上下箭头键在同一级别内导航,使用左箭头键上一级,使用右箭头键下一级(当您位于具有子级的块上时);
  3. 当蓝线位于所需的目标位置时,按Enter键或空格键将块移动到该位置。

屏幕截图

变更类型

新功能(添加功能的非中断性更改)

检查清单:

  • 我的代码已经过测试。
  • 我的代码遵循WordPress代码风格。
  • 我的代码遵循可访问性标准。
  • 我的代码有适当的内联文档。
  • 如果合适的话,我已经包括了开发人员文档。
  • 我已经更新了所有受此PR中任何重构/重命名影响的React Native文件。

@告诉机器 电视机补充[a11y]键盘和焦点 【功能】写作流程 块选择、导航、拆分、合并、删除。。。 [焦点]可访问性(a11y) 影响可访问性并需要相应审查的更改(例如标记更改)。 需要辅助功能反馈 需要可访问性的输入 需要设计反馈 需要一般设计反馈。标签2020年5月19日
@github-操作
复制链接

github-操作 机器人程序 评论2020年5月19日

尺寸变化:+760亿(0%)

总大小:1.12 MB

文件名 大小 更改
build/block-editor/index.js 107千字节 +558亿(0%)
构建/块编辑器/style-rtl.css 10.8千字节 +101亿(0%)
构建/块编辑器/样式.css 10.8千字节 +101 B(0%)
ℹ️查看未更改
文件名 大小 更改
构建/a11y/index.js 1.14千字节 0亿
构建/注释/index.js 3.62千字节 0亿
构建/api-fetch/index.js 3.4千字节 0亿
构建/auto/index.js 2.83千字节 0亿
构建/blob/index.js 620亿 0亿
build/block-directory/index.js 7.26千字节 0亿
构建/块目录/样式-rtl.css 937亿 0亿
构建/块目录/样式.css 937亿 0亿
build/block-library/editor-rtl.css 7.86千字节 0亿
build/block-library/editor.css 7.87千巴 0亿
build/block-library/index.js 129千字节 0亿
build/block-library/style-rtl.css 8千字节 0亿
build/block-library/style.css 8.01千字节 0亿
构建/块库/theme-rtl.css 730亿 0亿
构建/块库/theme.css 732亿 0亿
构建/块序列化默认解析器/index.js 1.88千字节 0亿
build/block-serialization-specifi-parser/index.js 3.1千字节 0亿
build/blocks/index.js 48.1千字节 0亿
build/components/index.js 196千字节 0亿
build/components/style-rtl.css 15.9千字节 0亿
构建/组件/样式.css 15.8千字节 0亿
构建/合成/索引.js 9.6千字节 0亿
构建/core-data/index.js 11.4千字节 0亿
构建/数据控制/索引.js 1.29千字节 0亿
build/data/index.js 8.44千字节 0亿
构建/日期/索引.js 5.47千字节 0亿
build/deprecated/index.js 772亿 0亿
build/dom-ready/index.js版本 569亿 0亿
build/dom/index.js版本 3.17千字节 0亿
构建/编辑导航/index.js 8.26千字节 0亿
构建/编辑导航/样式-rtl.css 1.02千字节 0亿
构建/编辑导航/样式.css 1.02千字节 0亿
build/edit-post/index.js 303千字节 0亿
构建/编辑-发布/样式-rtl.css 5.5千字节 0亿
构建/编辑-发布/样式.css 5.5千字节 0亿
build/edit-site/index.js 16.6千字节 0亿
构建/编辑site/style-rtl.css 3.03千字节 0亿
构建/编辑site/style.css 3.03千字节 0亿
build/edit-widgets/index.js 9.33千字节 0亿
build/edit-widgets/style-rtl.css 2.43千字节 0亿
构建/编辑小部件/style.css 2.43千字节 0亿
build/editor/editor-styles-rtl.css 468亿 0亿
构建/编辑器/编辑器样式.css 469亿 0亿
build/editor/index.js 44.8千字节 0亿
构建/编辑器/样式-rtl.css 3.8千字节 0亿
构建/编辑器/样式.css 3.8千字节 0亿
构建/元素/索引js 4.65千字节 0亿
构建/转义-html/index.js 733亿 0亿
build/format-library/index.js 7.72千字节 0亿
build/format-library/style-rtl.css 542亿 0亿
构建/格式库/样式.css 543亿 0亿
build/hooks/index.js 2.13千字节 0亿
build/html-entities/index.js 622亿 0亿
build/i18n/index.js版本 3.56千字节 0亿
build/浅等于/index.js 711亿 0亿
构建/键盘快捷方式/index.js 2.51千字节 0亿
build/keycodes/index.js 1.94千字节 0亿
build/list-reasable-blocks/index.js 3.12千字节 0亿
构建/list-rusable-blocks/style-rtl.css 446亿 0亿
build/list-rusable-blocks/style.css 447亿 0亿
build/media-utils/index.js 5.29千字节 0亿
build/notices/index.js 1.79千字节 0亿
构建/nux/index.js 3.4千字节 0亿
build/nux/style-rtl.css 662亿 0亿
build/nux/style.css 657亿 0亿
build/plugins/index.js 2.56千字节 0亿
build/primitives/index.js 1.5千字节 0亿
构建/priority-queue/index.js 788亿 0亿
build/redux-routine/index.js 2.85千字节 0亿
构建/rich-text/index.js 14千字节 0亿
build/server-side-render/index.js 2.68千字节 0亿
build/shortcode/index.js 1.7千字节 0亿
构建/token-list/index.js 1.28千字节 0亿
构建/url/index.js 4.06千字节 0亿
build/viewport/index.js 1.85千字节 0亿
build/warning/index.js 1.14千字节 0亿
构建/wordcount/index.js 1.17千字节 0亿

压缩尺寸作用

@塔尔丹
复制链接
贡献者

这是一个很有前途的原型。

使选择嵌套块成为可能的改进(#20732)在导航模式下工作得很好,我认为在单独的PR中看到它们会很好,这样可以更快地发货。

在“移动到”选项方面,我看到一些类似的系统可以很好地围绕该选项移动项目。Android TV使用类似的系统重新排序应用程序,其中应用程序是抓住已移动然后下降.

我在测试中发现了一些东西(虽然我意识到这目前是一个原型,所以我理解它们可能已经是思维过程的一部分):

  • 我很容易混淆是使用空格还是进入来移动块。我觉得两者都应该被允许。
  • 如果区块作为可视化的一部分实际移动,那就太酷了。
  • 可能需要指示何时无法将块放入某个位置,例如将段落块移动到不可能,用户必须移动到列块。可能甚至不应该为列设置放置区,但如果移动块绕过某个级别,也可能会造成混淆。
  • 可能一些关于何时可以使用左和右进行嵌套和不必要嵌套的指示可能会有所帮助。

@恩里克桑切斯
复制链接
贡献者

您好!@告诉机器👋

这真的很酷!键盘交互感觉很自然。我也有类似的反馈@塔尔丹的:

  • 我在期待进入去工作,而不是空格键也许两者都允许?
  • 在一个内部有两个子段落的组块上,我看不清楚子块是否已向外移动。我认为这是因为没有可比较的视觉参考。也许如果包含块也能以某种方式高亮显示,这会更明显?

我所做的是引用编辑器底部的块面包屑,以便能够判断段落何时在组外。

总的来说,这真的很有希望!👍

@告诉机器 告诉机器将基本分支从 主人 尝试/多级导航模式 2020年5月26日01:30
基准自动更改自 尝试/多级导航模式 主人 2020年5月27日09:36
@告诉机器 告诉机器将此拉入请求标记为已准备好进行审阅 2020年5月28日06:24
@告诉机器
复制链接
贡献者 作者

@塔尔丹我已经解决了你的所有意见,除了:

  • 视觉移动块:尝试过,但对结果不满意。因为块是用键盘移动的,所以效果非常静态,所以看起来有点悲伤/破碎:

屏幕截图2020-05-28,下午2点53分35分

屏幕截图2020-05-28,下午2点52分53分

  • 指示何时可以使用左/右进行嵌套/取消嵌套:我不确定这里适合哪种类型的指示?但由于我们现在有了导航模式的交互模式,所以可能没有必要这样做。

@恩里克桑切斯当焦点位于内部块中时,我已经向父块添加了一个大纲,但当根块被聚焦时,没有一种好的方法可以做到这一点——概述整个文档可能有点奇怪。你怎么认为?

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

对这个公关感到兴奋,所以我冒昧地转了一圈。真是令人印象深刻,干得好!

移动到

蓝线效果很好,因为它似乎使用了相同的样式(甚至可能是类名?🤞 ) 应该在中可见#21475.

指示“目标嵌套容器”可以工作,但我同意虚线并不理想。实际上,我们可能不应该为此创建新的处理方法——你能试着简单地重用我们用于指示块焦点的相同样式吗?即这个:

屏幕截图2020-05-28,09 43 22

“focus”的语义在这里有点模糊,因为实际上它并不是有焦点的东西。但它在同一个大致区域内-如果你按下enter,那就是它降落的父容器。我认为它可以工作。

@德拉加内斯库
复制链接
贡献者

我同意@告诉机器最好是通过后续公关来改善鼠标交互。

阅读代码我仍然不相信isBlock移动模式返回客户端ID我们不能有两件事吗?一件事告诉我们模式是真是假,告诉我们客户端ID当前要移动的块的?

@恩里克桑切斯
复制链接
贡献者

恩里克桑切斯 评论2020年6月16日

有一个问题:当您单击“移动到”时,在模型中,所有相邻的块都会得到一个轮廓,但目前只有父块(如果所选块有父块)被轮廓化。同时列出父块和所有子块,这不是很令人困惑吗?

@告诉机器啊,这是我忽略了的一点。我同意你的观点,只有家长才能拿到大纲。我们也可以尝试做类似的事情#22508,以便更容易识别块结构。

@告诉机器
复制链接
贡献者 作者

阅读代码我仍然不相信isBlock移动模式返回客户端ID我们不能有两件事吗?一件事告诉我们模式是真是假,告诉我们客户端ID当前要移动的块的?

嗯,我不太喜欢有额外的返回值,因为这会给代码增加不必要的复杂性。相反,我将尝试为这些函数考虑更好的命名。

@德拉加内斯库
复制链接
贡献者

进展顺利@电视机我选择的一个缺点是,在Firefox和Chrome中,编辑器不会滚动到您移动焦点的位置,除非按下Enter键退出移动模式:

无滚动移动

@告诉机器
复制链接
贡献者 作者

我选择的一个缺点是,在Firefox和Chrome中,编辑器不会滚动到您移动焦点的位置,除非按下Enter键退出移动模式

这是一个导航模式错误,报告于#22420.应单独固定。如果在此期间没有人做,我很可能很快就会把它捡起来🙂

复制链接
贡献者

@德拉加内斯库 德拉加内斯库 留下了评论

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

这与预期的一样,为键盘用户提供了一个很好的功能。我们有一些后续公关来处理导航模式滚动错误👏

免费注册 在GitHub上加入此对话.已经有账户了吗?登录以发表评论
标签
【功能】写作流程 块选择、导航、拆分、合并、删除。。。 [焦点]可访问性(a11y) 影响可访问性并需要相应审查的更改(例如标记更改)。 需要辅助功能反馈 需要可访问性的输入 需要设计反馈 需要一般设计反馈。
项目
还没有
开发

成功合并此拉取请求可能会解决这些问题。

还没有

6名参与者