83 lines
3.0 KiB
JavaScript
83 lines
3.0 KiB
JavaScript
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import deprecated from '@wordpress/deprecated';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Internal dependencies
|
||
|
|
*/
|
||
|
|
import { registeredBlockComponents } from './registered-block-components-init';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Register a Block Component.
|
||
|
|
*
|
||
|
|
* WooCommerce Blocks allows React Components to be used on the frontend of the store in place of
|
||
|
|
* Blocks instead of just serving static content.
|
||
|
|
*
|
||
|
|
* Registering a Block Component allows you to define which React Component should be used in place
|
||
|
|
* of a registered Block. The Component, when rendered, will be passed all Block Attributes.
|
||
|
|
*
|
||
|
|
* @export
|
||
|
|
* @param {Object} options Options to use when registering the block.
|
||
|
|
* @param {Function} options.component React component that will be rendered.
|
||
|
|
* @param {string} options.blockName Name of the block that this component belongs to.
|
||
|
|
* @param {string} [options.context] To make this component available only under a certain context
|
||
|
|
* (named parent Block) define it here. If left blank, the
|
||
|
|
* Component will be available for all contexts.
|
||
|
|
*/
|
||
|
|
export function registerBlockComponent( options ) {
|
||
|
|
if ( ! options.context ) {
|
||
|
|
options.context = 'any';
|
||
|
|
}
|
||
|
|
assertOption( options, 'context', 'string' );
|
||
|
|
assertOption( options, 'blockName', 'string' );
|
||
|
|
assertOption( options, 'component', 'function' );
|
||
|
|
|
||
|
|
const { context, blockName, component } = options;
|
||
|
|
|
||
|
|
if ( ! registeredBlockComponents[ context ] ) {
|
||
|
|
registeredBlockComponents[ context ] = {};
|
||
|
|
}
|
||
|
|
|
||
|
|
registeredBlockComponents[ context ][ blockName ] = component;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Asserts that an option is of the given type. Otherwise, throws an error.
|
||
|
|
*
|
||
|
|
* @throws Will throw an error if the type of the option doesn't match the expected type.
|
||
|
|
* @param {Object} options Object containing the option to validate.
|
||
|
|
* @param {string} optionName Name of the option to validate.
|
||
|
|
* @param {string} expectedType Type expected for the option.
|
||
|
|
*/
|
||
|
|
const assertOption = ( options, optionName, expectedType ) => {
|
||
|
|
if ( typeof options[ optionName ] !== expectedType ) {
|
||
|
|
throw new Error(
|
||
|
|
`Incorrect value for the ${ optionName } argument when registering an inner block. It must be a ${ expectedType }.`
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Alias of registerBlockComponent kept for backwards compatibility.
|
||
|
|
*
|
||
|
|
* @export
|
||
|
|
* @param {Object} options Options to use when registering the block.
|
||
|
|
* @param {string} options.main Name of the parent block.
|
||
|
|
* @param {string} options.blockName Name of the child block being registered.
|
||
|
|
* @param {Function} options.component React component used to render the child block.
|
||
|
|
*/
|
||
|
|
export function registerInnerBlock( options ) {
|
||
|
|
deprecated( 'registerInnerBlock', {
|
||
|
|
version: '2.8.0',
|
||
|
|
alternative: 'registerBlockComponent',
|
||
|
|
plugin: 'WooCommerce Blocks',
|
||
|
|
hint: '"main" has been replaced with "context" and is now optional.',
|
||
|
|
} );
|
||
|
|
assertOption( options, 'main', 'string' );
|
||
|
|
registerBlockComponent( {
|
||
|
|
...options,
|
||
|
|
context: options.main,
|
||
|
|
} );
|
||
|
|
}
|