Add single product block

assets/js/atomic/blocks/product-elements/add-to-cart-form/block.json

@@ -5,6 +5,7 @@
 	"description": "Display a button so the customer can add a product to their cart. Options will also be displayed depending on product type. e.g. quantity, variation.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
+	"usesContext": ["postId"],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2,
 	"$schema": "https://schemas.wp.org/trunk/block.json"

assets/js/atomic/blocks/product-elements/add-to-cart-form/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 import { Icon, button } from '@wordpress/icons';
 
 /**
@@ -11,26 +10,24 @@ import { Icon, button } from '@wordpress/icons';
 import metadata from './block.json';
 import edit from './edit';
 
-registerBlockSingleProductTemplate( {
-	registerBlockFn: () => {
-		// @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core.
-		registerBlockType( metadata, {
-			icon: {
-				src: (
-					<Icon
-						icon={ button }
-						className="wc-block-editor-components-block-icon"
-					/>
-				),
-			},
-			edit,
-			save() {
-				return null;
-			},
-		} );
+const blockSettings = {
+	edit,
+	icon: {
+		src: (
+			<Icon
+				icon={ button }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
 	},
-	unregisterBlockFn: () => {
-		unregisterBlockType( metadata.name );
+	ancestor: [ 'woocommerce/single-product' ],
+	save() {
+		return null;
 	},
+};
+
+registerBlockSingleProductTemplate( {
 	blockName: metadata.name,
+	blockMetadata: metadata,
+	blockSettings,
 } );

assets/js/atomic/blocks/product-elements/image/attributes.ts

@@ -28,6 +28,10 @@ export const blockAttributes: BlockAttributes = {
 		type: 'boolean',
 		default: false,
 	},
+	isDescendentOfSingleProductBlock: {
+		type: 'boolean',
+		default: false,
+	},
 };
 
 export default blockAttributes;

assets/js/atomic/blocks/product-elements/price/attributes.ts

@@ -20,6 +20,10 @@ export const blockAttributes: BlockAttributes = {
 		type: 'boolean',
 		default: false,
 	},
+	isDescendentOfSingleProductBlock: {
+		type: 'boolean',
+		default: false,
+	},
 };
 
 export default blockAttributes;

assets/js/atomic/blocks/product-elements/price/edit.tsx

@@ -27,6 +27,9 @@ interface BlockAttributes {
 
 interface Attributes {
 	textAlign: 'left' | 'center' | 'right';
+	isDescendentOfSingleProduct: boolean;
+	isDescendentOfSingleProductBlock: boolean;
+	productId: number;
 }
 
 interface Context {
@@ -80,7 +83,9 @@ const PriceEdit = ( {
 	);
 
 	const showProductSelector =
-		! isDescendentOfQueryLoop && ! isDescendentOfSingleProductTemplate;
+		! isDescendentOfQueryLoop &&
+		! isDescendentOfSingleProductTemplate &&
+		! attributes.isDescendentOfSingleProductBlock;
 
 	if ( ! showProductSelector ) {
 		return (

assets/js/atomic/blocks/product-elements/product-details/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -11,14 +10,11 @@ import metadata from './block.json';
 import edit from './edit';
 
 registerBlockSingleProductTemplate( {
-	registerBlockFn: () => {
-		// @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core.
-		registerBlockType( metadata, {
-			edit,
-		} );
-	},
-	unregisterBlockFn: () => {
-		unregisterBlockType( metadata.name );
-	},
 	blockName: metadata.name,
+	// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
+	blockMetadata: metadata,
+	blockSettings: {
+		edit,
+		ancestor: [ 'woocommerce/single-product' ],
+	},
 } );

assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx

@@ -6,6 +6,7 @@ import { isEmptyObject } from '@woocommerce/types';
 import { useBlockProps } from '@wordpress/block-editor';
 import { BlockAttributes } from '@wordpress/blocks';
 import { Disabled } from '@wordpress/components';
+import type { BlockEditProps } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -40,8 +41,7 @@ type Context = {
 	queryId: string;
 };
 
-interface Props {
-	attributes: BlockAttributes;
+interface Props extends BlockEditProps< BlockAttributes > {
 	context: Context;
 }
 
@@ -58,7 +58,7 @@ const Edit = ( { context }: Props ) => {
 		);
 	}
 	// We have work on this case when we will work on the Single Product block.
-	return '';
+	return <></>;
 };
 
 export default Edit;

assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { gallery as icon } from '@wordpress/icons';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
 
 /**
@@ -13,15 +12,13 @@ import metadata from './block.json';
 import './style.scss';
 
 registerBlockSingleProductTemplate( {
-	registerBlockFn: () => {
-		// @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core.
-		registerBlockType( metadata, {
-			icon,
-			edit,
-		} );
-	},
-	unregisterBlockFn: () => {
-		unregisterBlockType( metadata.name );
-	},
 	blockName: metadata.name,
+	// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
+	blockMetadata: metadata,
+	blockSettings: {
+		icon,
+		// @ts-expect-error `edit` can be extended to include other attributes
+		edit,
+		ancestor: [ 'woocommerce/single-product' ],
+	},
 } );

assets/js/atomic/blocks/product-elements/product-meta/index.tsx

@@ -2,27 +2,21 @@
  * External dependencies
  */
 import { box as icon } from '@wordpress/icons';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
 
 /**
  * Internal dependencies
  */
 import edit from './edit';
-import save from './save';
 import metadata from './block.json';
 
 registerBlockSingleProductTemplate( {
-	registerBlockFn: () => {
-		// @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core.
-		registerBlockType( metadata, {
-			icon,
-			edit,
-			save,
-		} );
-	},
-	unregisterBlockFn: () => {
-		unregisterBlockType( metadata.name );
-	},
 	blockName: metadata.name,
+	// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
+	blockMetadata: metadata,
+	blockSettings: {
+		edit,
+		icon,
+		ancestor: [ 'woocommerce/single-product' ],
+	},
 } );

assets/js/atomic/blocks/product-elements/product-reviews/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -11,14 +10,11 @@ import metadata from './block.json';
 import edit from './edit';
 
 registerBlockSingleProductTemplate( {
-	registerBlockFn: () => {
-		// @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core.
-		registerBlockType( metadata, {
-			edit,
-		} );
-	},
-	unregisterBlockFn: () => {
-		unregisterBlockType( metadata.name );
-	},
 	blockName: metadata.name,
+	// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
+	blockMetadata: metadata,
+	blockSettings: {
+		edit,
+		ancestor: [ 'woocommerce/single-product' ],
+	},
 } );

assets/js/atomic/blocks/product-elements/rating/attributes.ts

@@ -16,6 +16,10 @@ export const blockAttributes: BlockAttributes = {
 		type: 'string',
 		default: '',
 	},
+	isDescendentOfSingleProductBlock: {
+		type: 'boolean',
+		default: false,
+	},
 };
 
 export default blockAttributes;

assets/js/atomic/blocks/product-elements/related-products/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { box as icon } from '@wordpress/icons';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
 
 /**
@@ -13,16 +12,13 @@ import save from './save';
 import metadata from './block.json';
 
 registerBlockSingleProductTemplate( {
-	registerBlockFn: () => {
-		// @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core.
-		registerBlockType( metadata, {
-			icon,
-			edit,
-			save,
-		} );
-	},
-	unregisterBlockFn: () => {
-		unregisterBlockType( metadata.name );
-	},
 	blockName: metadata.name,
+	// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
+	blockMetadata: metadata,
+	blockSettings: {
+		icon,
+		edit,
+		save,
+		ancestor: [ 'woocommerce/single-product' ],
+	},
 } );

assets/js/atomic/blocks/product-elements/save.js

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 const save = ( { attributes } ) => {
 	if (
 		attributes.isDescendentOfQueryLoop ||
+		attributes.isDescendentOfSingleProductBlock ||
 		attributes.isDescendentOfSingleProductTemplate
 	) {
 		return null;