woocommerce/packages/js/block-templates/zh-cn

@woocommerce/block-templates

用于 WooCommerce 管理区块模板的实用函数集合。

API

registerWooBlockType

注册一个 WooCommerce 区块类型。

用法

import { registerWooBlockType } from '@woocommerce/block-templates';

import metadata from './block.json';
import { Edit } from './edit';

registerWooBlockType( {
	name: metadata.name,
	metadata: metadata,
	settings: {
		edit: Edit,
	},
} );

参数

• blockMetadata Object: 区块元数据。

返回

• WPBlockType | undefined: 如果注册成功则返回区块类型，否则返回 undefined。

useLayoutTemplate

此钩子用于从服务器检索布局模板。

用法

import { useLayoutTemplate } from '@woocommerce/block-templates';

export function Example() {
	const { layoutTemplate, isResolving } =
		useLayoutTemplate( 'my-layout-template' );

	return (
		<div>
			{ isResolving && <p>正在加载布局模板...</p> }
			{ layoutTemplate && (
				<p>{ JSON.stringify( layoutTemplate, null, 4 ) }</p>
			) }
			{ ! layoutTemplate && ! isResolving && (
				<p>'布局模板不存在！'</p>
			) }
		</div>
	);
}

参数

• layoutTemplateId string: 要检索的布局模板的 ID。

返回

• Object
  • layoutTemplate Object | undefined: 如果找到则返回布局模板，否则返回 null。
  • isResolving boolean: 布局模板是否正在解析中。

useWooBlockProps

此钩子用于轻量级地将一个元素标记为 WooCommerce 区块模板区块。区块的属性必须传递给此钩子，并且返回结果必须传递给区块的最外层元素，以便区块在 WooCommerce 区块模板上下文中正常运行。

如果为元素定义了 ref，请务必将 ref 传递给此钩子，钩子会通过其返回的 props 将 ref 传递给组件。可选地，您也可以通过此钩子传递任何其他 props，它们将被合并并返回。

用法

import { useWooBlockProps } from '@woocommerce/block-templates';

export function Edit( { attributes } ) {
	const { blockProps } = useWooBlockProps( attributes, {
		className: 'my-block',
	} );

	return <div { ...blockProps }>区块内容</div>;
}

参数

• attributes Object: 区块属性。
• props Object: 可选。要传递给元素的 props。

返回

• Object: 要传递给元素以将其标记为 WooCommerce 区块的 props。