diff --git a/assets/js/atomic/blocks/product-elements/rating/block.js b/assets/js/atomic/blocks/product-elements/rating/block.js
index a75339d200e..8ccf6854fd6 100644
--- a/assets/js/atomic/blocks/product-elements/rating/block.js
+++ b/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 '../../../../utils/style-attributes-utils';
 
 /**
  * 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;
@@ -59,7 +62,9 @@ const Block = ( { className } ) => {
 				role="img"
 				aria-label={ ratingText }
 			>
-				<span style={ starStyle }>{ ratingText }</span>
+				<span style={ { ...starStyle, ...colorProps.style } }>
+					{ ratingText }
+				</span>
 			</div>
 		</div>
 	);
diff --git a/assets/js/atomic/blocks/product-elements/rating/index.js b/assets/js/atomic/blocks/product-elements/rating/index.js
index 7765a34e0b3..0b7d2897303 100644
--- a/assets/js/atomic/blocks/product-elements/rating/index.js
+++ b/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', {
diff --git a/assets/js/atomic/blocks/product-elements/rating/save.tsx b/assets/js/atomic/blocks/product-elements/rating/save.tsx
new file mode 100644
index 00000000000..03a720e27df
--- /dev/null
+++ b/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 ),
+			} ) }
+		/>
+	);
+};
diff --git a/assets/js/atomic/blocks/product-elements/rating/style.scss b/assets/js/atomic/blocks/product-elements/rating/style.scss
index 816673c2716..da8c1e708ca 100644
--- a/assets/js/atomic/blocks/product-elements/rating/style.scss
+++ b/assets/js/atomic/blocks/product-elements/rating/style.scss
@@ -40,7 +40,7 @@
 			left: 0;
 			right: 0;
 			position: absolute;
-			color: #000;
+			color: inherit;
 			white-space: nowrap;
 		}
 	}
diff --git a/assets/js/atomic/blocks/product-elements/rating/support.js b/assets/js/atomic/blocks/product-elements/rating/support.js
new file mode 100644
index 00000000000..a1903198e08
--- /dev/null
+++ b/assets/js/atomic/blocks/product-elements/rating/support.js
@@ -0,0 +1,7 @@
+export const supports = {
+	color: {
+		text: true,
+		background: false,
+		link: false,
+	},
+};