Gutenberg 的核心在于“区块”(block)这一概念。从技术角度来看,区块将抽象层级从单一文档提升到了有意义元素的集合,并用显式的结构取代了 HTML 中固有的歧义。
从用户的角度来看,区块允许以更一致、更可用的方式直接将各种内容、媒体或功能添加到他们的站点中。“添加区块”按钮让用户在一个地方即可访问整个选项库,而无需在菜单中四处寻找或了解短代码。
但最重要的是,Gutenberg 建立在直接操作的原则之上,这意味着元素显示方式的主要选项是在区块本身的上下文中控制的。这与传统的 WordPress 模式发生了巨大转变,在传统模式中,通常隐藏在多层导航菜单深处的选项通过间接机制来控制页面上的元素。
因此,例如,用户可以在画布中的区块界面内添加图片、编写标题、更改其宽度和布局、在其周围添加链接。同样的原则也应适用于更复杂的区块,比如“导航菜单”,用户可以添加、编辑、移动并最终确定其导航的完整呈现。
- 用户只需学习一种界面——即区块——就能添加和编辑站点上的所有内容。用户不应需要编写短代码、自定义 HTML,或理解隐藏机制来嵌入内容。
- Gutenberg 使核心功能更容易被发现,减少了难以找到的“神秘肉”(Mystery meat)。WordPress 支持大量区块和 30 多种嵌入式内容。让我们提高它们的可见性。
构建区块
这对设计师和开发者意味着什么?区块结构加上直接操作的原则,意味着我们需要以不同的思维方式来设计和开发 WordPress 组件。让我们再看一下区块的架构:

区块的主要接口是区块的内容区域。
可以将区块内容区域中的占位符内容视为引导用户遵循一组指令或“填空”的指南或界面(关于占位符稍后详述)。由于内容区域代表了实际出现在站点上的内容,此处的交互最贴近直接操作的原则,对用户来说也最为直观。这应被视为添加和操作内容以及调整其显示方式的主要接口。
区块工具栏用于放置那些无法纳入占位符 UI 的关键选项。
基本的区块设置并不总是适合放在占位符/内容 UI 的上下文中。作为次要选项,对区块功能至关重要的选项可以位于区块工具栏中。区块工具栏虽与直接操作有一步之遥,但仍具有高度的上下文相关性并在所有屏幕尺寸上可见,因此是一个很好的次要选择。
设置侧边栏仅应用于高级的三级控件。
在小屏/移动屏幕上,设置侧边栏默认不可见,即使在桌面视图中也可能处于折叠状态。因此,它不应被依赖来处理区块基本操作所需的任何内容。请选择良好的默认值,在区块工具栏中提供重要操作,并将侧边栏视为只有高级用户才会发现的功能。