块的注册

WordPress中的块通常捆绑在插件中,并使用块.json元数据。

虽然可以只在客户端注册块,但最佳实践强烈建议在服务器和客户端注册块。这种双重注册对于启用动态渲染、块支持、块挂钩和样式变化等服务器端功能至关重要。如果没有服务器端注册,这些功能将无法正常运行。

例如,如果你想要一个块通过以下方式设计主题.json,必须在服务器上注册。否则,块将无法识别或应用在中指定给它的任何样式主题.json.

下图详细说明了块的注册过程。

打开块注册图图像

使用PHP注册块(服务器端)

服务器上的块注册通常在主插件PHP文件中进行寄存器块类型()函数调用初始化挂钩。此函数通过读取存储在块.json文件。

此函数用于注册块类型,在这种情况下主要使用两个参数,尽管它可以适应更多变化:

  • $块类型(一串):这可以是包含块.json文件或元数据文件的完整路径(如果它具有不同的名称)。这个参数告诉WordPress在哪里可以找到块的配置。

  • $个参数(阵列):这是一个可选参数,您可以在其中为块类型指定其他参数。默认情况下,这是一个空数组,但它可以包含各种选项,其中之一是$render_callback。此回调用于在前端渲染块,是提供中的属性块.json.

在开发过程中块.json文件通常从型钢混凝土(源)目录到建造目录作为编译代码的一部分。因此,在注册块时,请确保$块类型路径指向块.json中的文件建造目录。

这个寄存器块类型()函数返回注册的块类型(工作包块类型)成功或失败时。下面是一个使用渲染器回调.

寄存器块类型(__方向__.'/构建',阵列(“render_callback”=>“render_block_core_notice”,));

下面是一个更完整的示例,包括初始化挂钩。

函数minimal_block_ca6eda__register_block(){寄存器块类型(__DIR__.'/build');}add_action('init','minimal_block_ca6eda__register_block');

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

使用JavaScript注册块(客户端)

当块已经在服务器上注册时,只需使用寄存器块类型方法@wordpress/块包裹。您只需要确保使用与块的块.json文件。下面是一个示例:

从“@wordpress/blocks”导入{registerBlockType};registerBlockType('my-plugin/notice'{编辑:编辑,// ...其他客户端设置} );

虽然通常建议使用PHP在服务器上注册块,以获得“使用元数据文件的好处”部分中,您可以选择只在客户端注册块。这个寄存器块类型方法允许您使用元数据注册块类型。

该函数接受两个参数:

  • 块名称或元数据(一串|对象):这可以是作为字符串的块类型名称,也可以是包含块元数据的对象,通常从块.json文件。
  • 设置(对象):这是一个包含块的客户端设置的对象。
您可以导入块.json文件(或任何其他.json文件如果您使用的是构建过程,例如wp-脚本.

这个设置作为第二个参数传递的对象包含许多属性,但这是两个最重要的属性:

  • 编辑:在我们的块的编辑器中使用的React组件。
  • 节约:返回保存到数据库的静态HTML标记的函数。

这个寄存器块类型()函数返回注册的块类型(WP块)成功或未定义失败时。下面是一个示例:

从“@wordpress/blocks”导入{registerBlockType};从“@wordpress/block-editor”导入{useBlockProps};从“”导入元数据/块.json';const Edit=()=><p{…useBlockProps()}>Hello World-块编辑器;const save=()=><p{…useBlockProps.save()}>你好世界-前端;registerBlockType(元数据名称{编辑:编辑,保存,} );

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

其他资源