Experiment: Replace style hooks coming from @wordpress/block-editor

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

@@ -7,12 +7,7 @@ import {
 	useStoreEvents,
 	useStoreAddToCart,
 } from '@woocommerce/base-context/hooks';
-import {
-	useBorderProps,
-	useColorProps,
-	useTypographyProps,
-	useSpacingProps,
-} from '@woocommerce/base-hooks';
+import { useStyleProps } from '@woocommerce/base-hooks';
 import { decodeEntities } from '@wordpress/html-entities';
 import { CART_URL } from '@woocommerce/block-settings';
 import { getSetting } from '@woocommerce/settings';
@@ -35,22 +30,18 @@ import type {
 /**
  * Product Button Block Component.
  *
- * @param {Object} props                    Incoming props.
- * @param {Object} [props.product]          Product.
- * @param {Object} [props.colorStyles]      Object contains CSS class and CSS style for color.
- * @param {Object} [props.borderStyles]     Object contains CSS class and CSS style for border.
- * @param {Object} [props.typographyStyles] Object contains CSS class and CSS style for typography.
- * @param {Object} [props.spacingStyles]    Object contains CSS style for spacing.
- * @param {Object} [props.textAlign]        Text alignment.
+ * @param {Object} props             Incoming props.
+ * @param {Object} [props.product]   Product.
+ * @param {Object} [props.style]     Object contains CSS Styles.
+ * @param {string} [props.className] String contains CSS class.
+ * @param {Object} [props.textAlign] Text alignment.
  *
  * @return {*} The component.
  */
 const AddToCartButton = ( {
 	product,
-	colorStyles,
-	borderStyles,
-	typographyStyles,
-	spacingStyles,
+	className,
+	style,
 	textAlign,
 }: AddToCartButtonAttributes ): JSX.Element => {
 	const {
@@ -114,14 +105,15 @@ const AddToCartButton = ( {
 
 	return (
 		<ButtonTag
+			{ ...buttonProps }
 			aria-label={ buttonAriaLabel }
+			disabled={ addingToCart }
 			className={ classnames(
+				className,
 				'wp-block-button__link',
 				'wp-element-button',
 				'add_to_cart_button',
 				'wc-block-components-product-button__button',
-				colorStyles.className,
-				borderStyles.className,
 				{
 					loading: addingToCart,
 					added: addedToCart,
@@ -130,14 +122,7 @@ const AddToCartButton = ( {
 					[ `has-text-align-${ textAlign }` ]: textAlign,
 				}
 			) }
-			style={ {
-				...colorStyles.style,
-				...borderStyles.style,
-				...typographyStyles.style,
-				...spacingStyles.style,
-			} }
-			disabled={ addingToCart }
-			{ ...buttonProps }
+			style={ style }
 		>
 			{ buttonText }
 		</ButtonTag>
@@ -147,19 +132,15 @@ const AddToCartButton = ( {
 /**
  * Product Button Block Component.
  *
- * @param {Object} props                    Incoming props.
- * @param {Object} [props.colorStyles]      Object contains CSS class and CSS style for color.
- * @param {Object} [props.borderStyles]     Object contains CSS class and CSS style for border.
- * @param {Object} [props.typographyStyles] Object contains CSS class and CSS style for typography.
- * @param {Object} [props.spacingStyles]    Object contains CSS style for spacing.
+ * @param {Object} props             Incoming props.
+ * @param {Object} [props.style]     Object contains CSS Styles.
+ * @param {string} [props.className] String contains CSS class.
  *
  * @return {*} The component.
  */
 const AddToCartButtonPlaceholder = ( {
-	colorStyles,
-	borderStyles,
-	typographyStyles,
-	spacingStyles,
+	className,
+	style,
 }: AddToCartButtonPlaceholderAttributes ): JSX.Element => {
 	return (
 		<button
@@ -169,15 +150,9 @@ const AddToCartButtonPlaceholder = ( {
 				'add_to_cart_button',
 				'wc-block-components-product-button__button',
 				'wc-block-components-product-button__button--placeholder',
-				colorStyles.className,
-				borderStyles.className
+				className
 			) }
-			style={ {
-				...colorStyles.style,
-				...borderStyles.style,
-				...typographyStyles.style,
-				...spacingStyles.style,
-			} }
+			style={ style }
 			disabled={ true }
 		/>
 	);
@@ -193,12 +168,9 @@ const AddToCartButtonPlaceholder = ( {
  */
 export const Block = ( props: BlockAttributes ): JSX.Element => {
 	const { className, textAlign } = props;
+	const styleProps = useStyleProps( props );
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
-	const colorProps = useColorProps( props );
-	const borderProps = useBorderProps( props );
-	const typographyProps = useTypographyProps( props );
-	const spacingProps = useSpacingProps( props );
 
 	return (
 		<div
@@ -218,17 +190,13 @@ export const Block = ( props: BlockAttributes ): JSX.Element => {
 			{ product.id ? (
 				<AddToCartButton
 					product={ product }
-					colorStyles={ colorProps }
-					borderStyles={ borderProps }
-					typographyStyles={ typographyProps }
-					spacingStyles={ spacingProps }
+					style={ styleProps.style }
+					className={ styleProps.className }
 				/>
 			) : (
 				<AddToCartButtonPlaceholder
-					colorStyles={ colorProps }
-					borderStyles={ borderProps }
-					typographyStyles={ typographyProps }
-					spacingStyles={ spacingProps }
+					style={ styleProps.style }
+					className={ styleProps.className }
 				/>
 			) }
 		</div>

assets/js/atomic/blocks/product-elements/button/types.ts

@@ -15,10 +15,8 @@ export interface BlockAttributes {
 }
 
 export interface AddToCartButtonPlaceholderAttributes {
-	borderStyles: WithClass & WithStyle;
-	colorStyles: WithClass & WithStyle;
-	spacingStyles: WithStyle;
-	typographyStyles: WithStyle;
+	className: string;
+	style: Record< string, unknown >;
 }
 
 export interface AddToCartButtonAttributes

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

@@ -9,11 +9,7 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
-import {
-	useBorderProps,
-	useSpacingProps,
-	useTypographyProps,
-} from '@woocommerce/base-hooks';
+import { useStyleProps } from '@woocommerce/base-hooks';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 import { useStoreEvents } from '@woocommerce/base-context/hooks';
 import type { HTMLAttributes } from 'react';
@@ -87,12 +83,10 @@ export const Block = ( props: Props ): JSX.Element | null => {
 		saleBadgeAlign = 'right',
 		...restProps
 	} = props;
+	const styleProps = useStyleProps( props );
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product, isLoading } = useProductDataContext();
 	const { dispatchStoreEvent } = useStoreEvents();
-	const typographyProps = useTypographyProps( props );
-	const borderProps = useBorderProps( props );
-	const spacingProps = useSpacingProps( props );
 
 	if ( ! product.id ) {
 		return (
@@ -104,13 +98,9 @@ export const Block = ( props: Props ): JSX.Element | null => {
 						[ `${ parentClassName }__product-image` ]:
 							parentClassName,
 					},
-					borderProps.className
+					styleProps.className
 				) }
-				style={ {
-					...typographyProps.style,
-					...borderProps.style,
-					...spacingProps.style,
-				} }
+				style={ styleProps.style }
 			>
 				<ImagePlaceholder />
 			</div>
@@ -142,13 +132,9 @@ export const Block = ( props: Props ): JSX.Element | null => {
 				{
 					[ `${ parentClassName }__product-image` ]: parentClassName,
 				},
-				borderProps.className
+				styleProps.className
 			) }
-			style={ {
-				...typographyProps.style,
-				...borderProps.style,
-				...spacingProps.style,
-			} }
+			style={ styleProps.style }
 		>
 			<ParentComponent { ...( showProductLink && anchorProps ) }>
 				{ !! showSaleBadge && (

assets/js/atomic/blocks/product-elements/image/test/block.test.tsx

@@ -13,16 +13,10 @@ import { ImageSizing } from '../types';
 
 jest.mock( '@woocommerce/base-hooks', () => ( {
 	__esModule: true,
-	useBorderProps: jest.fn( () => ( {
+	useStyleProps: jest.fn( () => ( {
 		className: '',
 		style: {},
 	} ) ),
-	useTypographyProps: jest.fn( () => ( {
-		style: {},
-	} ) ),
-	useSpacingProps: jest.fn( () => ( {
-		style: {},
-	} ) ),
 } ) );
 
 const productWithoutImages: ProductResponseItem = {

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

@@ -8,11 +8,7 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
-import {
-	useColorProps,
-	useSpacingProps,
-	useTypographyProps,
-} from '@woocommerce/base-hooks';
+import { useStyleProps } from '@woocommerce/base-hooks';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 import { CurrencyCode } from '@woocommerce/type-defs/currency';
 import type { HTMLAttributes } from 'react';
@@ -41,23 +37,20 @@ interface PriceProps {
 
 export const Block = ( props: Props ): JSX.Element | null => {
 	const { className, textAlign, isDescendentOfSingleProductTemplate } = props;
+	const styleProps = useStyleProps( props );
 	const { parentName, parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 
 	const isDescendentOfAllProductsBlock =
 		parentName === 'woocommerce/all-products';
-	const colorProps = useColorProps( props );
-	const spacingProps = useSpacingProps( props );
-	const typographyProps = useTypographyProps( props );
 
 	const wrapperClassName = classnames(
 		'wc-block-components-product-price',
 		className,
-		colorProps.className,
+		styleProps.className,
 		{
 			[ `${ parentClassName }__product-price` ]: parentClassName,
-		},
-		typographyProps.className
+		}
 	);
 
 	if ( ! product.id && ! isDescendentOfSingleProductTemplate ) {
@@ -74,13 +67,6 @@ export const Block = ( props: Props ): JSX.Element | null => {
 		return productPriceComponent;
 	}
 
-	const style = {
-		...colorProps.style,
-		...typographyProps.style,
-	};
-	const spacingStyle = {
-		...spacingProps.style,
-	};
 	const prices: PriceProps = product.prices;
 	const currency = isDescendentOfSingleProductTemplate
 		? getCurrencyFromPriceResponse()
@@ -97,8 +83,9 @@ export const Block = ( props: Props ): JSX.Element | null => {
 		<ProductPrice
 			align={ textAlign }
 			className={ wrapperClassName }
-			regularPriceStyle={ style }
-			priceStyle={ style }
+			style={ styleProps.style }
+			regularPriceStyle={ styleProps.style }
+			priceStyle={ styleProps.style }
 			priceClassName={ priceClassName }
 			currency={ currency }
 			price={
@@ -119,7 +106,6 @@ export const Block = ( props: Props ): JSX.Element | null => {
 				[ `${ parentClassName }__product-price__regular` ]:
 					parentClassName,
 			} ) }
-			spacingStyle={ spacingStyle }
 		/>
 	);
 	if ( isDescendentOfAllProductsBlock ) {

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

@@ -7,11 +7,7 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
-import {
-	useColorProps,
-	useSpacingProps,
-	useTypographyProps,
-} from '@woocommerce/base-hooks';
+import { useStyleProps } from '@woocommerce/base-hooks';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 import { isNumber, ProductResponseItem } from '@woocommerce/types';
 
@@ -136,17 +132,15 @@ interface ProductRatingProps {
 
 export const Block = ( props: ProductRatingProps ): JSX.Element | null => {
 	const { textAlign, isDescendentOfSingleProductBlock } = props;
+	const styleProps = useStyleProps( props );
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 	const rating = getAverageRating( product );
-	const colorProps = useColorProps( props );
-	const typographyProps = useTypographyProps( props );
-	const spacingProps = useSpacingProps( props );
 	const reviews = getRatingCount( product );
 	const href = getReviewsHref( product );
 
 	const className = classnames(
-		colorProps.className,
+		styleProps.className,
 		'wc-block-components-product-rating',
 		{
 			[ `${ parentClassName }__product-rating` ]: parentClassName,
@@ -165,14 +159,7 @@ export const Block = ( props: ProductRatingProps ): JSX.Element | null => {
 	);
 
 	return (
-		<div
-			className={ className }
-			style={ {
-				...colorProps.style,
-				...typographyProps.style,
-				...spacingProps.style,
-			} }
-		>
+		<div className={ className } style={ styleProps.style }>
 			<div className="wc-block-components-product-rating__container">
 				{ content }
 				{ reviews && isDescendentOfSingleProductBlock ? (