块变体API允许您定义块的多个版本(变体)。块变体与原始块的不同之处在于一组初始属性或内部块。将块变体插入到编辑器中时,将应用这些属性和/或内部块。
变体是一种很好的方法,可以创建现有块的迭代,而无需从头开始构建全新的块。
要更好地理解此API,请考虑Embed块。此块包含各种类型的可嵌入内容(WordPress、Youtube等)的多种变体。每个Embed块变体在编辑、保存等方面共享相同的底层功能。除了名称和描述性信息之外,主要区别在于提供者名称slug
属性。下面是Embed块中变化的简化示例。查看源代码以获取完整的规范。
变化:[{name:'wordpress',title:'WordPress',description:__('嵌入WordPress帖子'),属性:{providerNameSlug:“wordpress”},},{name:'youtube',title:“YouTube”,description:__('嵌入YouTube视频。'),属性:{providerNameSlug:“youtube”},},],
块变量由可以包含以下字段的对象定义:
名称
(类型一串
)–唯一的机器可读名称。
标题
(可选,类型一串
)–一个可读的变体标题。
描述
(可选,类型一串
)–人类可读的变体描述。
类别
(可选,类型一串
)–搜索界面中使用的类别分类,用于按类别排列块类型。
关键字
(可选,类型字符串[]
)–一组术语(可以翻译),帮助用户在搜索时发现变化。
偶像
(可选,类型一串
|对象
)–有助于可视化变化的图标。它可以与块类型具有相同的形状。
属性
(可选,类型对象
)–覆盖块属性的值。
内部块
(可选,类型数组[]
)–嵌套块的初始配置。
例子
(可选,类型对象
)–为块预览提供结构化数据。设置为未定义
禁用预览。请参阅块注册API了解更多详细信息。
范围
(可选,类型WPBlock变化范围[]
)–默认为块
和插入器
。适用变更的范围列表。可用选项包括:
块
–由块用于过滤特定的块变化。柱
和查询
块具有这样的变化,这些变化被传递给实验块变量选取器组件。此组件处理变量的显示,并允许用户选择其中之一。
插入器
–块变化显示在插入器上。
转型
–块变化显示在用于变化转换的组件中。
是默认值
(可选,类型布尔值
)–默认为假
。指示当前变体是否为默认变体(详细信息如下)。
处于活动状态
(可选,类型函数|string[]
)–块属性的函数或数组,用于确定选择块时变量是否处于活动状态。该函数接受块属性
和变量属性
(详情如下)。
从技术上来说,可以创建块变体,而不需要唯一的名称
,但这是不推荐。独一无二的名称
允许编辑器区分您的变体和其他可能存在的变体。它还允许根据需要注销您的变体,并对is默认
设置(详细信息如下)。
通过提供变化
键和适当的变量对象数组,如上面的示例所示。请参阅块注册API了解更多详细信息。
要为现有块(如Core块)创建变体,请使用wp.blocks.registerBlockVariation()
。此函数接受块的名称和定义变量的对象。
wp.blocks.registerBlockVariation('core/embed'{name:'自定义嵌入',属性:{providerNameSlug:“自定义”},} );
块变化也可以很容易地删除。为此,请使用wp.blocks.unregisterBlockVariation()
。此函数接受块的名称和名称
应注销的变更。
wp.blocks.unregisterBlockVariation('core/embed','youtube');
块样式和块变体之间的主要区别是,块样式只是将CSS类应用于块,因此可以用另一种方式设置其样式。请参阅块样式API了解更多详细信息。
如果要应用初始属性或内部块,这属于块变化范围。也可以使用类名
属性。
变化:[{名称:“蓝色”,标题:__(‘蓝色报价’),isDefault:true,属性:{颜色:'蓝色',className:“is-style-blue-quote”},icon:'格式报价',激活:(块属性,变量属性)=>blockAttributes.color===变量Attributes/color},],
默认情况下,除了原始块类型项目外,所有变体都将显示在插入器中。但是,设置is默认
列出的任何变体的标志将覆盖插入器中的常规块类型。这是一个很好的工具,可以根据您的特定需求来管理编辑体验。
例如,如果您希望默认情况下Media&Text块在右侧显示图像,可以创建如下变体:
wp.blocks.registerBlockVariation('core/media-text'{name:'媒体-文本-媒体-右',标题:__(‘媒体和文本’),isDefault:true,属性:{mediaPosition:'右',},} );
While期间是默认值
在没有现有变体的情况下重写块时效果很好,如果存在其他变体,则可能会遇到问题。
如果同一块的其他变体使用是默认值
,您的变体不一定会成为默认值。编辑尊重第一个注册的变体是默认值
,可能不是你的。
解决方案是在向注册您的变体之前注销其他变体是默认值
。此警告强化了始终提供独特变体的建议名称
。否则,无法注销变体。
而处于活动状态
属性是可选的,建议使用。块编辑器使用此API来检查哪个变体处于活动状态,并在编辑器中选择变体的实例时显示正确的变体的标题、图标和描述。
如果处于活动状态
未设置,则编辑器无法区分原始块的实例和变体,因此将显示原始块信息。
属性可以设置为字符串数组(字符串[]
),或函数。建议尽可能使用字符串数组版本。
这个字符串[]
版本用于声明块实例的哪些属性应与给定变量的属性进行比较。将检查每个属性,如果所有属性都匹配,则变量将处于活动状态。
例如,在core Embed块中提供者名称slug
属性用于确定嵌入提供者(例如“youtube”或“twitter”)。变化可以这样声明:
常量变化=[{名称:“twitter”,title:'推特',icon:embeddTwitterIcon,关键词:['推特',__('社交')],description:__('嵌入推文'),模式:[/^https?:\/\/(www\.)?twitter\.com/.+/i],属性:{providerNameSlug:“twitter”,响应:true},},{name:'youtube',title:“YouTube”,icon:嵌入YouTubeCon,关键词:[__('音乐'),__('视频')],description:__('嵌入YouTube视频。'),图案:[/^https?:\/\/((m|www)\.)?youtube\.com/+/我,/^https?:\/\/youtu\.be\/+/我,],属性:{providerNameSlug:“youtube”,responsive:true},},// ...];
这个处于活动状态
属性将如下所示:
处于活动状态:[“providerNameSlug”];
这将导致提供者名称slug
与变体声明中声明的值(上面代码段中的值)进行比较,以确定哪个嵌入变体处于活动状态。
自WordPress以来,也支持嵌套对象路径6.6.0
例如,考虑一个具有查询
对象作为属性。可以根据该对象的postType(后类型)
属性(同时忽略其所有其他属性):
isActive:['query.postType'];
此属性的函数版本接受块实例的块属性
作为第一个参数变量属性
声明为变量作为第二个参数。这些参数可用于通过比较它们并返回真的
或假
(指示此变体对于此块实例是否处于非活动状态)。
使用相同的嵌入块示例,函数版本如下所示:
激活:(块属性,变量属性)=>blockAttributes.providerNameSlug===变量Attributes/providerName Slug,
注意:自从WordPress以来改进了处理6.6.0
.
如果有多个变体处于活动状态
check匹配一个给定的块实例,所有这些都是字符串数组,然后是最高的变量特异性将被选中。考虑以下示例:
wp.blocks.registerBlockVariation(“核心/段落”{name:'段落读取',title:'红色段落',属性:{textColor:'vivid-red',},处于活动状态:['textColor'],} );wp.blocks.registerBlockVariation(“核心/段落”{name:'段落-灰色',title:“红色/灰色段落”,属性:{textColor:'vivid-red',backgroundColor:'cyan-bluish-gray',},处于活动状态:['textColor','backgroundColor'],} );
如果块实例具有属性text颜色:生动可读
和背景颜色:青色-液体-灰色
,两种变体处于活动状态
条件将匹配该块实例。在这种情况下具体的匹配将被确定为活动变异,其中特异性被计算为每个变异的长度处于活动状态
数组。这意味着红色/灰色段落
将显示为活动变量。
请注意,如果匹配变异的特异性处于活动状态
属性是函数而不是字符串[]
在这种情况下,第一匹配变化将被确定为活动变化。因此,通常建议使用字符串[]
而不是功能
对于处于活动状态
属性。