阻止注册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'});