title: "区块即界面" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - Design - Contributors - Repos
区块即界面
Gutenberg 的核心在于区块概念。从技术角度看,区块既将抽象层级从单一文档提升至有意义元素的集合,又用明确结构取代了 HTML 固有的模糊性。
从用户视角看,区块允许以更统一、更易用的方式将任何类型的内容、媒体或功能直接添加到网站中。“添加区块”按钮让用户能在一个位置访问完整的选项库,无需在菜单中苦苦搜寻或记忆短代码。
但最重要的是,Gutenberg 建立在直接操作原则之上,这意味着控制元素显示方式的主要选项都在区块本身的上下文中进行调控。这彻底改变了传统 WordPress 模式——传统模式下,控制页面元素的选项往往深藏在多层导航菜单中,通过间接机制发挥作用。
例如,用户可以在画布的区块界面内完成添加图片、编写说明文字、调整宽度与版式、添加环绕链接等所有操作。同样的原则也应适用于更复杂的区块(如“导航菜单”),使用户能够添加、编辑、移动并最终确定导航菜单的完整呈现效果。
- 用户只需掌握一种界面——区块——即可添加和编辑网站上的所有内容。用户不必编写短代码、自定义 HTML 或理解隐藏机制来嵌入内容。
- Gutenberg 让核心功能更易于发现,减少了难以寻觅的“神秘功能”。WordPress 支持大量区块和 30 多种嵌入内容,让我们提升它们的可见性。
构建单元
这对设计师和开发者意味着什么?单元结构加上直接操作原则,意味着需要以不同方式思考如何设计和开发 WordPress 组件。让我们再次审视单元的架构:

区块的主要界面是其内容区域。
区块内容区域中的占位符内容可视为用户遵循一组指令或"填空"的指南或界面(关于占位符的更多内容将在后文详述)。由于内容区域代表实际将在网站上显示的内容,此处的交互最贴近直接操作原则,对用户而言也最为直观。这应被视为添加和操作内容以及调整其显示方式的主要界面。
区块工具栏是存放无法融入占位符界面的关键选项之处。
基础区块设置在占位符/内容界面的上下文中并非总是适用。作为次要选择,对区块功能至关重要的选项可置于区块工具栏中。区块工具栏虽不直接操作内容,但仍高度贴合上下文且在所有屏幕尺寸下均可见,因此是极佳的次要选项。
设置侧边栏应仅用于高级、三级控件。
设置侧边栏在小型/移动屏幕上默认不可见,即使在桌面视图中也可能被折叠。因此,不应依赖它来放置区块基本操作所必需的任何功能。请选择良好的默认值,将重要操作置于区块工具栏中,并将侧边栏视为仅高级用户可能发现的功能区域。