Product Rating block: Add Single Product template support to the block (

#9499)

* Add Single Product template support to Product Rating block

* Remove example attribute from block.json

Co-authored-by: Luigi Teschio <gigitux@gmail.com>

* Set isDescedentOfSingleProductTemplate attribute default to false

* Remove withProductSelector HOC

Since we are using the `ancestor` key then we don't need to use this HOC anymore

* Remove unused import on Product Rating Edit component

---------

Co-authored-by: Luigi Teschio <gigitux@gmail.com>

assets/js/atomic/blocks/product-elements/rating/block.json

@@ -0,0 +1,38 @@
+{
+	"name": "woocommerce/product-rating",
+	"version": "1.0.0",
+	"icon": "info",
+	"title": "Product Rating",
+	"description": "Display the average rating of a product.",
+	"attributes": {
+		"productId": {
+			"type": "number",
+			"default": 0
+		},
+		"isDescendentOfQueryLoop": {
+			"type": "boolean",
+			"default": false
+		},
+		"textAlign": {
+			"type": "string",
+			"default": ""
+		},
+		"isDescendentOfSingleProductBlock": {
+			"type": "boolean",
+			"default": false
+		},
+		"isDescendentOfSingleProductTemplate": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"usesContext": [ "query", "queryId", "postId" ],
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"supports": {
+		"align": true
+	},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import {
 	AlignmentToolbar,
 	BlockControls,
@@ -10,22 +9,20 @@ import {
 import type { BlockEditProps } from '@wordpress/blocks';
 import { useEffect } from '@wordpress/element';
 import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import Block from './block';
-import withProductSelector from '../shared/with-product-selector';
-import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 import { BlockAttributes } from './types';
 import './editor.scss';
 import { useIsDescendentOfSingleProductBlock } from '../shared/use-is-descendent-of-single-product-block';
 
-const Edit = ( {
-	attributes,
-	setAttributes,
-	context,
-}: BlockEditProps< BlockAttributes > & { context: Context } ): JSX.Element => {
+const Edit = (
+	props: BlockEditProps< BlockAttributes > & { context: Context }
+): JSX.Element => {
+	const { attributes, setAttributes, context } = props;
 	const blockProps = useBlockProps( {
 		className: 'wp-block-woocommerce-product-rating',
 	} );
@@ -39,14 +36,33 @@ const Edit = ( {
 		useIsDescendentOfSingleProductBlock( {
 			blockClientId: blockProps?.id,
 		} );
+	const { isDescendentOfSingleProductTemplate } = useSelect(
+		( select ) => {
+			const store = select( 'core/edit-site' );
+			const postId = store?.getEditedPostId< string | undefined >();
+
+			return {
+				isDescendentOfSingleProductTemplate: Boolean(
+					postId?.includes( '//single-product' ) &&
+						! isDescendentOfQueryLoop &&
+						! isDescendentOfSingleProductBlock
+				),
+			};
+		},
+		[ isDescendentOfQueryLoop, isDescendentOfSingleProductBlock ]
+	);
 
 	useEffect( () => {
-		setAttributes( { isDescendentOfQueryLoop } );
-		setAttributes( { isDescendentOfSingleProductBlock } );
+		setAttributes( {
+			isDescendentOfQueryLoop,
+			isDescendentOfSingleProductBlock,
+			isDescendentOfSingleProductTemplate,
+		} );
 	}, [
 		setAttributes,
 		isDescendentOfQueryLoop,
 		isDescendentOfSingleProductBlock,
+		isDescendentOfSingleProductTemplate,
 	] );
 
 	return (
@@ -65,11 +81,5 @@ const Edit = ( {
 		</>
 	);
 };
-export default withProductSelector( {
-	icon: BLOCK_ICON,
-	label: BLOCK_TITLE,
-	description: __(
-		'Choose a product to display its rating.',
-		'woo-gutenberg-products-block'
-	),
-} )( Edit );
+
+export default Edit;

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

@@ -1,38 +1,33 @@
 /**
  * External dependencies
  */
-import { registerBlockType } from '@wordpress/blocks';
 import type { BlockConfiguration } from '@wordpress/blocks';
+import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
 
 /**
  * Internal dependencies
  */
 import sharedConfig from '../shared/config';
-import attributes from './attributes';
 import edit from './edit';
-import {
-	BLOCK_TITLE as title,
-	BLOCK_ICON as icon,
-	BLOCK_DESCRIPTION as description,
-} from './constants';
+import { BLOCK_ICON as icon } from './constants';
+import metadata from './block.json';
 import { supports } from './support';
 
 const blockConfig: BlockConfiguration = {
 	...sharedConfig,
-	apiVersion: 2,
-	title,
-	description,
-	usesContext: [ 'query', 'queryId', 'postId' ],
 	ancestor: [
 		'woocommerce/all-products',
 		'woocommerce/single-product',
 		'core/post-template',
 		'woocommerce/product-template',
 	],
 	icon: { src: icon },
-	attributes,
 	supports,
 	edit,
 };
 
-registerBlockType( 'woocommerce/product-rating', { ...blockConfig } );
+registerBlockSingleProductTemplate( {
+	blockName: 'woocommerce/product-rating',
+	blockMetadata: metadata,
+	blockSettings: blockConfig,
+} );

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

@@ -2,5 +2,6 @@ export interface BlockAttributes {
 	productId: number;
 	isDescendentOfQueryLoop: boolean;
 	isDescendentOfSingleProductBlock: boolean;
+	isDescendentOfSingleProductTemplate: boolean;
 	textAlign: string;
 }