Product Title block: add support global style

assets/js/atomic/blocks/product-elements/title/block.tsx

@@ -7,7 +7,6 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
-import { getColorClassName, getFontSizeClass } from '@wordpress/block-editor';
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 import ProductName from '@woocommerce/base-components/product-name';
@@ -18,6 +17,11 @@ import { useStoreEvents } from '@woocommerce/base-context/hooks';
  */
 import './style.scss';
 import { Attributes } from './types';
+import {
+	useSpacingProps,
+	useTypographyProps,
+	useColorProps,
+} from '../../../../utils/style-attributes-utils';
 
 type Props = Attributes & HTMLAttributes< HTMLDivElement >;
 
@@ -49,33 +53,21 @@ const TagName = ( {
  * will be used if this is not provided.
  * @return {*} The component.
  */
-export const Block = ( {
-	className,
-	headingLevel = 2,
-	showProductLink = true,
-	align,
-	textColor,
-	fontSize,
-	style,
-}: Props ): JSX.Element => {
+export const Block = ( props: Props ): JSX.Element => {
+	const {
+		className,
+		headingLevel = 2,
+		showProductLink = true,
+		align,
+	} = props;
+
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 	const { dispatchStoreEvent } = useStoreEvents();
 
-	const colorClass = getColorClassName( 'color', textColor );
-	const fontSizeClass = getFontSizeClass( fontSize );
-	const titleClasses = classnames( 'wp-block-woocommerce-product-title', {
-		'has-text-color': textColor || style?.color?.text || style?.color,
-		[ `has-font-size` ]:
-			fontSize || style?.typography?.fontSize || style?.fontSize,
-		[ colorClass ]: colorClass,
-		[ fontSizeClass ]: fontSizeClass,
-	} );
-
-	const titleStyle = {
-		fontSize: style?.fontSize || style?.typography?.fontSize,
-		color: style?.color?.text || style?.color,
-	};
+	const colorProps = useColorProps( props );
+	const spacingProps = useSpacingProps( props );
+	const typographyProps = useTypographyProps( props );
 
 	if ( ! product.id ) {
 		return (
@@ -88,7 +80,6 @@ export const Block = ( {
 						[ `${ parentClassName }__product-title` ]: parentClassName,
 						[ `wc-block-components-product-title--align-${ align }` ]:
 							align && isFeaturePluginBuild(),
-						[ titleClasses ]: isFeaturePluginBuild(),
 					}
 				) }
 			/>
@@ -109,9 +100,7 @@ export const Block = ( {
 			) }
 		>
 			<ProductName
-				className={ classnames( {
-					[ titleClasses ]: isFeaturePluginBuild(),
-				} ) }
+				className={ colorProps.className }
 				disabled={ ! showProductLink }
 				name={ product.name }
 				permalink={ product.permalink }
@@ -121,7 +110,15 @@ export const Block = ( {
 						product,
 					} );
 				} }
-				style={ isFeaturePluginBuild() ? titleStyle : {} }
+				style={
+					isFeaturePluginBuild()
+						? {
+								...spacingProps.style,
+								...typographyProps.style,
+								...colorProps.style,
+						  }
+						: {}
+				}
 			/>
 		</TagName>
 	);

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

@@ -15,6 +15,7 @@ import {
 	BLOCK_ICON as icon,
 	BLOCK_DESCRIPTION as description,
 } from './constants';
+import { Save } from './save';
 
 const blockConfig: BlockConfiguration = {
 	...sharedConfig,
@@ -24,17 +25,33 @@ const blockConfig: BlockConfiguration = {
 	icon: { src: icon },
 	attributes,
 	edit,
-	supports: isFeaturePluginBuild()
-		? {
-				html: false,
-				color: {
-					background: false,
-				},
-				typography: {
-					fontSize: true,
-				},
-		  }
-		: sharedConfig.supports,
+	save: Save,
+	supports: {
+		...( isFeaturePluginBuild() && {
+			typography: {
+				fontSize: true,
+				lineHeight: true,
+				__experimentalFontWeight: true,
+				__experimentalTextTransform: true,
+				__experimentalFontFamily: true,
+			},
+		} ),
+		...( isFeaturePluginBuild() && {
+			color: {
+				text: true,
+				background: true,
+				link: false,
+				gradients: true,
+				__experimentalSkipSerialization: true,
+			},
+		} ),
+		...( isFeaturePluginBuild() && {
+			spacing: {
+				margin: true,
+				__experimentalSkipSerialization: true,
+			},
+		} ),
+	},
 };
 
 registerBlockType( 'woocommerce/product-title', blockConfig );

assets/js/atomic/blocks/product-elements/title/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/title/style.scss

@@ -1,3 +1,7 @@
+.wp-block-woocommerce-product-title {
+	width: fit-content;
+}
+
 .wc-block-components-product-title {
 	margin-top: 0;
 	margin-bottom: $gap-small;
@@ -10,6 +14,11 @@
 	font-size: inherit;
 	display: block;
 }
+
+.wc-block-components-product-name {
+	color: inherit;
+}
+
 .is-loading {
 	.wc-block-components-product-title::before {
 		@include placeholder();

assets/js/utils/style-attributes-utils.ts

@@ -0,0 +1,123 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+/**
+ * External dependencies
+ */
+import { __experimentalUseColorProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { isFeaturePluginBuild } from '../settings/blocks/feature-flags';
+import { isString, isObject } from '../types/type-guards';
+
+type WithClass = {
+	className: string;
+};
+
+type WithStyle = {
+	style: Record< string, unknown >;
+};
+
+const parseStyle = ( style: unknown ): Record< string, unknown > => {
+	if ( isString( style ) ) {
+		return JSON.parse( style ) || {};
+	}
+
+	if ( isObject( style ) ) {
+		return style;
+	}
+
+	return {};
+};
+
+const getSpacingStyleInline = (
+	key: string,
+	values: {
+		top: string | null;
+		right: string | null;
+		bottom: string | null;
+		left: string | null;
+	}
+) => {
+	return {
+		...( isString( values.top ) && { [ `${ key }Top` ]: values.top } ),
+		...( isString( values.right ) && {
+			[ `${ key }Right` ]: values.right,
+		} ),
+		...( isString( values.bottom ) && {
+			[ `${ key }Bottom` ]: values.bottom,
+		} ),
+		...( isString( values.left ) && { [ `${ key }Left` ]: values.left } ),
+	};
+};
+
+const parseSpacingStyle = (
+	spacing: Record< string, unknown >
+): Record< string, unknown > => {
+	const keys = [ 'margin' ];
+
+	const getValueOrDefault = ( value: unknown ) => {
+		return isString( value ) && value.length > 0 ? value : null;
+	};
+
+	return Object.keys( spacing ).reduce( ( acc, key ) => {
+		const spacingProperty = isObject( spacing[ key ] )
+			? ( spacing[ key ] as Record< string, unknown > )
+			: {};
+
+		if ( keys.includes( key ) ) {
+			return {
+				...acc,
+				...getSpacingStyleInline( key, {
+					top: getValueOrDefault( spacingProperty.top ),
+					right: getValueOrDefault( spacingProperty.right ),
+					bottom: getValueOrDefault( spacingProperty.bottom ),
+					left: getValueOrDefault( spacingProperty.left ),
+				} ),
+			};
+		}
+
+		return acc;
+	}, {} );
+};
+
+export const useSpacingProps = ( attributes: unknown ): WithStyle => {
+	const style = isObject( attributes ) ? parseStyle( attributes.style ) : {};
+	const spacingStyles = isObject( style.spacing ) ? style.spacing : {};
+
+	return {
+		style: parseSpacingStyle( spacingStyles ),
+	};
+};
+
+export const useTypographyProps = ( attributes: unknown ): WithStyle => {
+	const attributesObject = isObject( attributes ) ? attributes : {};
+	const style = parseStyle( attributesObject.style );
+	const typography = isObject( style.typography )
+		? ( style.typography as Record< string, unknown > )
+		: {};
+
+	return {
+		style: {
+			fontSize: attributesObject.fontSize || typography.fontSize,
+			lineHeight: typography.lineHeight,
+			fontWeight: typography.fontWeight,
+			textTransform: typography.textTransform,
+			fontFamily: attributesObject.fontFamily,
+		},
+	};
+};
+
+export const useColorProps = ( attributes: unknown ): WithStyle & WithClass => {
+	if ( ! isFeaturePluginBuild() ) {
+		return {
+			className: '',
+			style: {},
+		};
+	}
+
+	const attributesObject = isObject( attributes ) ? attributes : {};
+	const style = parseStyle( attributesObject.style );
+
+	return __experimentalUseColorProps( { ...attributesObject, style } );
+};