gutenbergdocs/explanations/user-interface

用户界面

区块编辑器

区块编辑器的整体布局采用顶部工具栏+内容区域的设计。

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

内容区域承载文档主体内容。

设置侧边栏包含文档相关设置（标签、分类、发布时间等）以及"区块"标签页中的区块设置。工具栏中的齿轮按钮可隐藏设置侧边栏，让用户获得更专注的写作体验。在小尺寸屏幕上，侧边栏默认处于隐藏状态。

区块单元

区块是编辑器最基础的构成单元。广义而言，所有内容都是区块。用户通过区块构建文章与页面，这种模式完美复现了底层HTML标记的垂直流式布局。

通过将文档每个部分呈现为可操作的独立区块，我们实现了区块特定功能的场景化调用。这一设计灵感源自桌面应用惯例，既能支持丰富的高级功能，又不会造成界面臃肿。

被选中的区块会显示多项场景化操作：

区块界面提供基础操作功能。区块编辑器致力于提供优质通用的默认设置，用户无需依赖设置侧边栏的高级功能即可完成完整文档创作。

区块工具栏突出显示常用功能。区块图标位于区块工具栏内，包含针对当前选中区块的顶层控制，主要支持用户将区块转换为其他兼容类型。部分区块还会通过区块图标提供替代样式选择。

区块格式化选项用于调整区块层级设置，行内格式化选项则用于修饰区块内部元素。当区块内容较长时，随着用户向下滚动页面，区块工具栏会自动固定在屏幕顶部。

通过区块移动器图标可实现区块的上下移动。点击省略号菜单可唤出附加功能：删除与复制区块，以及"以HTML编辑"、"转换为可复用区块"等高级操作。

未选中的区块不会显示区块工具栏或任何场景化控件，此时区块仅呈现内容预览效果：

请注意选择状态与焦点状态可独立存在。例如图片区块被选中时，焦点可能位于标题输入框。

设置侧边栏

侧边栏包含"文档"与"区块"两个标签页：

• 文档标签页显示正在编辑的文章或页面的元数据及设置
• 区块标签页显示当前选中区块的元数据及设置

每个标签页均包含可展开/折叠的侧边栏分区编辑字段组。

若区块需要高级配置，相关设置应置于设置侧边栏中。但请注意：区块基础运行所需的设置不应放在侧边栏区块标签页——用户可能为获得沉浸式写作体验而关闭侧边栏。建议设置合理的默认值，并将重要操作置于区块工具栏。

适合放入侧边栏区块标签页的功能包括：

• 文本区块的首字下沉
• 图库的列数设置
• "最新文章"区块的文章数量或分类筛选
• 所有非基础操作必需的配置项

区块库

当用户通过工具栏或内容区场景化菜单插入区块时，区块库界面将会启动。库内区块按可展开的分组进行组织，搜索栏会随用户输入实时筛选区块列表。用户可通过选择区块按钮或区块名称来选用特定区块。