fix global style css generation

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

@@ -63,11 +63,13 @@ const Block = ( props ) => {
 		<div
 			className={ classnames(
 				className,
+				colorProps.className,
 				'wc-block-components-product-rating',
 				{
 					[ `${ parentClassName }__product-rating` ]: parentClassName,
 				}
 			) }
+			style={ colorProps.style }
 		>
 			<div
 				className={ classnames(
@@ -78,7 +80,7 @@ const Block = ( props ) => {
 				aria-label={ ratingText }
 			>
 				<span
-					style={ { ...starStyle, ...colorProps.style } }
+					style={ starStyle }
 					dangerouslySetInnerHTML={ ratingHTML }
 				/>
 			</div>

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 {

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',