在客户端上用JavaScript注册块时编辑和节约函数为如何在编辑器中呈现块、如何操作块以及如何保存块提供了接口。
这个编辑函数在编辑器上下文中描述块的结构。这表示使用块时编辑器将渲染的内容。
从“@wordpress/block-editor”导入{useBlockProps}；// ...常量块设置={api版本：3，// ...编辑：（）=>{const blockProps=使用块属性（）；return<div{…blockProps}>您的区块</div>；},};
这里首先要注意的是使用块属性块包装元素上的反作用挂钩。在上面的示例中，块包装器在编辑器中呈现“div”，但为了让Gutenberg编辑器知道如何操作块，请添加块所需的任何额外classNames……块包装器元素应该应用从使用块属性响应钩子调用。块包装器元素应该是本机DOM元素，如<div>和<表格>或将任何其他属性转发给本机DOM元素的React组件。使用<片段>或<服务器端渲染>例如，组件将无效。
如果元素包装器需要任何额外的自定义HTML属性，则需要将这些属性作为参数传递给使用块属性挂钩。例如，添加my-random-classname（我的随机类名）className到包装器，可以使用以下代码：
从“@wordpress/block-editor”导入{useBlockProps}；// ...常量块设置={api版本：3，// ...编辑：（）=>{const blockProps=使用blockProps（{className:'我的随机类名称'，} );return<div{…blockProps}>您的区块</div>；},};
这个编辑函数还通过对象参数接收许多属性。可以使用这些特性来调整块的行为。
这个属性属性显示所有可用的属性及其相应的值，如属性属性。请参见属性文档了解如何指定属性源。
在本例中，假设我们定义了内容在块注册期间，我们将在编辑功能中接收并使用该值：
编辑：（{attributes}）=>{const blockProps=使用块属性（）；return<div{…blockProps}>{attributes.content}</div>；};
的价值属性内容将显示在div公司在编辑器中插入块时。
isSelected属性是一个布尔值，用于传递块当前是否被选中。
编辑：（{attributes，isSelected}）=>{const blockProps=使用块属性（）；返回(<div{…blockProps}>你的街区。{已选定&&(<span>仅在选定块时显示</span>) }</div>);};
此功能允许块根据用户交互更新单个属性。
编辑：（{attributes，setAttributes，isSelected}）=>{const blockProps=使用块属性（）；//简化对属性的访问const｛content，mySetting｝=属性；//用户单击按钮时切换设置const toggleSetting=（）=>设置属性（{mySetting:！mySetting}）；返回(<div{…blockProps}>{内容}{已选定&&(<button点击=｛toggleSetting｝>切换设置</button>) }</div>);};
当使用对象或数组属性时，最好在更新属性之前复制或克隆该属性：
//好-从旧列表属性和新列表项创建新数组：const{list}=属性；const addListItem=（newListItem）=>集合属性（{list:[…list，newListItem]}）；//错误-直接修改现有属性中的列表以添加新列表项：const{list}=属性；const addListItem=（newListItem）=>{list.push（newListItem）；setAttributes（｛list｝）；};
为什么要这样做？在JavaScript中，数组和对象是通过引用传递的，因此这种做法可以确保更改不会影响其他可能包含对同一数据的引用的代码。此外，古腾堡项目遵循Redux图书馆的理念状态应该是不可变的-不应直接更改数据，而应更改包含更改的创建数据的新版本。
这个节约函数定义将不同属性组合到最终标记中的方式，然后将其序列化为帖子_内容.
保存：（）=>{const blockProps=useBlockProps.save（）；return<div{…blockProps}>您的区块</div>；};
对于大多数块节约应该是WordPress元素的实例表示块如何显示在站点的前面。
注：虽然可以从返回字符串值节约，它将被逃脱。如果字符串包含HTML标记，则标记将逐字显示在网站的前面，而不是作为等效的HTML节点内容显示。如果必须从返回原始HTML节约，使用wp.元素。原始HTML。顾名思义，这很容易跨站点脚本因此，不鼓励尽可能使用WordPress元素层次结构。
注：save函数应该是一个纯函数，它只依赖于用于调用它的属性。
它不能有任何副作用，也不能从另一个来源检索信息，例如，不能使用其中的数据模块选择（存储）选择器（…）.
这是因为如果外部信息发生更改，则稍后编辑帖子时，该块可能会标记为无效(阅读有关验证的更多信息).
如果需要保存其他信息，开发人员可以考虑以下两种选择之一：
- 使用动态块并在服务器上动态检索所需信息。
- 将外部值存储为块中动态更新的属性
编辑在发生变化时发挥作用。
对于动态块，的返回值节约可以表示块内容的缓存副本，只有在实现块的插件被禁用时才会显示。
如果未指定，默认实现将不会在动态块的帖子内容中保存任何标记，而将此延迟为始终在站点前面显示块时计算。
就像编辑函数，在呈现静态块时，添加useBlockProps.save（）到块的包装器元素。这可以确保块类名被正确呈现，以及块所注入的任何HTML属性都支持API。
与相同编辑，的节约函数还接收一个对象参数，其中包含可以插入到标记中的属性。
保存：（{attributes}）=>{const blockProps=useBlockProps.save（）；return<div{…blockProps}>{attributes.content}</div>；};
保存块时，需要以属性源定义指定的相同格式保存属性。如果未指定属性源，则属性将保存到块的注释分隔符中。请参阅块属性文档了解更多详细信息。
这里有几个同时使用属性、编辑和保存的示例。
属性：{内容：{type:'字符串'，源：'html'，选择器：'div'}},编辑：（{attributes，setAttributes}）=>{const blockProps=使用块属性（）；const updateFieldValue=（val）=>{集合属性（{content:val}）；}返回(<div{…blockProps}><文本控件label=“我的文本字段”值={attributes.content}onChange={updateFieldValue}/></div>);},保存：（{attributes}）=>{const blockProps=useBlockProps.save（）；return＜div｛…blockProps｝＞｛attributes.content｝</div＞；},
理想情况下，保存的属性应包含在标记中。然而，有时这是不实际的，因此如果未指定属性源，则会序列化属性并将其保存到块的注释分隔符中。
此示例可以用于动态块，例如最新帖子块，它在服务器端呈现标记。save函数仍然是必需的，但在这种情况下，它只返回null，因为块没有保存编辑器中的内容。
属性：{要显示的帖子：{type:'数字'，}},编辑：（{attributes，setAttributes}）=>{const blockProps=使用块属性（）；返回(<div{…blockProps}><文本控件label='要显示的帖子数'值={attributes.postsToShow}onChange={（val）=>{集合属性（{postsToShow:parseInt（val）}）；}}/></div>);},保存：（）=>{返回null；}
当编辑器加载时，将验证发布内容中的所有块以确定其准确性，以防止内容丢失。这与块的保存实现密切相关，因为如果编辑器无法正确恢复块，用户可能会无意中删除或修改其内容。在编辑器初始化期间，使用从帖子内容解析的属性重新生成每个块的保存标记。如果新生成的标记与post内容中已存储的内容不匹配，则块被标记为无效。这是因为我们假设，除非用户进行编辑，否则标记应与保存的内容保持一致。
如果检测到块无效，将提示用户选择如何处理无效：
单击尝试块恢复按钮将尽可能尝试恢复操作。
单击块侧面的“三点菜单”显示三个选项：
- 解决：使用两个按钮打开“解析块”对话框：
- 转换为HTML：保护原始标记不受保存的帖子内容的影响，并将块从其原始类型转换为HTML块类型，使用户可以直接修改HTML标记。
- 转换为块：保护原始标记不受保存的帖子内容的影响，并将块从其原始类型转换为已验证的块类型。
- 转换为HTML：保护原始标记不受保存的帖子内容的影响，并将块从其原始类型转换为HTML块类型，使用户可以直接修改HTML标记。
- 转换为经典块：保护原始标记不受保存的帖子内容的影响。由于块将从其原始类型转换为经典块类型，因此无法再使用原始块类型的可用控件编辑内容。
块如何变得无效？
块失效的两个最常见来源是：
- 块代码中的缺陷会导致意外的内容修改。请参阅下面的问题，了解如何作为插件作者调试块无效。
- 您或外部编辑器更改了块的HTML标记，使其不再被认为是正确的。
我是一名插件作者。我应该做什么来调试为什么我的块被标记为无效？
在开始调试之前，请务必熟悉上面描述的验证步骤，该步骤记录了检测块是否无效的过程。如果块的重新生成标记与post内容中保存的内容不匹配，则块无效，因此，这通常是由于从保存的内容中错误地解析块的属性所致。
如果您正在使用属性源，确保源于标记的属性完全按预期保存，并且类型正确（通常为“字符串”或“数字”).
当检测到块无效时，将在浏览器的开发人员工具控制台中记录一条警告。警告将包括有关发生标记差异的确切点的具体详细信息。请务必仔细查看预期和实际加价中的任何差异，以了解问题发生的位置。
我换了我的街区节约行为和旧内容现在包括无效块。我该怎么解决这个问题？
请参阅上的指南不推荐的块以了解有关如何在有意的标记更改中容纳遗留内容的更多信息。