Update checkout block registration API to consume Block Metadata (#4684)

* Update registry to register components with block JSON metadata

* Use updated registration API in sample block

* remove editorScript

* Rename area and allow forced blocks to do it's thing without defining a template manually

* More naming consistency

* Validate a registered checkout block has at least one valid parent

Author: mikejolley

assets/js/atomic/utils/render-parent-block.tsx

@@ -11,7 +11,7 @@ import {
 import parse from 'html-react-parser';
 import {
 	getRegisteredBlocks,
-	isInnerBlockArea,
+	hasInnerBlocks,
 } from '@woocommerce/blocks-checkout';
 
 /**
@@ -32,11 +32,11 @@ import {
  * Gets a component from the block map for a given block name, or returns null if a component is not registered.
  */
 const getBlockComponentFromMap = (
-	blockName: string,
+	block: string,
 	blockMap: Record< string, React.ReactNode >
 ): React.ElementType | null => {
-	return blockName && blockMap[ blockName ]
-		? ( blockMap[ blockName ] as React.ElementType )
+	return block && blockMap[ block ]
+		? ( blockMap[ block ] as React.ElementType )
 		: null;
 };
 
@@ -50,12 +50,12 @@ const getBlockComponentFromMap = (
  * @see registerCheckoutBlock
  */
 const renderForcedBlocks = (
-	blockName: string,
+	block: string,
 	blockMap: Record< string, React.ReactNode >,
 	// Current children from the parent (siblings of the forced block)
 	blockChildren: HTMLCollection | null
 ) => {
-	if ( ! isInnerBlockArea( blockName ) ) {
+	if ( ! hasInnerBlocks( block ) ) {
 		return null;
 	}
 
@@ -69,16 +69,16 @@ const renderForcedBlocks = (
 				.filter( Boolean ) as string[] )
 		: [];
 
-	const forcedBlocks = getRegisteredBlocks( blockName ).filter(
-		( { block, force } ) =>
-			force === true && ! currentBlocks.includes( block )
+	const forcedBlocks = getRegisteredBlocks( block ).filter(
+		( { blockName, force } ) =>
+			force === true && ! currentBlocks.includes( blockName )
 	);
 
 	return forcedBlocks.map(
-		( { block, component }, index: number ): JSX.Element | null => {
+		( { blockName, component }, index: number ): JSX.Element | null => {
 			const ForcedComponent = component
 				? component
-				: getBlockComponentFromMap( block, blockMap );
+				: getBlockComponentFromMap( blockName, blockMap );
 			return ForcedComponent ? (
 				<ForcedComponent key={ `${ blockName }_forced_${ index }` } />
 			) : null;
@@ -91,7 +91,7 @@ const renderForcedBlocks = (
  */
 const renderInnerBlocks = ( {
 	// This is the parent block we're working within (see renderParentBlock)
-	blockName: parentBlockName,
+	block,
 	// This is the map of blockNames->components
 	blockMap,
 	// Component which inner blocks are wrapped with.
@@ -101,8 +101,8 @@ const renderInnerBlocks = ( {
 	// Current depth of the children. Used to ensure keys are unique.
 	depth = 1,
 }: {
-	// Parent Block Name. Used for inner block component mapping.
-	blockName: string;
+	// Block (parent) being rendered. Used for inner block component mapping.
+	block: string;
 	// Map of block names to block components for children.
 	blockMap: Record< string, React.ReactNode >;
 	// Wrapper for inner components.
@@ -121,7 +121,7 @@ const renderInnerBlocks = ( {
 		 * convert the HTMLElement to a React component.
 		 */
 		const { blockName = '', ...componentProps } = {
-			key: `${ parentBlockName }_${ depth }_${ index }`,
+			key: `${ block }_${ depth }_${ index }`,
 			...( element instanceof HTMLElement ? element.dataset : {} ),
 		};
 
@@ -141,9 +141,9 @@ const renderInnerBlocks = ( {
 				const elementChildren =
 					element.children && element.children.length
 						? renderInnerBlocks( {
-								children: element.children,
-								blockName: parentBlockName,
+								block,
 								blockMap,
+								children: element.children,
 								depth: depth + 1,
 								blockWrapper,
 						  } )
@@ -166,7 +166,7 @@ const renderInnerBlocks = ( {
 
 		return (
 			<Suspense
-				key={ `${ parentBlockName }_${ depth }_${ index }_suspense` }
+				key={ `${ block }_${ depth }_${ index }_suspense` }
 				fallback={ <div className="wc-block-placeholder" /> }
 			>
 				<InnerBlockComponentWrapper>
@@ -178,9 +178,9 @@ const renderInnerBlocks = ( {
 							 * children from this element.
 							 */
 							renderInnerBlocks( {
-								children: element.children,
-								blockName: parentBlockName,
+								block,
 								blockMap,
+								children: element.children,
 								depth: depth + 1,
 								blockWrapper,
 							} )
@@ -246,7 +246,7 @@ export const renderParentBlock = ( {
 		const children =
 			element.children && element.children.length
 				? renderInnerBlocks( {
-						blockName,
+						block: blockName,
 						blockMap,
 						children: element.children,
 						blockWrapper,

assets/js/blocks/cart-checkout/checkout-i2/editor-utils.ts

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { getBlockTypes } from '@wordpress/blocks';
+
+// List of core block types to allow in inner block areas.
+const coreBlockTypes = [ 'core/paragraph', 'core/image', 'core/separator' ];
+
+/**
+ * Gets a list of allowed blocks types under a specific parent block type.
+ */
+export const getAllowedBlocks = ( block: string ): string[] => [
+	...getBlockTypes()
+		.filter( ( blockType ) =>
+			( blockType?.parent || [] ).includes( block )
+		)
+		.map( ( { name } ) => name ),
+	...coreBlockTypes,
+];

assets/js/blocks/cart-checkout/checkout-i2/form-step/additional-fields.tsx

@@ -2,31 +2,31 @@
  * External dependencies
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
-import {
-	RegisteredBlocks,
-	getRegisteredBlockTemplate,
-} from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
 import { useForcedLayout } from '../use-forced-layout';
+import { getAllowedBlocks } from '../editor-utils';
 
 export const AdditionalFields = ( {
-	area,
+	block,
 }: {
-	area: keyof RegisteredBlocks;
+	// Name of the parent block.
+	block: string;
 } ): JSX.Element => {
-	const registeredBlocks = getRegisteredBlockTemplate( area );
 	const { 'data-block': clientId } = useBlockProps();
-	const template = useForcedLayout( {
+	const allowedBlocks = getAllowedBlocks( block );
+
+	useForcedLayout( {
 		clientId,
-		template: registeredBlocks,
+		template: allowedBlocks,
 	} );
+
 	return (
 		<div className="wc-block-checkout__additional_fields">
-			<InnerBlocks allowedBlocks={ template } />
+			<InnerBlocks allowedBlocks={ allowedBlocks } />
 		</div>
 	);
 };

assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-billing-address-block/edit.tsx

@@ -60,7 +60,7 @@ export const Edit = ( {
 				showPhoneField={ showPhoneField }
 				requirePhoneField={ requirePhoneField }
 			/>
-			<AdditionalFields area={ innerBlockAreas.BILLING_ADDRESS } />
+			<AdditionalFields block={ innerBlockAreas.BILLING_ADDRESS } />
 		</FormStepBlock>
 	);
 };

assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-contact-information-block/edit.tsx

@@ -41,7 +41,7 @@ export const Edit = ( {
 			<Disabled>
 				<Block allowCreateAccount={ allowCreateAccount } />
 			</Disabled>
-			<AdditionalFields area={ innerBlockAreas.CONTACT_INFORMATION } />
+			<AdditionalFields block={ innerBlockAreas.CONTACT_INFORMATION } />
 		</FormStepBlock>
 	);
 };

assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-fields-block/edit.tsx

@@ -3,51 +3,34 @@
  */
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import { Main } from '@woocommerce/base-components/sidebar-layout';
-import {
-	getRegisteredBlockTemplate,
-	innerBlockAreas,
-} from '@woocommerce/blocks-checkout';
+import { innerBlockAreas } from '@woocommerce/blocks-checkout';
+
 /**
  * Internal dependencies
  */
 import { useCheckoutBlockControlsContext } from '../../context';
 import { useForcedLayout } from '../../use-forced-layout';
-
-const ALLOWED_BLOCKS = [
-	'woocommerce/checkout-express-payment-block',
-	'woocommerce/checkout-shipping-address-block',
-	'woocommerce/checkout-shipping-methods-block',
-	'woocommerce/checkout-contact-information-block',
-	'woocommerce/checkout-billing-address-block',
-	'woocommerce/checkout-payment-block',
-	'woocommerce/checkout-order-note-block',
-	'woocommerce/checkout-actions-block',
-	'woocommerce/checkout-terms-block',
-	'core/paragraph',
-	'core/heading',
-	'core/separator',
-];
+import { getAllowedBlocks } from '../../editor-utils';
 
 export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	const blockProps = useBlockProps();
+	const allowedBlocks = getAllowedBlocks( innerBlockAreas.CHECKOUT_FIELDS );
 
 	const {
 		addressFieldControls: Controls,
 	} = useCheckoutBlockControlsContext();
-	const registeredBlocks = getRegisteredBlockTemplate(
-		innerBlockAreas.CHECKOUT_FIELDS
-	);
-	const template = useForcedLayout( {
+
+	useForcedLayout( {
 		clientId,
-		template: [ ...ALLOWED_BLOCKS, ...registeredBlocks ],
+		template: allowedBlocks,
 	} );
 	return (
 		<Main className="wc-block-checkout__main">
 			<div { ...blockProps }>
 				<Controls />
 				<form className="wc-block-components-form wc-block-checkout__form">
 					<InnerBlocks
-						allowedBlocks={ template }
+						allowedBlocks={ allowedBlocks }
 						templateLock={ false }
 						renderAppender={ InnerBlocks.ButtonBlockAppender }
 					/>

assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-payment-block/edit.tsx

@@ -73,7 +73,7 @@ export const Edit = ( props: FormStepBlockProps ): JSX.Element => {
 			<Disabled>
 				<Block />
 			</Disabled>
-			<AdditionalFields area={ innerBlockAreas.PAYMENT_METHODS } />
+			<AdditionalFields block={ innerBlockAreas.PAYMENT_METHODS } />
 		</FormStepBlock>
 	);
 };

assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-sample-block/block.json

@@ -0,0 +1,28 @@
+{
+	"name": "woocommerce/checkout-sample-block",
+	"version": "1.0.0",
+	"title": "Checkout Sample Block",
+	"category": "woocommerce",
+	"description": "An example block showing how to integrate with Checkout i2.",
+	"supports": {
+		"html": false,
+		"align": true,
+		"multiple": true,
+		"reusable": false
+	},
+	"attributes": {
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true
+			}
+		}
+	},
+	"parent": [
+		"woocommerce/checkout-shipping-address-block",
+		"woocommerce/checkout-billing-address-block",
+		"woocommerce/checkout-fields-block",
+		"woocommerce/checkout-totals-block"
+	],
+	"textdomain": "woo-gutenberg-products-block"
+}

assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-sample-block/index.tsx

@@ -1,55 +1,20 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { Icon, asterisk } from '@woocommerce/icons';
-import {
-	registerCheckoutBlock,
-	innerBlockAreas,
-} from '@woocommerce/blocks-checkout';
-import { lazy } from '@wordpress/element';
-import { WC_BLOCKS_BUILD_URL } from '@woocommerce/block-settings';
-
-// Modify webpack publicPath at runtime based on location of WordPress Plugin.
-// eslint-disable-next-line no-undef,camelcase
-__webpack_public_path__ = WC_BLOCKS_BUILD_URL;
+import { registerExperimentalBlockType } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
  */
 import { Edit, Save } from './edit';
+import metadata from './block.json';
 
-registerCheckoutBlock( 'woocommerce/checkout-sample-block', {
-	component: lazy( () =>
-		import( /* webpackChunkName: "checkout-blocks/sample" */ './frontend' )
-	),
-	areas: [
-		innerBlockAreas.SHIPPING_ADDRESS,
-		innerBlockAreas.BILLING_ADDRESS,
-		innerBlockAreas.CONTACT_INFORMATION,
-		innerBlockAreas.CHECKOUT_FIELDS,
-		innerBlockAreas.CHECKOUT_TOTALS,
-	],
-	force: true,
-	configuration: {
-		title: __( 'Sample Block', 'woo-gutenberg-products-block' ),
-		category: 'woocommerce',
-		description: __(
-			'A sample block showing how to integrate with Checkout i2.',
-			'woo-gutenberg-products-block'
-		),
-		icon: {
-			src: <Icon srcElement={ asterisk } />,
-			foreground: '#874FB9',
-		},
-		supports: {
-			align: false,
-			html: false,
-			multiple: true,
-			reusable: false,
-		},
-		attributes: {},
-		edit: Edit,
-		save: Save,
+registerExperimentalBlockType( metadata, {
+	icon: {
+		src: <Icon srcElement={ asterisk } />,
+		foreground: '#874FB9',
 	},
+	edit: Edit,
+	save: Save,
 } );

assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-shipping-address-block/edit.tsx

@@ -53,7 +53,7 @@ export const Edit = ( {
 				showPhoneField={ showPhoneField }
 				requirePhoneField={ requirePhoneField }
 			/>
-			<AdditionalFields area={ innerBlockAreas.SHIPPING_ADDRESS } />
+			<AdditionalFields block={ innerBlockAreas.SHIPPING_ADDRESS } />
 		</FormStepBlock>
 	);
 };