块包装器

块编辑器中的每个块都包含在HTML包装器中，HTML包装器必须具有特定的属性才能在编辑器和前端正确运行。作为开发人员，我们可以直接操作这个标记，WordPress提供了如下工具使用块属性（）以修改添加到块的包装器的属性。

在使用自定义样式或功能时，确保块包装器的正确属性尤其重要，例如砌块支撑.

WordPress中的块可以定义为三种不同类型的标记，每种标记都起着独特的作用：

• 编辑器标记：这是块编辑器中块的视觉表示。它是使用编辑通过在客户端注册块时反应组件寄存器块类型.
• 保存标记：此标记是保存块内容时保存到数据库中的标记。它是通过节约功能，也提供给寄存器块类型在块注册期间。如果块不使用动态渲染，则此保存的标记将显示在前端。
• 动态渲染标记：当一个块的内容需要动态生成时，这个标记就会起作用。它是在服务器端定义的，可以通过渲染器回调中的函数寄存器块类型或a渲染.php中指定的文件块.json。如果存在，此标记将覆盖所有保存的标记，并用于块的前端显示。

对于这两个编辑组件和节约功能，使用标准DOM元素（如<div>)或React组件，它将所有附加的props传递给本机DOM元素。使用反应片段(<片段>)或<服务器端渲染>组件对这些包装器不起作用。

编辑器标记

这个使用块属性（）挂钩，由@wordpress/块编辑器包，用于定义编辑组件。

此挂钩简化了几个任务，包括：

• 分配唯一身份证件到块的HTML结构。
• 添加各种可访问性和数据-用于增强功能和信息的属性。
• 合并反映块自定义设置的类和内联样式。默认情况下，这包括：
  • 这个wp-块用于通用块样式的类。
  • 一个特定于块的类，它结合了块的名称空间和名称，确保了独特和有针对性的样式功能。

在以下示例中，块的编辑器标记在编辑组件使用使用块属性（）挂钩。

const Edit=（）=><p{…useBlockProps（）}>Hello World-块编辑器；寄存器块类型（{编辑：编辑} );

请参阅完整块示例的以上代码.

块编辑器中块的标记可以如下所示，其中类和属性将自动应用：

<ptabindex=“0”id=“block-4462939a-b918-44bb-9b7c-35a0db5ab8fe”role=“文档”aria-label=“区块：最小古腾堡区块ca6eda”数据块=“4462939a-b918-44bb-9b7c-35a0db5ab8fe”data-type=“block-development-examples/minimal-block-ca6eda”data-title=“最小古腾堡区块ca6eda”class=“块编辑器块列表块wp-块是选中的wp-block-block-development示例-minimal-block-ca6eda">Hello World-块编辑器</p>

在一个街区编辑组件，使用使用块属性（）钩子通过将附加类和属性作为参数传递来包含它们。（参见例子)

当您使用支架属性，则在返回的对象中包含任何相应的类或属性使用块属性自动。

保存标记

在数据库中保存标记时，添加useBlockProps.save（）到块的包装器元素。useBlockProps.save（）确保块类名正确呈现，以及块所注入的任何HTML属性支持API。

考虑以下在客户机中注册块的代码。请注意它是如何定义编辑块以及将块保存到数据库中时应使用的标记的。

const Edit=（）=>＜p｛…useBlockProps（）｝＞Hello World-块编辑器</p＞；const save=（）=><p{…useBlockProps.save（）}>你好世界-前端；registerBlockType（{编辑：编辑，保存，} );

请参阅完整块示例的以上代码.

前端块的标记可以如下所示，其中类是自动应用的：

<p class=“wp-block-block-development-examples-minimal-block-ca6eda”>Hello World–前端</p>

如果要将任何其他类或属性添加到节约函数，它们应该作为useBlockProps.save（）（请参见例子)

当您添加支架对于任何功能，都会将适当的类添加到useBlockProps.save（）挂钩。在下面的示例中，文本和背景颜色类已添加到段落块中。

<p class=“wp-block-block-development示例-块支持-6aa4ddhas-accent-4-色has-contrast-背景色has-text-彩色有背景“>你好世界</p>

这个示例块生成此HTML的区块开发示例存储库。

动态渲染标记

在动态块中，前端标记在服务器端呈现，您可以使用获取块包装属性（）函数输出所需的类和属性useBlockProps.save（）在中节约功能。（参见例子)

<p<？php echo get_block_wrapper_attributes（）；？>><?php esc_html_e（'动态渲染块–hello！！！'，'块开发示例'）；？></p>