区块编辑器

区块编辑器的整体布局采用顶部栏设计,内容位于下方。

编辑器界面

工具栏包含文档级别的操作:编辑器/选择模式、保存状态、撤销/重做/插入等全局操作、设置开关以及发布选项。

内容区域包含文档本身。

设置侧边栏包含针对文档的附加设置(标签、分类、定时发布等),以及“区块”选项卡中针对区块的设置。工具栏中的齿轮按钮可以隐藏设置侧边栏,让用户享受更具沉浸感的写作体验。在小屏幕上,侧边栏默认处于隐藏状态。

区块

区块本身是编辑器最基本的单元。一般来说,一切都是区块。用户使用区块来构建文章和页面,模拟底层 HTML 标记的垂直流。

通过将文档的各个部分以可操控区块的形式呈现,我们得以在上下文中展示各区块特有的功能。这借鉴了桌面应用程序的惯例,使我们能够在不给界面增加负担的情况下提供丰富的高级功能。

选中的区块会显示一些上下文相关的操作:

区块界面

区块界面包含基本操作。区块编辑器力求提供良好的通用默认设置,因此用户应当无需实际使用设置侧边栏中的高级操作,即可创建完整的文档。

区块工具栏突出显示常用操作。区块图标位于区块工具栏中,包含针对所选区块的高层级控件。它主要用于让用户将区块转换为其他类型的兼容区块。某些区块还会利用区块图标让用户从一组备选区块样式中进行选择。

区块格式选项允许用户调整区块级别的设置,而行内格式选项允许调整区块内部的元素。当区块较长时,随着用户向下滚动页面,区块工具栏会固定在屏幕顶部。

可以通过区块移动图标上下移动区块。其他区块操作可通过省略号菜单使用:删除和复制区块,以及诸如“以 HTML 编辑”和“转换为可重用区块”之类的高级操作。

未选中的区块不会显示区块工具栏或任何其他上下文控件。实际上,未选中的区块就是内容本身的预览:

未选中的区块

请注意,选中和焦点可能是不同的。图片区块可以被选中,而焦点却位于说明文字字段上。

设置侧边栏

设置侧边栏

侧边栏有两个选项卡:文档和区块:

  • 文档选项卡显示正在编辑的文章或页面的元数据和设置。
  • 区块选项卡显示当前选中区块的元数据和设置。

每个选项卡都包含多组可编辑的字段(侧边栏分区),用户可以将其展开或收起。

如果区块需要高级配置,这些设置应放在设置侧边栏中。不要在侧边栏的区块选项卡中放置对区块基本运行必不可少的任何内容;你的用户可能会为了获得沉浸式的写作体验而收起侧边栏。请挑选良好的默认值,并确保重要操作可以在区块工具栏中使用。

可以放在侧边栏区块选项卡中的操作例如:

  • 首字下沉,用于文本
  • 图库的列数
  • “最新文章”区块中的文章数量或分类
  • 执行基本任务时无需访问的任何配置

区块库

区块库

当用户插入区块时,区块库就会出现,无论是通过工具栏插入,还是在内容区域中结合上下文插入。区块库中,区块被组织为可展开的分区。用户输入时,区块库的搜索栏会自动筛选区块列表。用户可以通过选择区块按钮或区块名称来选取区块。