woocommerce/packages/js/block-templates
Christopher Allford 95bc1189e5
Update `wireit` & Optimize Builds (#43595)
This bumps the version to 0.14.3 so that we can take advantage of some
upstream improvements. It also makes some changes to the way our
builds and watches work to minimize the number of unnecessary
Node processes involved in the execution.
2024-01-15 14:06:55 -08:00
..
changelog Update `wireit` & Optimize Builds (#43595) 2024-01-15 14:06:55 -08:00
src Implement useLayoutTemplate hook (#43347) 2024-01-09 15:42:20 -05:00
.eslintrc.js Template API: Expose template block id and order to client (#40263) 2023-09-27 13:38:56 -07:00
.npmrc Template API: Expose template block id and order to client (#40263) 2023-09-27 13:38:56 -07:00
README.md Implement useLayoutTemplate hook (#43347) 2024-01-09 15:42:20 -05:00
babel.config.js Template API: Expose template block id and order to client (#40263) 2023-09-27 13:38:56 -07:00
changelog.md Prepare block templates package for release (#41707) 2023-11-27 14:09:54 -04:00
composer.json bump php version in packages/js/*/composer.json (#42020) 2024-01-04 10:18:34 -04:00
composer.lock Template API: Expose template block id and order to client (#40263) 2023-09-27 13:38:56 -07:00
jest.config.json Fix Jest Preset (#42707) 2023-12-12 09:58:13 -08:00
package.json Update `wireit` & Optimize Builds (#43595) 2024-01-15 14:06:55 -08:00
tsconfig-cjs.json Template API: Expose template block id and order to client (#40263) 2023-09-27 13:38:56 -07:00
tsconfig.json Template API: Expose template block id and order to client (#40263) 2023-09-27 13:38:56 -07:00
webpack.config.js Template API: Expose template block id and order to client (#40263) 2023-09-27 13:38:56 -07:00

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, otherwise undefined.

useLayoutTemplate

This hook is used to retrieve a layout template from the server.

Usage

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>
	);
}

Parameters

  • layoutTemplateId string: The id of the layout template to retrieve.

Returns

  • Object
    • layoutTemplate Object | undefined: The layout template if it was found, otherwise null.
    • isResolving boolean: Whether or not the layout template is resolving.

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.