区块设计

以下是设计新块的最佳实践,包括对现有块的建议和详细描述,以说明我们创建块的方法。

最佳实践

块的主界面是块的内容区域

由于块本身代表了网站上实际显示的内容,因此这里的交互最接近直接操作的原则,对用户来说也最直观。这应该被视为添加和操作内容以及调整其显示方式的主要界面。这里有两种交互方式:

  1. 块内容区域中的占位符内容可以被视为用户遵循一组指令或“填空”的指南或界面。例如,嵌入第三方服务内容的块可能在占位符中包含用于登录该服务的控件。
  2. 用户添加内容后,选择块可以显示其他控件来调整或编辑该内容。例如,注册块可能会显示用于隐藏/显示订户计数的控件。然而,这应该以最小的方式进行,以避免在用户选择块时大幅改变块的大小和显示(这可能会让人迷失方向或感到讨厌)。

块工具栏是所需选项和控件的辅助位置

基本块设置在占位符/内容UI的上下文中并不总是有意义的。作为次要选项,对块功能至关重要的选项可以位于块工具栏中。块工具栏仍然具有高度的上下文关系,在所有屏幕大小上都是可见的。块工具栏的一个显著限制是它是基于图标的UI,因此位于块工具栏中的任何控件都必须是可以通过图标或图标组进行有效通信的控件。

块工具栏将控件按层次分段分组。第一段包含块类型控件,例如块切换器、拖动手柄和移动器控件。第二组包含影响整个块的通用和特定块工具,然后是内联格式和“更多”菜单。可选的“Meta”或“Other”组可以在自己的段中分隔一些工具。

显示块工具栏段分组示例的屏幕截图。

设置侧边栏应仅用于高级三级控件

默认情况下,设置侧边栏在小屏幕/移动屏幕上不可见,也可能在桌面视图中折叠。因此,不应依赖于区块基本操作所需的任何内容。选择好的默认值,在块工具栏中提供重要操作,并将设置提要栏视为大多数用户不需要打开的内容。

此外,如果有多个选项,请使用设置侧边栏中的节和标题,以便用户轻松扫描和理解可用的选项。

默认情况下,每个设置提要栏都带有“高级”部分。此区域包含一个“Additional CSS Class”字段,应该用于容纳其他超级用户控件。

设置状态与实时预览状态

设置状态有时被称为“占位符”,可用于在显示块的实时预览状态之前引导用户完成初始过程。设置过程从用户那里收集渲染块所需的信息。块的设置状态以灰色背景表示,以便为用户提供清晰的区分。并非所有块都有设置状态,例如Paragraph块。

灰色背景上图像块的设置状态示例

设置状态为必要条件是:

  • 您可以在块中提供良好的默认内容,以满足大多数人的需要。
  • 该默认内容易于编辑和自定义。

在以下情况下使用设置状态:

  • 没有一个明确的默认状态适用于大多数用户。
  • 您需要从与块的实时预览没有1-1关系的用户收集输入(例如,如果您需要用户输入API密钥来呈现内容)。
  • 为了呈现有用的默认内容,您需要用户提供更多信息。

对于具有设置状态的块,用户完成设置过程后,占位符将替换为该块的实时预览状态。

图像库的实时预览状态示例

选择块后,可能会显示其他控件来自定义块的内容。例如,当选定图像库时,它会显示用于删除或添加图像的控件。

在选择块时显示的附加控件的示例。

在大多数情况下,块的设置状态只显示一次,然后通过实时预览状态进行进一步的自定义。然而,在某些情况下,可能需要允许用户返回设置状态,例如,如果所有块内容都已删除,或者通过块工具栏或侧栏中的链接。

注意事项

块工具栏

将工具栏控件按逻辑段分组。不要为每个部分添加一个段。

比较块工具栏与良好与不良工具栏段分组的屏幕截图。

块标识

块应该有一个简单、简短的名称,以便用户可以在块库中轻松找到它。名为“YouTube”的块很容易找到和理解。同一块名为“嵌入式视频(YouTube)”,在块库中不太清晰,也很难找到。

在文档或UI中引用块时,块标题使用大小写,“块”描述符使用小写。例如:

  • 段落块
  • 最新帖子块
  • 媒体文本块(&T)

块应具有识别图标,最好使用单色。尽量避免使用与现有块相同的图标。核心块图标基于材质设计图标。查看该图标集,或仪表盘图标激发风格灵感。

带有简明块名的块库屏幕截图
执行:
使用简明的块名。

带有长多行块名称的块库的屏幕截图
不要:
避免使用长的多行块名称。

块描述

每个块都应该包含一个描述,清楚地解释块的功能。说明将显示在设置提要栏中。

可以使用中的描述属性添加描述registerBlockType函数.

坚持使用动作+主语格式的单个祈使句。示例:

  • 从所有叙述的基本构建块开始。
  • 介绍新的部分并组织内容,以帮助访问者(和搜索引擎)了解内容的结构。
  • 创建带项目符号或编号的列表。

简短块描述的屏幕截图
执行:
使用简短、简单的块描述。

包含品牌的长块描述的屏幕截图
不要:
避免冗长的描述和品牌。

占位符

如果块需要用户配置一些选项才能显示,则应提供一个指导性占位符状态。

Gallery块占位符的屏幕截图
执行:
提供指导性占位符状态。

Gallery块占位符示例,但带有强烈、分散注意力的颜色,没有说明
不要:
避免品牌化,仅依靠标题传达说明。

选定和未选定状态

未选中时,块应尽可能靠近前端输出预览其内容。

选中后,块可能会显示其他选项,如输入字段或按钮,以直接配置块,尤其是在基本操作需要这些选项时。

一个Google Maps块,具有块运行所需的内联、始终可访问的控件
执行:
对于对块操作至关重要的控件,请直接在块编辑视图中提供它们。

带有基本控件的Google Maps块移动到侧边栏,可以在上下文中隐藏这些控件
不要:
不要将对该块至关重要的控件放在侧边栏中,否则该块将对已取消该侧边栏的移动用户或桌面用户显示为不起作用。

高级块设置

设置提要栏的“块”选项卡可以包含其他块选项和配置。请记住,用户可以取消侧边栏,而不使用它。您不应该在侧边栏中放置关键选项。

侧栏中段落块高级设置的屏幕截图
执行:
由于首字下沉功能对于块的基本操作不是必需的,因此可以将其作为可选配置放在“块”选项卡中。

考虑移动

检查块在尽可能多的设备和屏幕上的外观、感觉和工作方式。

支持Gutenberg的暗背景编辑器方案

检查块的外观深色背景在编辑器中。

示例

为了演示其中的一些实践,下面是一些默认Gutenberg块的注释示例:

段落

编辑器的最基本单位。Paragraph块是一个简单的输入字段。

段落块

占位符

  • 简单的占位符文本,显示“键入/选择块”。选定块后,占位符将消失。

所选状态

  • 块工具栏:有一个切换器来执行标题等的转换。
  • 块工具栏:具有基本的文本对齐方式
  • 块工具栏:具有内联格式选项、粗体、斜体、删除线和链接

图像

基本图像块。

图像块占位符

占位符

  • 一个通用的灰色占位符块,可以选择上载图像、将图像直接拖放到图像上或从媒体库中选取图像。

所选状态

  • 块工具栏:对齐,包括宽和全宽(如果主题支持)。
  • 块工具栏:编辑图像,打开媒体库
  • 块工具栏:链接按钮
  • 上传图像时,会出现一个标题输入字段,在图像下方有一个“写入标题…”占位符文本:

图像块

阻止设置

  • 有描述:“它们值1000个单词!插入一张图片。”
  • 具有更改或添加alt文本以及添加其他自定义CSS类的选项。

Image块的未来改进可能包括去掉媒体模式,而不是让用户直接从占位符本身选择图像。一般来说,尽量避免情态动词。

最新发布

最新发布块

占位符

没有占位符,因为它在插入时立即工作。默认插入状态显示最后5篇文章。

所选状态

  • 块工具栏:路线
  • 块工具栏:用于拾取列表视图或网格视图的选项

请注意,在这种情况下,块工具栏不包括块芯片,因为没有可切换到的类似块。

阻止设置

  • 有描述:“显示您最近的帖子列表。”
  • 有发布顺序、按类别缩小列表范围、更改要显示的默认帖子数以及显示发布日期的选项。

最新帖子一插入就可以完全发挥作用,因为它有很好的默认值。