跳转到主要内容

内部区块类型

以下“附加购物车和结账”内部区块类型过滤器可用:

  • additionalCartCheckoutInnerBlockTypes

additionalCartCheckoutInnerBlockTypes

描述

购物车和结账区块由内部区块组成。这些内部区块区域允许添加特定类型的区块作为子区块。默认情况下,只有 core/paragraph、core/image 和 core/separator 可用。

通过使用 additionalCartCheckoutInnerBlockTypes 过滤器,可以将项目添加到此数组中,以控制编辑器可以在哪些内部区块中添加内容。

此过滤器为每个内部区块区域调用一次,因此在确定可以在哪里添加哪些区块时,可以进行非常细粒度的控制。

参数

  • defaultValue array (默认值: []) - 过滤器的默认值。
  • extensions object (默认值: {}) - 扩展对象。
  • args object - 包含以下键的参数对象:
    • block string - 内部区块区域的区块名称,例如:woocommerce/checkout-shipping-address-block。
  • validation boolean 或 Error - 检查返回的值是否为字符串数组。如果发生错误,则会抛出错误。

返回值

  • array - 包含允许的区块类型的修改后的数组,适用于相应的内部区块区域。

代码示例

假设我们希望允许编辑器在购物车和结账区块的特定位置添加某些区块。

  1. 允许在购物车和结账区块的每个区块区域中插入 core/quote。
  2. 允许在结账中的“配送地址”区块中插入 core/table。

在我们的扩展中,我们可以注册一个过滤器来满足这两个条件,如下所示:

document.addEventListener( 'DOMContentLoaded', function () {
	const { registerCheckoutFilters } = window.wc.blocksCheckout;

	const modifyAdditionalInnerBlockTypes = (
		defaultValue,
		extensions,
		args,
		validation
	) => {
		defaultValue.push( 'core/quote' );

		if ( args?.block === 'woocommerce/checkout-shipping-address-block' ) {
			defaultValue.push( 'core/table' );
		}

		return defaultValue;
	};

	registerCheckoutFilters( 'example-extension', {
		additionalCartCheckoutInnerBlockTypes: modifyAdditionalInnerBlockTypes,
	} );
} );

要在编辑器中调用此过滤器,请将过滤器注册包含在 DOMContentLoaded 事件监听器中,并确保代码在管理面板中运行。

过滤器也可以组合使用。请参阅 组合过滤器,以获取示例。

截图

前 后
应用“附加购物车和结账内部区块类型”过滤器之前的截图 应用“附加购物车和结账内部区块类型”过滤器之后的截图