Product Ratings: Add Global Styles font size and spacing support (https://github.com/woocommerce/woocommerce-blocks/pull/5927)

* Product Ratings: Add font size and spacing support

* Fix useTypographyProps hook

* Set SkipSerialization for Ratings block props

* Add additional hasSpacingStyleSupport check for the spacing

Co-authored-by: Luigi <gigitux@gmail.com>
Co-authored-by: Tomasz Tunik <tomasztunik@gmail.com>

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

@@ -14,7 +14,11 @@ import { withProductDataContext } from '@woocommerce/shared-hocs';
  * Internal dependencies
  */
 import './style.scss';
-import { useColorProps } from '../../../../hooks/style-attributes';
+import {
+	useColorProps,
+	useSpacingProps,
+	useTypographyProps,
+} from '../../../../hooks/style-attributes';
 
 /**
  * Product Rating Block Component.
@@ -24,11 +28,12 @@ import { useColorProps } from '../../../../hooks/style-attributes';
  * @return {*} The component.
  */
 const Block = ( props ) => {
-	const { className } = props;
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 	const rating = getAverageRating( product );
 	const colorProps = useColorProps( props );
+	const typographyProps = useTypographyProps( props );
+	const spacingProps = useSpacingProps( props );
 
 	if ( ! rating ) {
 		return null;
@@ -62,14 +67,17 @@ const Block = ( props ) => {
 	return (
 		<div
 			className={ classnames(
-				className,
 				colorProps.className,
 				'wc-block-components-product-rating',
 				{
 					[ `${ parentClassName }__product-rating` ]: parentClassName,
 				}
 			) }
-			style={ colorProps.style }
+			style={ {
+				...colorProps.style,
+				...typographyProps.style,
+				...spacingProps.style,
+			} }
 		>
 			<div
 				className={ classnames(

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

@@ -18,6 +18,7 @@ import { supports } from './support';
 import { Save } from './save';
 
 const blockConfig = {
+	apiVersion: 2,
 	title,
 	description,
 	icon: { src: icon },

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

@@ -3,12 +3,29 @@
  */
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 
+/**
+ * Internal dependencies
+ */
+import { hasSpacingStyleSupport } from '../../../../utils/global-style';
+
 export const supports = {
 	...( isFeaturePluginBuild() && {
 		color: {
 			text: true,
 			background: false,
 			link: false,
+			__experimentalSkipSerialization: true,
 		},
+		typography: {
+			fontSize: true,
+			__experimentalSkipSerialization: true,
+		},
+		...( hasSpacingStyleSupport() && {
+			spacing: {
+				margin: true,
+				__experimentalSkipSerialization: true,
+			},
+		} ),
+		__experimentalSelector: '.wc-block-components-product-rating',
 	} ),
 };

plugins/woocommerce-blocks/src/BlockTypes/ProductRating.php

@@ -30,9 +30,20 @@ class ProductRating extends AbstractBlock {
 		return array(
 			'color'                  =>
 			array(
-				'text'       => true,
-				'background' => false,
-				'link'       => false,
+				'text'                            => true,
+				'background'                      => false,
+				'link'                            => false,
+				'__experimentalSkipSerialization' => true,
+			),
+			'typography'             =>
+			array(
+				'fontSize'                        => true,
+				'__experimentalSkipSerialization' => true,
+			),
+			'spacing'                =>
+			array(
+				'margin'                          => true,
+				'__experimentalSkipSerialization' => true,
 			),
 			'__experimentalSelector' => '.wc-block-components-product-rating',
 		);