42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { renderFrontend } from '@woocommerce/base-utils';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { renderInnerBlocks } from './render-inner-blocks';
|
|
|
|
/**
|
|
* Renders a block component in the place of a specified set of selectors.
|
|
*
|
|
* @param {Object} props Render props.
|
|
* @param {Function} props.Block React component to use as a replacement.
|
|
* @param {string} props.selector CSS selector to match the elements to replace.
|
|
* @param {string} [props.blockName] Optional Block Name. Used for inner block component mapping.
|
|
* @param {Function} [props.getProps] Function to generate the props object for the block.
|
|
*/
|
|
export const renderParentBlock = ( {
|
|
Block,
|
|
selector,
|
|
blockName = '',
|
|
getProps = () => {},
|
|
} ) => {
|
|
const getPropsWithChildren = ( el, i ) => {
|
|
const children =
|
|
el.children && el.children.length
|
|
? renderInnerBlocks( {
|
|
blockName,
|
|
children: el.children,
|
|
} )
|
|
: null;
|
|
return { ...getProps( el, i ), children };
|
|
};
|
|
renderFrontend( {
|
|
Block,
|
|
selector,
|
|
getProps: getPropsWithChildren,
|
|
} );
|
|
};
|