变化

块变体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},],

使用isDefault

默认情况下,除了原始块类型项目外,所有变体都将显示在插入器中。但是,设置is默认列出的任何变体的标志将覆盖插入器中的常规块类型。这是一个很好的工具,可以根据您的特定需求来管理编辑体验。

例如,如果您希望默认情况下Media&Text块在右侧显示图像,可以创建如下变体:

wp.blocks.registerBlockVariation('core/media-text'{name:'媒体-文本-媒体-右',标题:__(‘媒体和文本’),isDefault:true,属性:{mediaPosition:'右',},} );

使用isDefault的注意事项

While期间是默认值在没有现有变体的情况下重写块时效果很好,如果存在其他变体,则可能会遇到问题。

如果同一块的其他变体使用是默认值,您的变体不一定会成为默认值。编辑尊重第一个注册的变体是默认值,可能不是你的。

解决方案是在向注册您的变体之前注销其他变体是默认值。此警告强化了始终提供独特变体的建议名称。否则,无法注销变体。

使用isActive

处于活动状态属性是可选的,建议使用。块编辑器使用此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,

isActive匹配的特定性

注意:自从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颜色:生动可读背景颜色:青色-液体-灰色,两种变体处于活动状态条件将匹配该块实例。在这种情况下具体的匹配将被确定为活动变异,其中特异性被计算为每个变异的长度处于活动状态数组。这意味着红色/灰色段落将显示为活动变量。

请注意,如果匹配变异的特异性处于活动状态属性是函数而不是字符串[]在这种情况下,第一匹配变化将被确定为活动变化。因此,通常建议使用字符串[]而不是功能对于处于活动状态属性。