A collection of utility functions for use with WooCommerce admin block templates.
Registers a WooCommerce block type.
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
: Block metadata.
-
WPBlockType | undefined
: The block type if it was registered successfully, otherwiseundefined
.
This hook is used to retrieve a layout template from the server.
import { useLayoutTemplate } from '@woocommerce/block-templates';
export function Example() {
const { layoutTemplate, isResolving } =
useLayoutTemplate( 'my-layout-template' );
return (
<div>
{ isResolving && <p>Loading layout template...</p> }
{ layoutTemplate && (
<p>{ JSON.stringify( layoutTemplate, null, 4 ) }</p>
) }
{ ! layoutTemplate && ! isResolving && (
<p>'Layout template does not exist!'</p>
) }
</div>
);
}
-
layoutTemplateId
string
: The id of the layout template to retrieve.
-
Object
-
layoutTemplate
Object | undefined
: The layout template if it was found, otherwisenull
. -
isResolving
boolean
: Whether or not the layout template is resolving.
-
layoutTemplate
This hook is used to lightly mark an element as a WooCommerce block template block. The block's attributes must be passed to this hook and the return result passed to the outermost element of the block in order for the block to properly function in WooCommerce block template contexts.
If you define a ref for the element, it is important to pass the ref to this hook, which the hook in turn will pass to the component through the props it returns. Optionally, you can also pass any other props through this hook, and they will be merged and returned.
import { useWooBlockProps } from '@woocommerce/block-templates';
export function Edit( { attributes } ) {
const { blockProps } = useWooBlockProps( attributes, {
className: 'my-block',
} );
return <div { ...blockProps }>Block content</div>;
}
-
attributes
Object
: Block attributes. -
props
Object
: Optional. Props to pass to the element.
-
Object
: Props to pass to the element to mark as a WooCommerce block.