登记处

阻止注册API引用。

您可以使用本页中描述的函数仅在客户端上用JavaScript注册块,但推荐的方法是使用`block.json`元数据文件在服务器上用PHP注册新的块类型。请参见完整信息的元数据文档

了解如何创建第一个块用于WordPress块编辑器。从设置开发环境、工具和熟悉新的开发模型开始,本教程涵盖了开始创建块所需的所有知识。

寄存器块类型

  • 类型: 功能

每个块都从注册一个新的块类型定义开始。要注册,请使用寄存器块类型函数wp-块包裹。该函数接受两个参数,一个块名称和块配置对象。

块名称

  • 类型: 字符串

块的名称是标识块的唯一字符串。名称的结构必须为名称空间/块名称,其中namespace是插件或主题的名称。

//使用唯一名称注册块registerBlockType('my-plugin/book',{});

注:块名称只能包含小写字母数字字符和破折号,并且必须以字母开头。

注:此名称在注释分隔符上用作<!-- wp:我的插件/书-->。核心提供的那些块在序列化时不包括命名空间。

块配置

  • 类型: 对象[{键:值}]

块需要指定一些属性才能成功注册。这些是通过配置对象定义的,该对象包括以下内容:

标题

  • 类型: 字符串

这是块的显示标题,可以使用我们的翻译功能进行翻译。标题将显示在插入器和编辑器的其他区域中。

//我们的数据对象标题:__(“书”);

注:为了使你的区块标题在UI中保持可读性和可访问性,请尽量避免过长的标题。

描述(可选)

  • 类型: 字符串

这是您的块的简短描述,可以使用我们的翻译功能进行翻译。这将显示在设置提要栏的块选项卡中。

description:__('显示图书卡的方框');

类别

  • 类型: 字符串[文本|媒体|设计|小部件|主题|嵌入]

块按类别分组,以帮助用户浏览和发现它们。

提供的核心类别包括:

  • 文本
  • 媒体
  • 设计
  • 小部件
  • 主题
  • 嵌入
//分配到“小部件”类别类别:“小部件”,

插件和主题也可以注册自定义块类别.

图标(可选)

  • 类型: 字符串|对象

应指定图标属性,以便更容易识别块。这些可以是WordPress的Dashicons,或自定义高级副总裁元素。

//为块指定dashiconicon:'书本替换',//为块指定自定义svgicon:<svg viewBox=“0 0 24 24”xmlns=“http://www.w3.org/2000/svg“><path-fill=”none“d=”M0 0h24v24H0V0z“/><path d=”M19 13H5v-2h14v2z“/>,

注:自定义SVG图标自动包装在wp.原语。SVG公司成分添加辅助功能属性(隐藏的咏叹调,角色、和可聚焦的).

对象也可以作为图标传递,在这种情况下,如上所述,图标应包含在src属性中。

除了src之外,对象还可以包含背景色和前景色,这些颜色在适用时将与图标一起显示,例如:在插入器中。

图标:{//指定与图标一起显示的背景色,例如:在插入器中。背景:“#7e70af”,//指定图标的颜色(可选:如果未设置,将自动定义可读的颜色)前台:“#fff”,//为块指定图标src:<svg viewBox=“0 0 24 24”xmlns=“http://www.w3.org/2000/svg“><path fill=”none“d=”M0 0h24v24H0V0z“/><path d=”M19 13H5v-2h14v2z“/></svg>,} ,

关键字(可选)

  • 类型: 阵列

有时,块可以有别名,以帮助用户在搜索时发现它。例如形象块也可以被发现照片。您可以通过提供术语数组(可以翻译)来实现。

//更容易发现带有关键字别名的块。//这些可以本地化,以便您的关键字可以跨区域设置工作。关键词:[__('图像'),__('照片'),____('图片')],

样式(可选)

  • 类型: 阵列

块样式可用于为块提供替代样式。它通过向块的包装器添加类名来工作。使用CSS,主题开发人员可以为块样式指定类名(如果选中)。

//注册块样式。样式:[//将样式标记为默认。{name:'默认',标签:__(“圆形”),isDefault:真},{name:'大纲',标签:__('大纲')},{name:'平方',标签:__(“方形”)},],

插件和主题也可以注册自定义块样式用于现有块。

属性(可选)

  • 类型: 对象

属性提供块的结构化数据需求。它们在序列化时可以以不同的形式存在,但它们是在公共接口下一起声明的。

//指定块属性属性:{封面:{type:'字符串',source:'属性',选择器:'img',属性:'src',},作者:{type:'字符串',源:'html',选择器:“.book-author”,},页码:{类型:“数字”,},},

示例(可选)

  • 类型: 对象

示例为块提供结构化示例数据。此数据用于构建块的预览,当用户将鼠标悬停在块上时显示在检查器帮助面板中,当选择块时显示在样式面板中。

示例对象中提供的数据应与定义的属性相匹配。例如:

示例:{属性:{封面:'https://example.com/image.jpg',作者:《威廉·莎士比亚》,页数:500},},

如果例子未定义,则不会显示预览。因此,即使没有定义属性,也要设置一个空的示例对象示例:{}将触发预览以显示。

也可以通过以下方式使用内部块扩展块预览内部块例如:

示例:{属性:{封面:'https://example.com/image.jpg',},内部块:[{name:'核心/段落',属性:{/*翻译人员:示例文本*/内容:__(“Lorem ipsum悲哀坐在amet,神圣的敬拜精英。Praesent et eros eu felis公司。”),},},],},

还可以通过定义预览容器的宽度(以像素为单位)视图端口宽度例如:

示例:{属性:{封面:'https://example.com/image.jpg',},视图端口宽度:800},

变体(可选)

  • 类型: 对象[]
  • :WordPress 5.9.0版

与块样式的声明方式类似,块类型可以定义用户可以从中选择的块变体。不同之处在于,此字段提供了一种在插入块时应用初始自定义属性和内部块的方法,而不是仅更改视觉外观。请参阅块变体API了解更多详细信息。

支架(可选)

  • 类型: 对象

支持包含一组选项,用于控制编辑器中使用的功能。请参见这个支架文档了解更多详细信息。

变换(可选)

  • 类型: 对象

转换提供了块可以从何处转换以及可以转换为何处的规则。块可以从另一个块、短代码、正则表达式、文件或原始DOM节点进行转换。看看块转换API有关每个可用转换的更多信息。

父级(可选)

  • 类型: 阵列

块可以插入到使用内部块作为嵌套内容。有时,限制块以使其仅作为嵌套块可用是很有用的。例如,您可能希望只允许“添加到购物车”块在“产品”块中可用。

设置起源允许块要求只有在嵌套在指定块中时才可用。

//仅当此块嵌套在Columns块中时才允许此块父级:['核心/列'],

祖先(可选)

  • 类型: 阵列
  • :WordPress 6.0.0版

这个祖先属性使指定块类型内的块在祖先块子树的任何位置都可用。例如,只要“Column”位于“Comment Template”块中的某个位置,就可以将“Comment Content”块放置在“Columns”块中。起源属性,指定其祖先可以放置在子树中的任何位置,同时使用指定的起源需要成为直接的孩子。

//仅当此块嵌套在Columns块中的任何级别时才允许使用它。祖先:['核心/列'],

允许的块(可选)

  • 类型: 阵列
  • :WordPress 6.5.0版

设置允许的块属性将限制哪些块类型可以嵌套为块的直接子级。

//仅允许将Columns块嵌套为此块的直接子级allowedBlocks:['核心/列'],

块钩(可选)

  • 类型: 对象
  • :WordPress 6.4.0(文字出版社6.4.0)

Block Hooks是一种API,它允许块在给定块类型的所有实例旁边,在“挂钩”块指定的相对位置自动插入自身。也就是说,块可以选择在给定块类型之前或之后插入,或者作为其第一个子块或最后一个子块插入(即分别在其子块列表的前面或后面插入)。挂钩块将出现在前端和编辑器中(允许用户自定义)。

关键是块的名称(一串)钩住,值是钩住的位置(一串). 允许的目标值为:

  • 之前–在目标块之前注入。
  • 之后–在目标块后注入。
  • 第一个孩子–在目标容器块的第一个内部块之前注入。
  • 最后一个孩子–在目标容器块的最后一个内部块之后注入。
{块钩:{“core/verse”:“之前”,“磁芯/垫片”:“之后”,“core/column”:“firstChild”,“core/group”:“lastChild”,}}

必须强调的是,Block Hooks功能仅设计用于静止的基于块的模板、模板部件和模式。对于模式,这包括主题提供的模式块模式目录,或从呼叫到寄存器块模式.

Block Hooks不适用于用户创建的帖子内容或模式,例如同步模式,或用户修改的主题模板和模板部分。

阻止集合

寄存器块集合

  • 类型: 功能

可以将块添加到集合中,将来自同一原点的所有块分组在一起

寄存器块集合采用两个参数,命名空间和设置对象,包括标题偶像.

命名空间

  • 类型: 字符串

这应该与块名称中声明的名称空间相匹配;插件或主题的名称。

设置

标题

  • 类型: 字符串

这将显示在块插入器部分中,该部分将列出此集合中的所有块。

偶像

  • 类型: 对象

(可选)显示在块插入器中标题旁边的图标。

//注册块集合registerBlockCollection('my-plugin',{title:'my plugin'});