4e89debd0c
When using a preset we need to keep in mind that the transformation paths are relative to the preset, not the consuming package. We get around this by using `<rootDir>` in the transform paths. However, doing this means fixing the root directory for all of the jest tests. This keeps the tests working in the same way but lets us fix the preset too. |
||
|---|---|---|
| .. | ||
| changelog | ||
| src | ||
| .eslintrc.js | ||
| .npmrc | ||
| README.md | ||
| babel.config.js | ||
| changelog.md | ||
| composer.json | ||
| composer.lock | ||
| jest.config.json | ||
| package.json | ||
| tsconfig-cjs.json | ||
| tsconfig.json | ||
| webpack.config.js | ||
README.md
@woocommerce/block-templates
A collection of utility functions for use with WooCommerce admin block templates.
API
registerWooBlockType
Registers a WooCommerce block type.
Usage
import { registerWooBlockType } from '@woocommerce/block-templates';
import metadata from './block.json';
import { Edit } from './edit';
registerWooBlockType( {
name: metadata.name,
metadata: metadata,
settings: {
edit: Edit,
}
} );
Parameters
- blockMetadata
Object: Block metadata.
Returns
WPBlockType | undefined: The block type if it was registered successfully, otherwiseundefined.
useWooBlockProps
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.
Usage
import { useWooBlockProps } from '@woocommerce/block-templates';
export function Edit( { attributes } ) {
const { blockProps } = useWooBlockProps(
attributes,
{
className: 'my-block',
}
);
return (
<div { ...blockProps }>
Block content
</div>
);
}
Parameters
- attributes:
Object: Block attributes. - props:
Object: Optional. Props to pass to the element.
Returns
Object: Props to pass to the element to mark as a WooCommerce block.