100 lines
No EOL
2.4 KiB
Markdown
100 lines
No EOL
2.4 KiB
Markdown
# @woocommerce/block-templates
|
||
|
||
用于 WooCommerce 管理区块模板的实用函数集合。
|
||
|
||
## API
|
||
|
||
### registerWooBlockType
|
||
|
||
注册一个 WooCommerce 区块类型。
|
||
|
||
#### 用法
|
||
|
||
```js
|
||
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
|
||
|
||
此钩子用于从服务器检索布局模板。
|
||
|
||
#### 用法
|
||
|
||
```js
|
||
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，它们将被合并并返回。
|
||
|
||
#### 用法
|
||
|
||
```js
|
||
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。 |
