Rating Product block: Add support for global style

assets/css/style.scss

@@ -143,7 +143,6 @@
 			left: 0;
 			right: 0;
 			position: absolute;
-			color: #000;
 			white-space: nowrap;
 		}
 	}

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

@@ -14,6 +14,7 @@ import { withProductDataContext } from '@woocommerce/shared-hocs';
  * Internal dependencies
  */
 import './style.scss';
+import { useColorProps } from '../../../../hooks/style-attributes';
 
 /**
  * Product Rating Block Component.
@@ -22,10 +23,12 @@ import './style.scss';
  * @param {string} [props.className] CSS Class name for the component.
  * @return {*} The component.
  */
-const Block = ( { className } ) => {
+const Block = ( props ) => {
+	const { className } = props;
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 	const rating = getAverageRating( product );
+	const colorProps = useColorProps( props );
 
 	if ( ! rating ) {
 		return null;
@@ -60,11 +63,13 @@ const Block = ( { className } ) => {
 		<div
 			className={ classnames(
 				className,
+				colorProps.className,
 				'wc-block-components-product-rating',
 				{
 					[ `${ parentClassName }__product-rating` ]: parentClassName,
 				}
 			) }
+			style={ colorProps.style }
 		>
 			<div
 				className={ classnames(

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -11,7 +12,15 @@ import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 
 const Edit = ( { attributes } ) => {
-	return <Block { ...attributes } />;
+	const blockProps = useBlockProps( {
+		className: 'wp-block-woocommerce-product-rating',
+	} );
+
+	return (
+		<div { ...blockProps }>
+			<Block { ...attributes } />
+		</div>
+	);
 };
 export default withProductSelector( {
 	icon: BLOCK_ICON,

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

@@ -14,13 +14,17 @@ import {
 	BLOCK_ICON as icon,
 	BLOCK_DESCRIPTION as description,
 } from './constants';
+import { supports } from './support';
+import { Save } from './save';
 
 const blockConfig = {
 	title,
 	description,
 	icon: { src: icon },
 	attributes,
+	supports,
 	edit,
+	save: Save,
 };
 
 registerBlockType( 'woocommerce/product-rating', {

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

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+
+type Props = {
+	attributes: Record< string, unknown > & {
+		className?: string;
+	};
+};
+
+export const Save = ( { attributes }: Props ): JSX.Element => {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: classnames( 'is-loading', attributes.className ),
+			} ) }
+		/>
+	);
+};

assets/js/atomic/blocks/product-elements/rating/style.scss

@@ -23,7 +23,7 @@
 			right: 0;
 			position: absolute;
 			opacity: 0.5;
-			color: #aaa;
+			color: inherit;
 			white-space: nowrap;
 		}
 		span {
@@ -32,6 +32,7 @@
 			left: 0;
 			right: 0;
 			position: absolute;
+			color: inherit;
 			padding-top: 1.5em;
 		}
 		span::before {
@@ -40,7 +41,7 @@
 			left: 0;
 			right: 0;
 			position: absolute;
-			color: #000;
+			color: inherit;
 			white-space: nowrap;
 		}
 	}

assets/js/atomic/blocks/product-elements/rating/support.js

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+export const supports = {
+	...( isFeaturePluginBuild() && {
+		color: {
+			text: true,
+			background: false,
+			link: false,
+		},
+	} ),
+};

src/BlockTypes/ProductRating.php

@@ -0,0 +1,56 @@
+<?php
+namespace Automattic\WooCommerce\Blocks\BlockTypes;
+
+/**
+ * ProductRating class.
+ */
+class ProductRating extends AbstractBlock {
+
+	/**
+	 * Block name.
+	 *
+	 * @var string
+	 */
+	protected $block_name = 'product-rating';
+
+	/**
+	 * API version name.
+	 *
+	 * @var string
+	 */
+	protected $api_version = '2';
+
+	/**
+	 * Get the editor script handle for this block type.
+	 *
+	 * @param string $key Data to get, or default to everything.
+	 * @return array|string;
+	 */
+	protected function get_block_type_editor_script( $key = null ) {
+		$script = [
+			'handle'       => 'wc-' . $this->block_name . '-block',
+			'path'         => $this->asset_api->get_block_asset_build_path( 'atomic-block-components/rating' ),
+			'dependencies' => [ 'wc-blocks' ],
+		];
+		return $key ? $script[ $key ] : $script;
+	}
+
+	/**
+	 * Get block supports. Shared with the frontend.
+	 * IMPORTANT: If you change anything here, make sure to update the JS file too.
+	 *
+	 * @return array
+	 */
+	protected function get_block_type_supports() {
+		return array(
+			'color'                  =>
+			array(
+				'text'       => true,
+				'background' => false,
+				'link'       => false,
+			),
+			'__experimentalSelector' => '.wc-block-components-product-rating',
+		);
+	}
+
+}

src/BlockTypesController.php

@@ -178,6 +178,7 @@ protected function get_block_types() {
 			'ProductTitle',
 			'ProductSummary',
 			'ProductStockIndicator',
+			'ProductRating',
 		];
 
 		if ( Package::feature()->is_feature_plugin_build() ) {
@@ -222,7 +223,6 @@ protected function get_atomic_blocks() {
 			'product-button',
 			'product-image',
 			'product-price',
-			'product-rating',
 			'product-sale-badge',
 			'product-sku',
 			'product-category-list',