title: "区块设计" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - User Interface - Explanations - Repos
区块设计
以下是设计新区块的最佳实践，包含建议和现有区块的详细描述，以说明我们创建区块的方法。
最佳实践
区块的主要界面是其内容区域
由于区块本身代表网站上实际显示的内容，此处的交互最贴近直接操作原则，对用户而言也最为直观。这应被视为添加和操作内容、调整显示方式的主要界面。此处有两种交互方式：
- 区块内容区域中的占位内容可视为引导用户遵循一组指令或“填空”的指南或界面。例如，嵌入第三方服务内容的区块可能在占位符中包含登录该服务的控件。
- 用户添加内容后，选中区块可显示调整或编辑该内容的额外控件。例如，注册区块可能显示隐藏/显示订阅者数量的控件。但此类操作应尽量精简，避免用户选中区块时其尺寸和显示发生剧烈变化（这可能导致用户困惑或反感）。
区块工具栏是放置必要选项与控件的次要位置
基础区块设置在占位符/内容界面的情境中并非总是适用。作为次要选择，对区块功能至关重要的选项可置于区块工具栏中。区块工具栏仍保持高度情境感知，并在所有屏幕尺寸下清晰可见。区块工具栏的一个显著限制是其基于图标的界面，因此任何置于区块工具栏内的控件都需能够通过图标或图标组有效传达其功能。
将区块工具栏控件按相关项目分组
区块工具栏采用分层方式将控件分组显示。第一组包含区块类型控件，例如区块切换器、拖动手柄和移动控件。第二组包含影响整个区块的通用和特定工具，随后是内联格式设置和"更多"菜单。可选地，"元数据"或"其他"组可以将某些工具单独分组显示。
设置侧边栏应仅用于高级、三级控制
设置侧边栏默认在小屏幕/移动设备上不可见，在桌面视图中也可能被折叠。因此，不应依赖它来承载区块基本操作所必需的任何功能。请选择良好的默认设置，将重要操作置于区块工具栏中，并将设置侧边栏视为大多数用户无需打开的部分。
此外，如果选项较多，请在设置侧边栏中使用分区和标题，以便用户轻松浏览和理解可用选项。
每个设置侧边栏默认带有一个“高级”分区。该区域包含“附加 CSS 类”字段，应用于放置其他高级用户控制项。
设置状态与实时预览状态
设置状态（有时称为"占位符"）可用于在显示区块的实时预览状态之前引导用户完成初始流程。设置过程会收集渲染区块所需的用户信息。区块的设置状态以灰色背景显示，为用户提供清晰区分。并非所有区块都有设置状态——例如段落区块。
在以下情况下不需要设置状态：
- 您可以在区块中提供满足大多数人需求的良好默认内容。
- 该默认内容易于编辑和自定义。
在以下情况下使用设置状态：
- 没有适用于大多数用户的明确默认状态。
- 您需要收集与区块实时预览没有一一对应关系的用户输入（例如，需要用户输入 API 密钥来渲染内容）。
- 您需要从用户那里获取更多信息才能渲染有用的默认内容。
对于确实具有设置状态的区块，一旦用户完成设置过程，占位符将被该区块的实时预览状态替换。
当选中区块时，可能会显示额外的控件来自定义区块内容。例如，选中图像库时会显示添加或删除图像的控件。
在大多数情况下，区块的设置状态仅显示一次，后续自定义通过实时预览状态完成。但在某些情况下，可能需要允许用户返回设置状态——例如，当所有区块内容已被删除时，或通过区块工具栏或侧边栏的链接。
注意事项
区块工具栏
将工具栏控件按逻辑分组。切勿为每个控件单独创建分组。
区块标识
区块应具有简洁明了的名称，以便用户能在区块库中轻松找到。名为“YouTube”的区块易于查找和理解。而同一个区块若命名为“嵌入式视频（YouTube）”，则不够清晰且在区块库中更难找到。
在文档或用户界面中提及区块时，区块标题应采用首字母大写形式，而“区块”描述符使用小写。例如：
- 段落区块
- 最新文章区块
- 媒体与文本区块
区块应具有标识性图标，最好使用单一颜色。尽量避免使用现有区块已使用的图标。核心区块图标基于 Material Design Icons。可参考该图标集或 Dashicons 以获取风格灵感。
正确做法：
使用简洁的区块名称。
错误做法：
避免使用冗长、多行的区块名称。
区块描述
每个区块都应包含清晰说明其功能的描述。该描述将显示在设置侧边栏中。
您可以通过在 registerBlockType 函数 中使用 description 属性来添加描述。
坚持使用单一祈使句，采用"动作+主语"的格式。例如：
- 从所有叙事的基本构建块开始。
- 引入新章节并组织内容，以帮助访问者（和搜索引擎）理解您内容的结构。
- 创建项目符号列表或编号列表。
正确做法：
使用简短、简单的区块描述。
错误做法：
避免冗长的描述和品牌信息。
占位符
如果您的区块需要用户配置某些选项才能显示，您应当提供具有指导意义的占位符状态。
正确做法：
提供具有指导意义的占位符状态。
错误做法：
避免使用品牌标识，且不应仅依赖标题来传达操作说明。
选中与未选中状态
当未选中时，您的区块应尽可能接近前端输出的效果来预览其内容。
当选中时，您的区块可以显示额外的选项，如输入字段或按钮，以便直接配置区块，特别是当这些选项对基本操作必不可少时。
正确做法：
对于区块运行所必需的控制项，请直接在区块编辑视图中提供。
错误做法：
不要将区块所必需的控制项放在侧边栏中，否则对于移动端用户或已关闭侧边栏的桌面端用户，区块将显得无法使用。
高级区块设置
设置侧边栏的“区块”选项卡可包含额外的区块选项与配置。请注意，用户可能关闭侧边栏且永不使用。不应将关键选项置于侧边栏中。
正确做法：
由于首字下沉功能并非区块基础运行所必需，可将其作为可选配置置于区块选项卡中。
考虑移动端适配
尽可能在多种设备和屏幕尺寸上检查您的区块外观、触感及功能表现。
支持 Gutenberg 深色背景编辑器方案
在编辑器中检查您的区块在深色背景下的显示效果。
示例
为展示部分实践方法，以下提供几个默认古腾堡区块的注释示例：
段落
编辑器最基本的构成单元。段落区块是一个简单的输入字段。
占位符
- 简单的占位文本，显示“输入 / 以选择区块”。当区块被选中时，占位符会消失。
选中状态
- 区块工具栏：包含切换器，可执行转换为标题等操作。
- 区块工具栏：包含基本的文本对齐选项。
- 区块工具栏：包含内联格式选项，如粗体、斜体、删除线和链接。
图片
基础图片块。
占位符
- 一个通用的灰色占位符块，提供上传图片、直接拖放图片或从媒体库选择图片的选项。
选中状态
- 区块工具栏：对齐方式（若主题支持则包含宽幅与全宽对齐）
- 区块工具栏：编辑图像（用于打开媒体库）
- 区块工具栏：链接按钮
- 图像上传后，下方将显示带“输入说明文字…”占位符的标题输入框：
Block settings
- Has description: “They're worth 1,000 words! Insert a single image.”
- Has options for changing or adding alt text and adding additional custom CSS classes.
Future improvements to the Image block could include getting rid of the media modal in place of letting users select images directly from the placeholder itself. In general, try to avoid modals.
最新文章
占位符
插入后立即生效，无需占位符。默认插入状态显示最近 5 篇文章。
选中状态
- 区块工具栏：对齐方式
- 区块工具栏：选择列表视图或网格视图的选项
请注意，在这种情况下区块工具栏不包含区块芯片，因为没有可切换的相似区块。
Block settings
- Has description: “Display a list of your most recent posts.”
- Has options for post order, narrowing the list by category, changing the default number of posts to show, and showing the post date.
Latest Posts is fully functional as soon as it’s inserted because it comes with good defaults.