Add global styles to Product Title block (https://github.com/woocommerce/woocommerce-blocks/pull/5009)

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

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

@@ -9,7 +9,6 @@ import {
 } from '@woocommerce/shared-context';
 import { getColorClassName, getFontSizeClass } from '@wordpress/block-editor';
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
-import { gatedStyledText } from '@woocommerce/atomic-utils';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 import ProductName from '@woocommerce/base-components/product-name';
 import { useStoreEvents } from '@woocommerce/base-context/hooks';
@@ -39,15 +38,14 @@ const TagName = ( {
 /**
  * Product Title Block Component.
  *
- * @param {Object}  props                  Incoming props.
- * @param {string}  [props.className]      CSS Class name for the component.
- * @param {number}  [props.headingLevel]   Heading level (h1, h2 etc)
- * @param {boolean} [props.showProductLink]    Whether or not to display a link to the product page.
- * @param {string}  [props.align]          Title alignment.
- * @param {string}  [props.color]          Title color name.
- * @param {string}  [props.customColor]    Custom title color value.
- * @param {string}  [props.fontSize]       Title font size name.
- * @param {number } [props.customFontSize] Custom font size value.
+ * @param {Object}  props                   Incoming props.
+ * @param {string}  [props.className]       CSS Class name for the component.
+ * @param {number}  [props.headingLevel]    Heading level (h1, h2 etc)
+ * @param {boolean} [props.showProductLink] Whether or not to display a link to the product page.
+ * @param {string}  [props.align]           Title alignment.
+ * @param {string}  [props.textColor]       Title color name.
+ * @param {string}  [props.fontSize]        Title font size name.
+ * @param {string}  [props.style]           Title inline style.
  * will be used if this is not provided.
  * @return {*} The component.
  */
@@ -56,25 +54,29 @@ export const Block = ( {
 	headingLevel = 2,
 	showProductLink = true,
 	align,
-	color,
-	customColor,
+	textColor,
 	fontSize,
-	customFontSize,
+	style,
 }: Props ): JSX.Element => {
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 	const { dispatchStoreEvent } = useStoreEvents();
 
-	const colorClass = getColorClassName( 'color', color );
+	const colorClass = getColorClassName( 'color', textColor );
 	const fontSizeClass = getFontSizeClass( fontSize );
-
-	const titleClasses = classnames( {
-		'has-text-color': color || customColor,
-		'has-font-size': fontSize || customFontSize,
+	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,
+	};
+
 	if ( ! product.id ) {
 		return (
 			<TagName
@@ -89,10 +91,6 @@ export const Block = ( {
 						[ titleClasses ]: isFeaturePluginBuild(),
 					}
 				) }
-				style={ gatedStyledText( {
-					color: customColor,
-					fontSize: customFontSize,
-				} ) }
 			/>
 		);
 	}
@@ -118,15 +116,12 @@ export const Block = ( {
 				name={ product.name }
 				permalink={ product.permalink }
 				rel={ showProductLink ? 'nofollow' : '' }
-				style={ gatedStyledText( {
-					color: customColor,
-					fontSize: customFontSize,
-				} ) }
 				onClick={ () => {
 					dispatchStoreEvent( 'product-view-link', {
 						product,
 					} );
 				} }
+				style={ isFeaturePluginBuild() ? titleStyle : {} }
 			/>
 		</TagName>
 	);

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/edit.tsx

@@ -2,21 +2,13 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	ColorPalette,
-	Disabled,
-	PanelBody,
-	ToggleControl,
-} from '@wordpress/components';
+import { Disabled, PanelBody, ToggleControl } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import {
 	InspectorControls,
 	BlockControls,
 	AlignmentToolbar,
-	withColors,
-	PanelColorSettings,
-	FontSizePicker,
-	withFontSizes,
+	useBlockProps,
 } from '@wordpress/block-editor';
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar';
@@ -30,27 +22,15 @@ import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 import { Attributes } from './types';
 
 interface Props {
-	color: ColorPalette.Color;
-	fontSize: {
-		size: number | undefined;
-	};
-	setFontSize: ( size: number ) => void;
-	setColor: ( color: ColorPalette.Color ) => void;
 	attributes: Attributes;
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 }
 
-const TitleEdit = ( {
-	color,
-	fontSize,
-	setFontSize,
-	setColor,
-	attributes,
-	setAttributes,
-}: Props ): JSX.Element => {
+const TitleEdit = ( { attributes, setAttributes }: Props ): JSX.Element => {
+	const blockProps = useBlockProps();
 	const { headingLevel, showProductLink, align } = attributes;
 	return (
-		<>
+		<div { ...blockProps }>
 			<BlockControls>
 				<HeadingToolbar
 					isCollapsed={ true }
@@ -91,49 +71,16 @@ const TitleEdit = ( {
 						}
 					/>
 				</PanelBody>
-				{ isFeaturePluginBuild() && (
-					<>
-						<PanelBody
-							title={ __(
-								'Text settings',
-								'woo-gutenberg-products-block'
-							) }
-						>
-							<FontSizePicker
-								value={ fontSize.size }
-								onChange={ setFontSize }
-							/>
-						</PanelBody>
-						<PanelColorSettings
-							title={ __(
-								'Color settings',
-								'woo-gutenberg-products-block'
-							) }
-							colorSettings={ [
-								{
-									value: color,
-									onChange: setColor,
-									label: __(
-										'Text color',
-										'woo-gutenberg-products-block'
-									),
-								},
-							] }
-						></PanelColorSettings>
-					</>
-				) }
 			</InspectorControls>
 			<Disabled>
 				<Block { ...attributes } />
 			</Disabled>
-		</>
+		</div>
 	);
 };
 
 const Title = isFeaturePluginBuild()
 	? compose( [
-			withFontSizes( 'fontSize' ),
-			withColors( 'color', { textColor: 'color' } ),
 			withProductSelector( {
 				icon: BLOCK_ICON,
 				label: BLOCK_TITLE,

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { registerBlockType, BlockConfiguration } from '@wordpress/blocks';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
@@ -17,6 +18,7 @@ import {
 
 const blockConfig: BlockConfiguration = {
 	...sharedConfig,
+	apiVersion: 2,
 	title,
 	description,
 	icon: {
@@ -25,6 +27,17 @@ const blockConfig: BlockConfiguration = {
 	},
 	attributes,
 	edit,
+	supports: isFeaturePluginBuild()
+		? {
+				html: false,
+				color: {
+					background: false,
+				},
+				typography: {
+					fontSize: true,
+				},
+		  }
+		: sharedConfig.supports,
 };
 
 registerBlockType( 'woocommerce/product-title', blockConfig );

plugins/woocommerce-blocks/assets/js/atomic/utils/block-styling.js

@@ -1,12 +0,0 @@
-/**
- * External dependencies
- */
-import { isFeaturePluginBuild } from '@woocommerce/block-settings';
-
-export const gatedStyledText = ( { color, fontSize } ) =>
-	isFeaturePluginBuild()
-		? {
-				color,
-				fontSize,
-		  }
-		: {};

plugins/woocommerce-blocks/assets/js/atomic/utils/index.js

@@ -1,5 +1,4 @@
 export * from './get-block-map';
 export * from './create-blocks-from-template';
 export * from './render-parent-block';
-export * from './block-styling';
 export * from './render-standalone-blocks';

plugins/woocommerce-blocks/assets/js/base/components/product-name/index.tsx

@@ -55,6 +55,7 @@ export default ( {
 			dangerouslySetInnerHTML={ {
 				__html: decodeEntities( name ),
 			} }
+			style={ style }
 		/>
 	);
 };

plugins/woocommerce-blocks/package-lock.json

@@ -6081,41 +6081,15 @@
 			}
 		},
 		"@types/wordpress__blocks": {
-			"version": "6.4.12",
-			"resolved": "https://registry.npmjs.org/@types/wordpress__blocks/-/wordpress__blocks-6.4.12.tgz",
-			"integrity": "sha512-ezQoo4NTfVY/KiCA8kwUXBJhgyoPq1HtfpRk6NXxQOwcDyFK0zN0knCvLn5YqVx1u8j3fSblbkW4RcFOK1xGIQ==",
+			"version": "9.1.1",
+			"resolved": "https://registry.npmjs.org/@types/wordpress__blocks/-/wordpress__blocks-9.1.1.tgz",
+			"integrity": "sha512-E4tMCascyIeTeBn3olJXRDESXQWsRsCVSnuaeIrznIR5wjJbUDSQBZF/GeFLjfIraHLGV2I5++r11GcPcXp0Ig==",
 			"dev": true,
 			"requires": {
 				"@types/react": "*",
 				"@types/wordpress__components": "*",
 				"@types/wordpress__data": "*",
-				"@wordpress/element": "^2.14.0"
-			},
-			"dependencies": {
-				"@wordpress/element": {
-					"version": "2.20.3",
-					"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.20.3.tgz",
-					"integrity": "sha512-f4ZPTDf9CxiiOXiMxc4v1K7jcBMT4dsiehVOpkKzCDKboNXp4qVf8oe5PE23VGZNEjcOj5Mkg9hB57R0nqvMTw==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.13.10",
-						"@types/react": "^16.9.0",
-						"@types/react-dom": "^16.9.0",
-						"@wordpress/escape-html": "^1.12.2",
-						"lodash": "^4.17.19",
-						"react": "^16.13.1",
-						"react-dom": "^16.13.1"
-					}
-				},
-				"@wordpress/escape-html": {
-					"version": "1.12.2",
-					"resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-1.12.2.tgz",
-					"integrity": "sha512-FabgSwznhdaUwe6hr1CsGpgxQbzqEoGevv73WIL1B9GvlZ6csRWodgHfWh4P6fYqpzxFL4WYB8wPJ1PdO32XFA==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.13.10"
-					}
-				}
+				"@wordpress/element": "^3.0.0"
 			}
 		},
 		"@types/wordpress__components": {