From a992c64917f26113d9858b082ca847912cd1ffe4 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 12 May 2023 13:42:16 +0100
Subject: [PATCH] Experiment: Replace style hooks coming from
 `@wordpress/block-editor` (#9251)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Replace all style hooks with useStyleProps hook

* Remove border/color/spacing hooks

* Style Props Hook

* Make use of `change-case` package

* Tidy up block wrappers

* Attribute filter does not use frontend.ts nor styles within block

* Remove frontend from filter blocks and unused styleprops usage

* Tidy up variable names so its clearer attributes are not required specifically from blocks

* Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx

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

* Update assets/js/blocks/attribute-filter/block-wrapper.tsx

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

* Update assets/js/blocks/active-filters/block-wrapper.tsx

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

* Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx

Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>

* Update assets/js/blocks/rating-filter/block-wrapper.tsx

Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>

* Update assets/js/blocks/stock-filter/block-wrapper.tsx

Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>

* Update assets/js/blocks/price-filter/block-wrapper.tsx

Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>

* Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx

Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>

* Simplify styleprop

* Styleprops simplify

* Fix withFeaturedItem styles

* Like the original hook, flatten props and combine with parsed styles

---------

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
---
 .../blocks/product-elements/button/block.tsx  |  80 +++------
 .../blocks/product-elements/button/types.ts   |   6 +-
 .../blocks/product-elements/image/block.tsx   |  26 +--
 .../image/test/block.test.tsx                 |   8 +-
 .../blocks/product-elements/price/block.tsx   |  28 +--
 .../blocks/product-elements/rating/block.tsx  |  21 +--
 .../product-elements/sale-badge/block.tsx     |  23 +--
 .../blocks/product-elements/sku/block.tsx     |  21 +--
 .../stock-indicator/block.tsx                 |  19 +-
 .../blocks/product-elements/summary/block.tsx |  12 +-
 .../blocks/product-elements/title/block.tsx   |  36 +---
 .../base/components/product-price/index.tsx   |   6 +-
 assets/js/base/hooks/index.js                 |   4 +-
 assets/js/base/hooks/use-border-props.ts      |  26 ---
 assets/js/base/hooks/use-color-props.ts       |  24 ---
 assets/js/base/hooks/use-spacing-props.ts     |  29 ----
 assets/js/base/hooks/use-style-props.ts       |  74 ++++++++
 assets/js/base/hooks/use-typography-props.ts  |  24 +--
 assets/js/base/utils/get-inline-styles.ts     | 163 ++++++++++++++++++
 assets/js/base/utils/index.js                 |   1 +
 .../blocks/active-filters/block-wrapper.tsx   |  15 +-
 .../blocks/attribute-filter/block-wrapper.tsx |  15 +-
 assets/js/blocks/attribute-filter/block.tsx   |  11 +-
 assets/js/blocks/attribute-filter/frontend.ts |  23 ---
 .../featured-items/with-featured-item.tsx     |  25 +--
 .../mini-cart-cart-button-block/block.tsx     |   8 +-
 .../mini-cart-cart-button-block/edit.tsx      |   1 +
 .../mini-cart-checkout-button-block/block.tsx |   8 +-
 .../block.tsx                                 |  22 +--
 .../mini-cart-title-label-block/block.tsx     |  24 +--
 .../js/blocks/price-filter/block-wrapper.tsx  |  15 +-
 assets/js/blocks/price-filter/frontend.ts     |  23 ---
 .../js/blocks/rating-filter/block-wrapper.tsx |  15 +-
 assets/js/blocks/rating-filter/block.tsx      |  11 +-
 .../js/blocks/stock-filter/block-wrapper.tsx  |  15 +-
 assets/js/blocks/stock-filter/block.tsx       |  11 +-
 assets/js/blocks/stock-filter/frontend.ts     |  23 ---
 package-lock.json                             |  49 +++++-
 package.json                                  |   1 +
 src/BlockTypes/AttributeFilter.php            |   9 +
 src/BlockTypes/RatingFilter.php               |   8 +
 src/BlockTypes/StockFilter.php                |   9 +
 42 files changed, 471 insertions(+), 501 deletions(-)
 delete mode 100644 assets/js/base/hooks/use-border-props.ts
 delete mode 100644 assets/js/base/hooks/use-color-props.ts
 delete mode 100644 assets/js/base/hooks/use-spacing-props.ts
 create mode 100644 assets/js/base/hooks/use-style-props.ts
 create mode 100644 assets/js/base/utils/get-inline-styles.ts
 delete mode 100644 assets/js/blocks/attribute-filter/frontend.ts
 delete mode 100644 assets/js/blocks/price-filter/frontend.ts
 delete mode 100644 assets/js/blocks/stock-filter/frontend.ts

diff --git a/assets/js/atomic/blocks/product-elements/button/block.tsx b/assets/js/atomic/blocks/product-elements/button/block.tsx
index ddab78646fe..c3ed224b08f 100644
--- a/assets/js/atomic/blocks/product-elements/button/block.tsx
+++ b/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>
diff --git a/assets/js/atomic/blocks/product-elements/button/types.ts b/assets/js/atomic/blocks/product-elements/button/types.ts
index 523abfbcfdf..768bf559986 100644
--- a/assets/js/atomic/blocks/product-elements/button/types.ts
+++ b/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
diff --git a/assets/js/atomic/blocks/product-elements/image/block.tsx b/assets/js/atomic/blocks/product-elements/image/block.tsx
index 99f09c682d9..280d5462f86 100644
--- a/assets/js/atomic/blocks/product-elements/image/block.tsx
+++ b/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 && (
diff --git a/assets/js/atomic/blocks/product-elements/image/test/block.test.tsx b/assets/js/atomic/blocks/product-elements/image/test/block.test.tsx
index d7f6498b73d..7f47f6e8e27 100644
--- a/assets/js/atomic/blocks/product-elements/image/test/block.test.tsx
+++ b/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 = {
diff --git a/assets/js/atomic/blocks/product-elements/price/block.tsx b/assets/js/atomic/blocks/product-elements/price/block.tsx
index 8d89d032976..8561b00c3d6 100644
--- a/assets/js/atomic/blocks/product-elements/price/block.tsx
+++ b/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 ) {
diff --git a/assets/js/atomic/blocks/product-elements/rating/block.tsx b/assets/js/atomic/blocks/product-elements/rating/block.tsx
index db4db52604a..8de5e5ebbc2 100644
--- a/assets/js/atomic/blocks/product-elements/rating/block.tsx
+++ b/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 ? (
diff --git a/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx b/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx
index 815048af958..6fbc4107f44 100644
--- a/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx
+++ b/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx
@@ -8,12 +8,7 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
-import {
-	useBorderProps,
-	useColorProps,
-	useSpacingProps,
-	useTypographyProps,
-} from '@woocommerce/base-hooks';
+import { useStyleProps } from '@woocommerce/base-hooks';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 import type { HTMLAttributes } from 'react';
 
@@ -27,12 +22,9 @@ type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >;
 
 export const Block = ( props: Props ): JSX.Element | null => {
 	const { className, align } = props;
+	const styleProps = useStyleProps( props );
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
-	const borderProps = useBorderProps( props );
-	const colorProps = useColorProps( props );
-	const typographyProps = useTypographyProps( props );
-	const spacingProps = useSpacingProps( props );
 
 	if ( ! product.id || ! product.on_sale ) {
 		return null;
@@ -52,16 +44,9 @@ export const Block = ( props: Props ): JSX.Element | null => {
 				{
 					[ `${ parentClassName }__product-onsale` ]: parentClassName,
 				},
-				colorProps.className,
-				borderProps.className,
-				typographyProps.className
+				styleProps.className
 			) }
-			style={ {
-				...colorProps.style,
-				...borderProps.style,
-				...typographyProps.style,
-				...spacingProps.style,
-			} }
+			style={ styleProps.style }
 		>
 			<Label
 				label={ __( 'Sale', 'woo-gutenberg-products-block' ) }
diff --git a/assets/js/atomic/blocks/product-elements/sku/block.tsx b/assets/js/atomic/blocks/product-elements/sku/block.tsx
index 6386d201c79..26851ab0905 100644
--- a/assets/js/atomic/blocks/product-elements/sku/block.tsx
+++ b/assets/js/atomic/blocks/product-elements/sku/block.tsx
@@ -9,11 +9,7 @@ import {
 } from '@woocommerce/shared-context';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 import type { HTMLAttributes } from 'react';
-import {
-	useColorProps,
-	useSpacingProps,
-	useTypographyProps,
-} from '@woocommerce/base-hooks';
+import { useStyleProps } from '@woocommerce/base-hooks';
 
 /**
  * Internal dependencies
@@ -47,14 +43,11 @@ const Preview = ( {
 
 const Block = ( props: Props ): JSX.Element | null => {
 	const { className } = props;
+	const styleProps = useStyleProps( props );
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 	const sku = product.sku;
 
-	const colorProps = useColorProps( props );
-	const typographyProps = useTypographyProps( props );
-	const spacingProps = useSpacingProps( props );
-
 	if ( props.isDescendentOfSingleProductTemplate ) {
 		return (
 			<Preview
@@ -78,16 +71,10 @@ const Block = ( props: Props ): JSX.Element | null => {
 				className: classnames(
 					className,
 					'wc-block-components-product-sku wp-block-woocommerce-product-sku',
-					{
-						[ colorProps.className ]: colorProps.className,
-						[ typographyProps.className ]:
-							typographyProps.className,
-					}
+					styleProps.className
 				),
 				style: {
-					...colorProps.style,
-					...typographyProps.style,
-					...spacingProps.style,
+					...styleProps.style,
 				},
 			} ) }
 		/>
diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/block.tsx b/assets/js/atomic/blocks/product-elements/stock-indicator/block.tsx
index 544b020f9db..1323cfa2401 100644
--- a/assets/js/atomic/blocks/product-elements/stock-indicator/block.tsx
+++ b/assets/js/atomic/blocks/product-elements/stock-indicator/block.tsx
@@ -7,11 +7,7 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
-import {
-	useColorProps,
-	useTypographyProps,
-	useSpacingProps,
-} from '@woocommerce/base-hooks';
+import { useStyleProps } from '@woocommerce/base-hooks';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 import type { HTMLAttributes } from 'react';
 
@@ -64,11 +60,9 @@ type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >;
 
 export const Block = ( props: Props ): JSX.Element | null => {
 	const { className } = props;
+	const styleProps = useStyleProps( props );
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
-	const colorProps = useColorProps( props );
-	const typographyProps = useTypographyProps( props );
-	const spacingProps = useSpacingProps( props );
 
 	if ( ! product.id ) {
 		return null;
@@ -92,19 +86,14 @@ export const Block = ( props: Props ): JSX.Element | null => {
 					!! isBackordered,
 				// When inside All products block
 				...( props.isDescendantOfAllProducts && {
-					[ colorProps.className ]: colorProps.className,
-					[ typographyProps.className ]: typographyProps.className,
+					[ styleProps.className ]: styleProps.className,
 					'wc-block-components-product-stock-indicator wp-block-woocommerce-product-stock-indicator':
 						true,
 				} ),
 			} ) }
 			// When inside All products block
 			{ ...( props.isDescendantOfAllProducts && {
-				style: {
-					...colorProps.style,
-					...typographyProps.style,
-					...spacingProps.style,
-				},
+				style: styleProps.style,
 			} ) }
 		>
 			{ getTextBasedOnStock( {
diff --git a/assets/js/atomic/blocks/product-elements/summary/block.tsx b/assets/js/atomic/blocks/product-elements/summary/block.tsx
index a80fb9c47cd..1c467b962b4 100644
--- a/assets/js/atomic/blocks/product-elements/summary/block.tsx
+++ b/assets/js/atomic/blocks/product-elements/summary/block.tsx
@@ -9,7 +9,7 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
-import { useColorProps, useTypographyProps } from '@woocommerce/base-hooks';
+import { useStyleProps } from '@woocommerce/base-hooks';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 import type { HTMLAttributes } from 'react';
 
@@ -25,8 +25,7 @@ const Block = ( props: Props ): JSX.Element | null => {
 	const { className } = props;
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
-	const colorProps = useColorProps( props );
-	const typographyProps = useTypographyProps( props );
+	const styleProps = useStyleProps( props );
 
 	if ( ! product ) {
 		return (
@@ -55,7 +54,7 @@ const Block = ( props: Props ): JSX.Element | null => {
 		<Summary
 			className={ classnames(
 				className,
-				colorProps.className,
+				styleProps.className,
 				`wc-block-components-product-summary`,
 				{
 					[ `${ parentClassName }__product-summary` ]:
@@ -65,10 +64,7 @@ const Block = ( props: Props ): JSX.Element | null => {
 			source={ source }
 			maxLength={ 150 }
 			countType={ blocksConfig.wordCountType || 'words' }
-			style={ {
-				...colorProps.style,
-				...typographyProps.style,
-			} }
+			style={ styleProps.style }
 		/>
 	);
 };
diff --git a/assets/js/atomic/blocks/product-elements/title/block.tsx b/assets/js/atomic/blocks/product-elements/title/block.tsx
index 5c89fe30920..2c95c151c31 100644
--- a/assets/js/atomic/blocks/product-elements/title/block.tsx
+++ b/assets/js/atomic/blocks/product-elements/title/block.tsx
@@ -10,11 +10,7 @@ import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 import ProductName from '@woocommerce/base-components/product-name';
 import { useStoreEvents } from '@woocommerce/base-context/hooks';
-import {
-	useSpacingProps,
-	useTypographyProps,
-	useColorProps,
-} from '@woocommerce/base-hooks';
+import { useStyleProps } from '@woocommerce/base-hooks';
 import type { HTMLAttributes } from 'react';
 
 /**
@@ -60,22 +56,18 @@ export const Block = ( props: Props ): JSX.Element => {
 		linkTarget,
 		align,
 	} = props;
-
+	const styleProps = useStyleProps( props );
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 	const { dispatchStoreEvent } = useStoreEvents();
 
-	const colorProps = useColorProps( props );
-	const spacingProps = useSpacingProps( props );
-	const typographyProps = useTypographyProps( props );
-
 	if ( ! product.id ) {
 		return (
 			<TagName
 				headingLevel={ headingLevel }
 				className={ classnames(
 					className,
-					colorProps.className,
+					styleProps.className,
 					'wc-block-components-product-title',
 					{
 						[ `${ parentClassName }__product-title` ]:
@@ -84,15 +76,7 @@ export const Block = ( props: Props ): JSX.Element => {
 							align && isFeaturePluginBuild(),
 					}
 				) }
-				style={
-					isFeaturePluginBuild()
-						? {
-								...spacingProps.style,
-								...typographyProps.style,
-								...colorProps.style,
-						  }
-						: {}
-				}
+				style={ isFeaturePluginBuild() ? styleProps.style : {} }
 			/>
 		);
 	}
@@ -102,7 +86,7 @@ export const Block = ( props: Props ): JSX.Element => {
 			headingLevel={ headingLevel }
 			className={ classnames(
 				className,
-				colorProps.className,
+				styleProps.className,
 				'wc-block-components-product-title',
 				{
 					[ `${ parentClassName }__product-title` ]: parentClassName,
@@ -110,15 +94,7 @@ export const Block = ( props: Props ): JSX.Element => {
 						align && isFeaturePluginBuild(),
 				}
 			) }
-			style={
-				isFeaturePluginBuild()
-					? {
-							...spacingProps.style,
-							...typographyProps.style,
-							...colorProps.style,
-					  }
-					: {}
-			}
+			style={ isFeaturePluginBuild() ? styleProps.style : {} }
 		>
 			<ProductName
 				disabled={ ! showProductLink }
diff --git a/assets/js/base/components/product-price/index.tsx b/assets/js/base/components/product-price/index.tsx
index 97d48ef3b43..10fa139b3b7 100644
--- a/assets/js/base/components/product-price/index.tsx
+++ b/assets/js/base/components/product-price/index.tsx
@@ -242,7 +242,7 @@ export interface ProductPriceProps {
 	/**
 	 * Custom margin to apply to the price wrapper.
 	 */
-	spacingStyle?:
+	style?:
 		| Pick<
 				React.CSSProperties,
 				'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft'
@@ -263,7 +263,7 @@ const ProductPrice = ( {
 	regularPrice,
 	regularPriceClassName,
 	regularPriceStyle,
-	spacingStyle,
+	style,
 }: ProductPriceProps ): JSX.Element => {
 	const wrapperClassName = classNames(
 		className,
@@ -327,7 +327,7 @@ const ProductPrice = ( {
 	}
 
 	return (
-		<span className={ wrapperClassName } style={ spacingStyle }>
+		<span className={ wrapperClassName } style={ style }>
 			{ createInterpolateElement( format, {
 				price: priceComponent,
 			} ) }
diff --git a/assets/js/base/hooks/index.js b/assets/js/base/hooks/index.js
index 96e2f8d97b0..89e29647847 100644
--- a/assets/js/base/hooks/index.js
+++ b/assets/js/base/hooks/index.js
@@ -4,9 +4,7 @@ export * from './use-position-relative-to-viewport';
 export * from './use-previous';
 export * from './use-shallow-equal';
 export * from './use-throw-error';
-export * from './use-spacing-props';
 export * from './use-typography-props';
-export * from './use-color-props';
-export * from './use-border-props';
 export * from './use-is-mounted';
 export * from './use-spoken-message';
+export * from './use-style-props';
diff --git a/assets/js/base/hooks/use-border-props.ts b/assets/js/base/hooks/use-border-props.ts
deleted file mode 100644
index 6e3a03c8064..00000000000
--- a/assets/js/base/hooks/use-border-props.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/* eslint-disable @wordpress/no-unsafe-wp-apis */
-/**
- * External dependencies
- */
-import { __experimentalUseBorderProps } from '@wordpress/block-editor';
-import { isObject } from '@woocommerce/types';
-import { parseStyle } from '@woocommerce/base-utils';
-
-type WithClass = {
-	className: string;
-};
-
-type WithStyle = {
-	style: Record< string, unknown >;
-};
-
-// @todo The @wordpress/block-editor dependency should never be used on the frontend of the store due to excessive side and its dependency on @wordpress/components
-// @see https://github.com/woocommerce/woocommerce-blocks/issues/8071
-export const useBorderProps = (
-	attributes: unknown
-): WithStyle & WithClass => {
-	const attributesObject = isObject( attributes ) ? attributes : {};
-	const style = parseStyle( attributesObject.style );
-
-	return __experimentalUseBorderProps( { ...attributesObject, style } );
-};
diff --git a/assets/js/base/hooks/use-color-props.ts b/assets/js/base/hooks/use-color-props.ts
deleted file mode 100644
index ee25994b3c4..00000000000
--- a/assets/js/base/hooks/use-color-props.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable @wordpress/no-unsafe-wp-apis */
-/**
- * External dependencies
- */
-import { __experimentalUseColorProps } from '@wordpress/block-editor';
-import { isObject } from '@woocommerce/types';
-import { parseStyle } from '@woocommerce/base-utils';
-
-type WithClass = {
-	className: string;
-};
-
-type WithStyle = {
-	style: Record< string, unknown >;
-};
-
-// @todo The @wordpress/block-editor dependency should never be used on the frontend of the store due to excessive side and its dependency on @wordpress/components
-// @see https://github.com/woocommerce/woocommerce-blocks/issues/8071
-export const useColorProps = ( attributes: unknown ): WithStyle & WithClass => {
-	const attributesObject = isObject( attributes ) ? attributes : {};
-	const style = parseStyle( attributesObject.style );
-
-	return __experimentalUseColorProps( { ...attributesObject, style } );
-};
diff --git a/assets/js/base/hooks/use-spacing-props.ts b/assets/js/base/hooks/use-spacing-props.ts
deleted file mode 100644
index df43aa90277..00000000000
--- a/assets/js/base/hooks/use-spacing-props.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/* eslint-disable @wordpress/no-unsafe-wp-apis */
-/**
- * External dependencies
- */
-import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
-import { isObject } from '@woocommerce/types';
-import { parseStyle } from '@woocommerce/base-utils';
-
-type WithStyle = {
-	style: Record< string, unknown >;
-};
-
-// @todo The @wordpress/block-editor dependency should never be used on the frontend of the store due to excessive side and its dependency on @wordpress/components
-// @see https://github.com/woocommerce/woocommerce-blocks/issues/8071
-export const useSpacingProps = ( attributes: unknown ): WithStyle => {
-	if ( typeof __experimentalGetSpacingClassesAndStyles !== 'function' ) {
-		return {
-			style: {},
-		};
-	}
-
-	const attributesObject = isObject( attributes ) ? attributes : {};
-	const style = parseStyle( attributesObject.style );
-
-	return __experimentalGetSpacingClassesAndStyles( {
-		...attributesObject,
-		style,
-	} );
-};
diff --git a/assets/js/base/hooks/use-style-props.ts b/assets/js/base/hooks/use-style-props.ts
new file mode 100644
index 00000000000..792cc2fc8d3
--- /dev/null
+++ b/assets/js/base/hooks/use-style-props.ts
@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { isObject } from '@woocommerce/types';
+import { parseStyle } from '@woocommerce/base-utils';
+
+/**
+ * Internal dependencies
+ */
+import { useTypographyProps } from './use-typography-props';
+import {
+	getColorClassesAndStyles,
+	getBorderClassesAndStyles,
+	getSpacingClassesAndStyles,
+	WithStyle,
+} from '../utils';
+
+type blockAttributes = {
+	style: Record< string, unknown > | string;
+};
+
+type StyleProps = {
+	className: string;
+	style: Record< string, unknown >;
+};
+
+/**
+ * Returns the CSS class names and inline styles for a block when provided with its props/attributes.
+ *
+ * This hook (and its utilities) borrow functionality from the Gutenberg Block Editor package--something we don't want
+ * to import on the frontend.
+ */
+export const useStyleProps = ( props: blockAttributes ): StyleProps => {
+	const propsObject = isObject( props )
+		? props
+		: {
+				style: {},
+		  };
+
+	const style = parseStyle( propsObject.style );
+
+	const colorProps = getColorClassesAndStyles( {
+		...propsObject,
+		style,
+	} as WithStyle );
+
+	const borderProps = getBorderClassesAndStyles( {
+		...propsObject,
+		style,
+	} as WithStyle );
+
+	const spacingProps = getSpacingClassesAndStyles( {
+		...propsObject,
+		style,
+	} as WithStyle );
+
+	const typographyProps = useTypographyProps( propsObject );
+
+	return {
+		className: classnames(
+			typographyProps.className,
+			colorProps.className,
+			borderProps.className,
+			spacingProps.className
+		),
+		style: {
+			...typographyProps.style,
+			...colorProps.style,
+			...borderProps.style,
+			...spacingProps.style,
+		},
+	};
+};
diff --git a/assets/js/base/hooks/use-typography-props.ts b/assets/js/base/hooks/use-typography-props.ts
index a1f979fb2d2..83998a5325d 100644
--- a/assets/js/base/hooks/use-typography-props.ts
+++ b/assets/js/base/hooks/use-typography-props.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @wordpress/no-unsafe-wp-apis */
 /**
  * External dependencies
  */
@@ -13,27 +12,32 @@ type WithStyle = {
 	style: Record< string, unknown >;
 };
 
+type blockAttributes = {
+	style?: Record< string, unknown > | string | undefined;
+	fontSize?: string | undefined;
+	fontFamily?: string | undefined;
+};
+
 export const useTypographyProps = (
-	attributes: unknown
+	props: blockAttributes
 ): WithStyle & WithClass => {
-	const attributesObject = isObject( attributes ) ? attributes : {};
-	const style = parseStyle( attributesObject.style );
-	const typography = isObject( style.typography )
-		? ( style.typography as Record< string, string > )
+	const styleObject = parseStyle( props.style );
+	const typography = isObject( styleObject.typography )
+		? ( styleObject.typography as Record< string, string > )
 		: {};
 
 	const classNameFallback = isString( typography.fontFamily )
 		? typography.fontFamily
 		: '';
-	const className = attributesObject.fontFamily
-		? `has-${ attributesObject.fontFamily }-font-family`
+	const className = props.fontFamily
+		? `has-${ props.fontFamily }-font-family`
 		: classNameFallback;
 
 	return {
 		className,
 		style: {
-			fontSize: attributesObject.fontSize
-				? `var(--wp--preset--font-size--${ attributesObject.fontSize })`
+			fontSize: props.fontSize
+				? `var(--wp--preset--font-size--${ props.fontSize })`
 				: typography.fontSize,
 			fontStyle: typography.fontStyle,
 			fontWeight: typography.fontWeight,
diff --git a/assets/js/base/utils/get-inline-styles.ts b/assets/js/base/utils/get-inline-styles.ts
new file mode 100644
index 00000000000..a713f02b8fb
--- /dev/null
+++ b/assets/js/base/utils/get-inline-styles.ts
@@ -0,0 +1,163 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { paramCase as kebabCase } from 'change-case';
+import { getCSSRules } from '@wordpress/style-engine';
+import { isObject } from '@woocommerce/types';
+
+type StyleValue = string | NestedStyle;
+
+interface NestedStyle {
+	[ key: string ]: StyleValue | undefined;
+}
+
+export type WithStyle = {
+	style: Record< string, NestedStyle > | undefined;
+};
+
+/**
+ * Returns the inline styles to add depending on the style object
+ *
+ * @param {Object} styles Styles configuration.
+ * @return {Object} Flattened CSS variables declaration.
+ */
+function getInlineStyles( styles = {} ) {
+	const output = {} as Record< string, unknown >;
+
+	getCSSRules( styles, { selector: '' } ).forEach( ( rule ) => {
+		output[ rule.key ] = rule.value;
+	} );
+
+	return output;
+}
+
+/**
+ * Get the classname for a given color.
+ */
+function getColorClassName(
+	colorContextName: string | undefined,
+	colorSlug: string | undefined
+): string {
+	if ( ! colorContextName || ! colorSlug ) {
+		return '';
+	}
+	return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;
+}
+
+/**
+ * Generates a CSS class name consisting of all the applicable border color
+ * classes given the current block attributes.
+ */
+function getBorderClassName(
+	attributes: WithStyle & {
+		borderColor?: string;
+	}
+) {
+	const { borderColor, style } = attributes;
+	const borderColorClass = borderColor
+		? getColorClassName( 'border-color', borderColor )
+		: '';
+
+	return classnames( {
+		'has-border-color': borderColor || style?.border?.color,
+		borderColorClass,
+	} );
+}
+
+function getGradientClassName( gradientSlug: string | undefined ) {
+	if ( ! gradientSlug ) {
+		return undefined;
+	}
+	return `has-${ gradientSlug }-gradient-background`;
+}
+
+/**
+ * Provides the CSS class names and inline styles for a block's color support
+ * attributes.
+ *
+ * @param {Object} attributes Block attributes.
+ *
+ * @return {Object} Color block support derived CSS classes & styles.
+ */
+export function getColorClassesAndStyles(
+	attributes: WithStyle & {
+		backgroundColor?: string | undefined;
+		textColor?: string | undefined;
+		gradient?: string | undefined;
+	}
+) {
+	const { backgroundColor, textColor, gradient, style } = attributes;
+
+	// Collect color CSS classes.
+	const backgroundClass = getColorClassName(
+		'background-color',
+		backgroundColor
+	);
+	const textClass = getColorClassName( 'color', textColor );
+
+	const gradientClass = getGradientClassName( gradient );
+	const hasGradient = gradientClass || style?.color?.gradient;
+
+	// Determine color CSS class name list.
+	const className = classnames( textClass, gradientClass, {
+		// Don't apply the background class if there's a gradient.
+		[ backgroundClass ]: ! hasGradient && !! backgroundClass,
+		'has-text-color': textColor || style?.color?.text,
+		'has-background':
+			backgroundColor ||
+			style?.color?.background ||
+			gradient ||
+			style?.color?.gradient,
+		'has-link-color': isObject( style?.elements?.link )
+			? style?.elements?.link?.color
+			: undefined,
+	} );
+
+	// Collect inline styles for colors.
+	const colorStyles = style?.color || {};
+	const styleProp = getInlineStyles( { color: colorStyles } );
+
+	return {
+		className: className || undefined,
+		style: styleProp,
+	};
+}
+
+/**
+ * Provides the CSS class names and inline styles for a block's border support
+ * attributes.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {Object} Border block support derived CSS classes & styles.
+ */
+export function getBorderClassesAndStyles( attributes: WithStyle ) {
+	const border = attributes.style?.border || {};
+	const className = getBorderClassName( attributes );
+
+	return {
+		className: className || undefined,
+		style: getInlineStyles( { border } ),
+	};
+}
+
+/**
+ * Provides the CSS class names and inline styles for a block's spacing support
+ * attributes.
+ *
+ * @param {Object} attributes Block attributes.
+ *
+ * @return {Object} Spacing block support derived CSS classes & styles.
+ */
+export function getSpacingClassesAndStyles( attributes: WithStyle ) {
+	const { style } = attributes;
+
+	// Collect inline styles for spacing.
+	const spacingStyles = style?.spacing || {};
+	const styleProp = getInlineStyles( { spacing: spacingStyles } );
+
+	return {
+		className: undefined,
+		style: styleProp,
+	};
+}
diff --git a/assets/js/base/utils/index.js b/assets/js/base/utils/index.js
index 8d6140a9dbb..ef220b0ff25 100644
--- a/assets/js/base/utils/index.js
+++ b/assets/js/base/utils/index.js
@@ -15,3 +15,4 @@ export * from './camel-case-keys';
 export * from './snake-case-keys';
 export * from './debounce';
 export * from './keyby';
+export * from './get-inline-styles';
diff --git a/assets/js/blocks/active-filters/block-wrapper.tsx b/assets/js/blocks/active-filters/block-wrapper.tsx
index 9976265f065..75a47987890 100644
--- a/assets/js/blocks/active-filters/block-wrapper.tsx
+++ b/assets/js/blocks/active-filters/block-wrapper.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { useColorProps } from '@woocommerce/base-hooks';
+import classnames from 'classnames';
+import { useStyleProps } from '@woocommerce/base-hooks';
 import { isString } from '@woocommerce/types';
 
 /**
@@ -11,14 +12,18 @@ import Block from './block';
 import { parseAttributes } from './utils';
 
 const BlockWrapper = ( props: Record< string, unknown > ) => {
-	const colorProps = useColorProps( props );
+	const styleProps = useStyleProps( props );
+	const parsedBlockAttributes = parseAttributes( props );
 
 	return (
 		<div
-			className={ isString( props.className ) ? props.className : '' }
-			style={ { ...colorProps.style } }
+			className={ classnames(
+				isString( props.className ) ? props.className : '',
+				styleProps.className
+			) }
+			style={ styleProps.style }
 		>
-			<Block isEditor={ false } attributes={ parseAttributes( props ) } />
+			<Block isEditor={ false } attributes={ parsedBlockAttributes } />
 		</div>
 	);
 };
diff --git a/assets/js/blocks/attribute-filter/block-wrapper.tsx b/assets/js/blocks/attribute-filter/block-wrapper.tsx
index 9976265f065..75a47987890 100644
--- a/assets/js/blocks/attribute-filter/block-wrapper.tsx
+++ b/assets/js/blocks/attribute-filter/block-wrapper.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { useColorProps } from '@woocommerce/base-hooks';
+import classnames from 'classnames';
+import { useStyleProps } from '@woocommerce/base-hooks';
 import { isString } from '@woocommerce/types';
 
 /**
@@ -11,14 +12,18 @@ import Block from './block';
 import { parseAttributes } from './utils';
 
 const BlockWrapper = ( props: Record< string, unknown > ) => {
-	const colorProps = useColorProps( props );
+	const styleProps = useStyleProps( props );
+	const parsedBlockAttributes = parseAttributes( props );
 
 	return (
 		<div
-			className={ isString( props.className ) ? props.className : '' }
-			style={ { ...colorProps.style } }
+			className={ classnames(
+				isString( props.className ) ? props.className : '',
+				styleProps.className
+			) }
+			style={ styleProps.style }
 		>
-			<Block isEditor={ false } attributes={ parseAttributes( props ) } />
+			<Block isEditor={ false } attributes={ parsedBlockAttributes } />
 		</div>
 	);
 };
diff --git a/assets/js/blocks/attribute-filter/block.tsx b/assets/js/blocks/attribute-filter/block.tsx
index a29cb2ad40d..23a64ff1430 100644
--- a/assets/js/blocks/attribute-filter/block.tsx
+++ b/assets/js/blocks/attribute-filter/block.tsx
@@ -2,11 +2,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	usePrevious,
-	useShallowEqual,
-	useBorderProps,
-} from '@woocommerce/base-hooks';
+import { usePrevious, useShallowEqual } from '@woocommerce/base-hooks';
 import {
 	useCollection,
 	useQueryStateByKey,
@@ -127,8 +123,6 @@ const AttributeFilterBlock = ( {
 			: []
 	);
 
-	const borderProps = useBorderProps( blockAttributes );
-
 	const [ queryState ] = useQueryStateByContext();
 	const [ productAttributesQuery, setProductAttributesQuery ] =
 		useQueryStateByKey( 'attributes', [] );
@@ -551,12 +545,11 @@ const AttributeFilterBlock = ( {
 					<>
 						<FormTokenField
 							key={ remountKey }
-							className={ classnames( borderProps.className, {
+							className={ classnames( {
 								'single-selection': ! multiple,
 								'is-loading': isLoading,
 							} ) }
 							style={ {
-								...borderProps.style,
 								borderStyle: 'none',
 							} }
 							suggestions={ displayedOptions
diff --git a/assets/js/blocks/attribute-filter/frontend.ts b/assets/js/blocks/attribute-filter/frontend.ts
deleted file mode 100644
index 2096e86c964..00000000000
--- a/assets/js/blocks/attribute-filter/frontend.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { renderFrontend } from '@woocommerce/base-utils';
-
-/**
- * Internal dependencies
- */
-import Block from './block';
-import { parseAttributes } from './utils';
-
-const getProps = ( el: HTMLElement ) => {
-	return {
-		isEditor: false,
-		attributes: parseAttributes( el.dataset ),
-	};
-};
-
-renderFrontend( {
-	selector: '.wp-block-woocommerce-attribute-filter',
-	Block,
-	getProps,
-} );
diff --git a/assets/js/blocks/featured-items/with-featured-item.tsx b/assets/js/blocks/featured-items/with-featured-item.tsx
index 1497fca30f6..d3d19aa6b82 100644
--- a/assets/js/blocks/featured-items/with-featured-item.tsx
+++ b/assets/js/blocks/featured-items/with-featured-item.tsx
@@ -5,12 +5,11 @@
  */
 import type { BlockAlignment } from '@wordpress/blocks';
 import { ProductResponseItem, isEmpty } from '@woocommerce/types';
-import { __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles } from '@wordpress/block-editor';
 import { Icon, Placeholder, Spinner } from '@wordpress/components';
 import classnames from 'classnames';
 import { useCallback, useState } from '@wordpress/element';
 import { WP_REST_API_Category } from 'wp-types';
-import { useBorderProps } from '@woocommerce/base-hooks';
+import { useStyleProps } from '@woocommerce/base-hooks';
 import type { ComponentType, Dispatch, SetStateAction } from 'react';
 
 /**
@@ -151,7 +150,7 @@ export const withFeaturedItem =
 			</Placeholder>
 		);
 
-		const borderProps = useBorderProps( attributes );
+		const styleProps = useStyleProps( attributes );
 
 		const renderItem = () => {
 			const {
@@ -170,7 +169,7 @@ export const withFeaturedItem =
 				textColor,
 			} = attributes;
 
-			const classes = classnames(
+			const containerClass = classnames(
 				className,
 				{
 					'is-selected':
@@ -183,7 +182,8 @@ export const withFeaturedItem =
 					'is-repeated': isRepeated,
 				},
 				dimRatioToClass( dimRatio ),
-				contentAlign !== 'center' && `has-${ contentAlign }-content`
+				contentAlign !== 'center' && `has-${ contentAlign }-content`,
+				styleProps.className
 			);
 
 			const containerStyle = {
@@ -192,11 +192,8 @@ export const withFeaturedItem =
 					? `var(--wp--preset--color--${ textColor })`
 					: style?.color?.text,
 				boxSizing: 'border-box',
-			};
-
-			const wrapperStyle = {
-				...getSpacingClassesAndStyles( attributes ).style,
 				minHeight,
+				...styleProps.style,
 			};
 
 			const isImgElement = ! isRepeated && ! hasParallax;
@@ -222,14 +219,8 @@ export const withFeaturedItem =
 						showHandle={ isSelected }
 						style={ { minHeight } }
 					/>
-					<div
-						className={ classes }
-						style={ { containerStyle, ...borderProps.style } }
-					>
-						<div
-							className={ `${ className }__wrapper` }
-							style={ wrapperStyle }
-						>
+					<div className={ containerClass } style={ containerStyle }>
+						<div className={ `${ className }__wrapper` }>
 							<div
 								className="background-dim__overlay"
 								style={ overlayStyle }
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
index 0a2fd3e2fdc..550144360fc 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
@@ -4,7 +4,7 @@
 import { CART_URL } from '@woocommerce/block-settings';
 import Button from '@woocommerce/base-components/button';
 import classNames from 'classnames';
-import { useColorProps } from '@woocommerce/base-hooks';
+import { useStyleProps } from '@woocommerce/base-hooks';
 
 /**
  * Internal dependencies
@@ -23,7 +23,7 @@ const Block = ( {
 	cartButtonLabel,
 	style,
 }: MiniCartCartButtonBlockProps ): JSX.Element | null => {
-	const colorProps = useColorProps( { style } );
+	const styleProps = useStyleProps( { style } );
 
 	if ( ! CART_URL ) {
 		return null;
@@ -33,10 +33,10 @@ const Block = ( {
 		<Button
 			className={ classNames(
 				className,
-				colorProps.className,
+				styleProps.className,
 				'wc-block-mini-cart__footer-cart'
 			) }
-			style={ { ...colorProps.style } }
+			style={ styleProps.style }
 			href={ CART_URL }
 			variant={ getVariant( className, 'outlined' ) }
 		>
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
index 6652ce25c2c..cb8be3f5cd4 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
@@ -35,6 +35,7 @@ export const Edit = ( {
 						cartButtonLabel: content,
 					} );
 				} }
+				style={ blockProps.style }
 			/>
 		</div>
 	);
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
index 839a093adce..38469cbd776 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
@@ -4,7 +4,7 @@
 import { CHECKOUT_URL } from '@woocommerce/block-settings';
 import Button from '@woocommerce/base-components/button';
 import classNames from 'classnames';
-import { useColorProps } from '@woocommerce/base-hooks';
+import { useStyleProps } from '@woocommerce/base-hooks';
 
 /**
  * Internal dependencies
@@ -23,7 +23,7 @@ const Block = ( {
 	checkoutButtonLabel,
 	style,
 }: MiniCartCheckoutButtonBlockProps ): JSX.Element | null => {
-	const colorProps = useColorProps( { style } );
+	const styleProps = useStyleProps( { style } );
 
 	if ( ! CHECKOUT_URL ) {
 		return null;
@@ -33,11 +33,11 @@ const Block = ( {
 		<Button
 			className={ classNames(
 				className,
-				colorProps.className,
+				styleProps.className,
 				'wc-block-mini-cart__footer-checkout'
 			) }
 			variant={ getVariant( className, 'contained' ) }
-			style={ { ...colorProps.style } }
+			style={ styleProps.style }
 			href={ CHECKOUT_URL }
 		>
 			{ checkoutButtonLabel || defaultCheckoutButtonLabel }
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.tsx
index e526f96336c..ac60b04c6c4 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.tsx
@@ -4,11 +4,7 @@
 import { useStoreCart } from '@woocommerce/base-context';
 import classNames from 'classnames';
 import { _n, sprintf } from '@wordpress/i18n';
-import {
-	useColorProps,
-	useSpacingProps,
-	useTypographyProps,
-} from '@woocommerce/base-hooks';
+import { useStyleProps } from '@woocommerce/base-hooks';
 
 type Props = {
 	className?: string;
@@ -16,22 +12,12 @@ type Props = {
 
 const Block = ( props: Props ): JSX.Element => {
 	const { cartItemsCount } = useStoreCart();
-	const colorProps = useColorProps( props );
-	const typographyProps = useTypographyProps( props );
-	const spacingProps = useSpacingProps( props );
+	const styleProps = useStyleProps( props );
 
 	return (
 		<span
-			className={ classNames(
-				props.className,
-				colorProps.className,
-				typographyProps.className
-			) }
-			style={ {
-				...colorProps.style,
-				...typographyProps.style,
-				...spacingProps.style,
-			} }
+			className={ classNames( props.className, styleProps.className ) }
+			style={ styleProps.style }
 		>
 			{ sprintf(
 				/* translators: %d is the count of items in the cart. */
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx
index f9179c6ac64..e66116fec72 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx
@@ -1,12 +1,8 @@
 /**
  * External dependencies
  */
-import {
-	useColorProps,
-	useSpacingProps,
-	useTypographyProps,
-} from '@woocommerce/base-hooks';
-import classNames from 'classnames';
+import { useStyleProps } from '@woocommerce/base-hooks';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -19,22 +15,12 @@ type Props = {
 };
 
 const Block = ( props: Props ): JSX.Element => {
-	const colorProps = useColorProps( props );
-	const typographyProps = useTypographyProps( props );
-	const spacingProps = useSpacingProps( props );
+	const styleProps = useStyleProps( props );
 
 	return (
 		<span
-			className={ classNames(
-				props.className,
-				colorProps.className,
-				typographyProps.className
-			) }
-			style={ {
-				...colorProps.style,
-				...typographyProps.style,
-				...spacingProps.style,
-			} }
+			className={ classnames( props.className, styleProps.className ) }
+			style={ styleProps.style }
 		>
 			{ props.label || defaultYourCartLabel }
 		</span>
diff --git a/assets/js/blocks/price-filter/block-wrapper.tsx b/assets/js/blocks/price-filter/block-wrapper.tsx
index 9976265f065..75a47987890 100644
--- a/assets/js/blocks/price-filter/block-wrapper.tsx
+++ b/assets/js/blocks/price-filter/block-wrapper.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { useColorProps } from '@woocommerce/base-hooks';
+import classnames from 'classnames';
+import { useStyleProps } from '@woocommerce/base-hooks';
 import { isString } from '@woocommerce/types';
 
 /**
@@ -11,14 +12,18 @@ import Block from './block';
 import { parseAttributes } from './utils';
 
 const BlockWrapper = ( props: Record< string, unknown > ) => {
-	const colorProps = useColorProps( props );
+	const styleProps = useStyleProps( props );
+	const parsedBlockAttributes = parseAttributes( props );
 
 	return (
 		<div
-			className={ isString( props.className ) ? props.className : '' }
-			style={ { ...colorProps.style } }
+			className={ classnames(
+				isString( props.className ) ? props.className : '',
+				styleProps.className
+			) }
+			style={ styleProps.style }
 		>
-			<Block isEditor={ false } attributes={ parseAttributes( props ) } />
+			<Block isEditor={ false } attributes={ parsedBlockAttributes } />
 		</div>
 	);
 };
diff --git a/assets/js/blocks/price-filter/frontend.ts b/assets/js/blocks/price-filter/frontend.ts
deleted file mode 100644
index 0f46f225b93..00000000000
--- a/assets/js/blocks/price-filter/frontend.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { renderFrontend } from '@woocommerce/base-utils';
-
-/**
- * Internal dependencies
- */
-import Block from './block';
-import { parseAttributes } from './utils';
-
-const getProps = ( el: HTMLElement ) => {
-	return {
-		attributes: parseAttributes( el.dataset ),
-		isEditor: false,
-	};
-};
-
-renderFrontend( {
-	selector: '.wp-block-woocommerce-price-filter',
-	Block,
-	getProps,
-} );
diff --git a/assets/js/blocks/rating-filter/block-wrapper.tsx b/assets/js/blocks/rating-filter/block-wrapper.tsx
index 9976265f065..75a47987890 100644
--- a/assets/js/blocks/rating-filter/block-wrapper.tsx
+++ b/assets/js/blocks/rating-filter/block-wrapper.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { useColorProps } from '@woocommerce/base-hooks';
+import classnames from 'classnames';
+import { useStyleProps } from '@woocommerce/base-hooks';
 import { isString } from '@woocommerce/types';
 
 /**
@@ -11,14 +12,18 @@ import Block from './block';
 import { parseAttributes } from './utils';
 
 const BlockWrapper = ( props: Record< string, unknown > ) => {
-	const colorProps = useColorProps( props );
+	const styleProps = useStyleProps( props );
+	const parsedBlockAttributes = parseAttributes( props );
 
 	return (
 		<div
-			className={ isString( props.className ) ? props.className : '' }
-			style={ { ...colorProps.style } }
+			className={ classnames(
+				isString( props.className ) ? props.className : '',
+				styleProps.className
+			) }
+			style={ styleProps.style }
 		>
-			<Block isEditor={ false } attributes={ parseAttributes( props ) } />
+			<Block isEditor={ false } attributes={ parsedBlockAttributes } />
 		</div>
 	);
 };
diff --git a/assets/js/blocks/rating-filter/block.tsx b/assets/js/blocks/rating-filter/block.tsx
index d006db19116..cd75b6a5f4b 100644
--- a/assets/js/blocks/rating-filter/block.tsx
+++ b/assets/js/blocks/rating-filter/block.tsx
@@ -7,11 +7,7 @@ import { Icon, chevronDown } from '@wordpress/icons';
 import Rating, {
 	RatingValues,
 } from '@woocommerce/base-components/product-rating';
-import {
-	usePrevious,
-	useShallowEqual,
-	useBorderProps,
-} from '@woocommerce/base-hooks';
+import { usePrevious, useShallowEqual } from '@woocommerce/base-hooks';
 import {
 	useQueryStateByKey,
 	useQueryStateByContext,
@@ -122,8 +118,6 @@ const RatingFilterBlock = ( {
 		More info: https://github.com/woocommerce/woocommerce-blocks/pull/6920#issuecomment-1222402482
 	 */
 	const [ remountKey, setRemountKey ] = useState( generateUniqueId() );
-
-	const borderProps = useBorderProps( blockAttributes );
 	const [ displayNoProductRatingsNotice, setDisplayNoProductRatingsNotice ] =
 		useState( false );
 
@@ -346,12 +340,11 @@ const RatingFilterBlock = ( {
 					<>
 						<FormTokenField
 							key={ remountKey }
-							className={ classnames( borderProps.className, {
+							className={ classnames( {
 								'single-selection': ! multiple,
 								'is-loading': isLoading,
 							} ) }
 							style={ {
-								...borderProps.style,
 								borderStyle: 'none',
 							} }
 							suggestions={ displayedOptions
diff --git a/assets/js/blocks/stock-filter/block-wrapper.tsx b/assets/js/blocks/stock-filter/block-wrapper.tsx
index 9976265f065..75a47987890 100644
--- a/assets/js/blocks/stock-filter/block-wrapper.tsx
+++ b/assets/js/blocks/stock-filter/block-wrapper.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { useColorProps } from '@woocommerce/base-hooks';
+import classnames from 'classnames';
+import { useStyleProps } from '@woocommerce/base-hooks';
 import { isString } from '@woocommerce/types';
 
 /**
@@ -11,14 +12,18 @@ import Block from './block';
 import { parseAttributes } from './utils';
 
 const BlockWrapper = ( props: Record< string, unknown > ) => {
-	const colorProps = useColorProps( props );
+	const styleProps = useStyleProps( props );
+	const parsedBlockAttributes = parseAttributes( props );
 
 	return (
 		<div
-			className={ isString( props.className ) ? props.className : '' }
-			style={ { ...colorProps.style } }
+			className={ classnames(
+				isString( props.className ) ? props.className : '',
+				styleProps.className
+			) }
+			style={ styleProps.style }
 		>
-			<Block isEditor={ false } attributes={ parseAttributes( props ) } />
+			<Block isEditor={ false } attributes={ parsedBlockAttributes } />
 		</div>
 	);
 };
diff --git a/assets/js/blocks/stock-filter/block.tsx b/assets/js/blocks/stock-filter/block.tsx
index 430cd511de2..78541c959a6 100644
--- a/assets/js/blocks/stock-filter/block.tsx
+++ b/assets/js/blocks/stock-filter/block.tsx
@@ -4,11 +4,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { Icon, chevronDown } from '@wordpress/icons';
-import {
-	usePrevious,
-	useShallowEqual,
-	useBorderProps,
-} from '@woocommerce/base-hooks';
+import { usePrevious, useShallowEqual } from '@woocommerce/base-hooks';
 import {
 	useQueryStateByKey,
 	useQueryStateByContext,
@@ -145,8 +141,6 @@ const StockStatusFilterBlock = ( {
 	 */
 	const [ remountKey, setRemountKey ] = useState( generateUniqueId() );
 
-	const borderProps = useBorderProps( blockAttributes );
-
 	/**
 	 * Compare intersection of all stock statuses and filtered counts to get a list of options to display.
 	 */
@@ -467,11 +461,10 @@ const StockStatusFilterBlock = ( {
 					<>
 						<FormTokenField
 							key={ remountKey }
-							className={ classnames( borderProps.className, {
+							className={ classnames( {
 								'single-selection': ! allowsMultipleOptions,
 								'is-loading': isLoading,
 							} ) }
-							style={ { ...borderProps.style } }
 							suggestions={ displayedOptions
 								.filter(
 									( option ) =>
diff --git a/assets/js/blocks/stock-filter/frontend.ts b/assets/js/blocks/stock-filter/frontend.ts
deleted file mode 100644
index 40a7331075d..00000000000
--- a/assets/js/blocks/stock-filter/frontend.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { renderFrontend } from '@woocommerce/base-utils';
-
-/**
- * Internal dependencies
- */
-import Block from './block';
-import { parseAttributes } from './utils';
-
-const getProps = ( el: HTMLElement ) => {
-	return {
-		attributes: parseAttributes( el.dataset ),
-		isEditor: false,
-	};
-};
-
-renderFrontend( {
-	selector: '.wp-block-woocommerce-stock-filter',
-	Block,
-	getProps,
-} );
diff --git a/package-lock.json b/package-lock.json
index e57cec5fa2e..2d4dc3e4f43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
 				"@wordpress/plugins": "4.10.0",
 				"@wordpress/primitives": "3.0.4",
 				"@wordpress/server-side-render": "3.10.0",
+				"@wordpress/style-engine": "^1.15.0",
 				"@wordpress/url": "3.13.0",
 				"@wordpress/wordcount": "3.13.0",
 				"change-case": "^4.1.2",
@@ -13697,6 +13698,19 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/@wordpress/block-editor/node_modules/@wordpress/style-engine": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/style-engine/-/style-engine-0.2.0.tgz",
+			"integrity": "sha512-Xc1LZxZgkPiqaBT3xaHPS8fa0F3jkhcYYlVCOPjuQ8qZeF7nOxqJD2b/WEqtvsV5kiCHEtcdrhwAjdV6Kkr4vw==",
+			"dev": true,
+			"dependencies": {
+				"@babel/runtime": "^7.16.0",
+				"lodash": "^4.17.21"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/@wordpress/block-editor/node_modules/framer-motion": {
 			"version": "6.3.3",
 			"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.3.3.tgz",
@@ -18649,10 +18663,9 @@
 			}
 		},
 		"node_modules/@wordpress/style-engine": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/style-engine/-/style-engine-0.2.0.tgz",
-			"integrity": "sha512-Xc1LZxZgkPiqaBT3xaHPS8fa0F3jkhcYYlVCOPjuQ8qZeF7nOxqJD2b/WEqtvsV5kiCHEtcdrhwAjdV6Kkr4vw==",
-			"dev": true,
+			"version": "1.15.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/style-engine/-/style-engine-1.15.0.tgz",
+			"integrity": "sha512-axWOvO0CfHWQ6JnursjHs1djQ9wpylFBGw/EMFf06KrqiOQ8wvH4WcNGiSpA35Q8npS2ajg1fbuSSinHwD6gTw==",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
 				"lodash": "^4.17.21"
@@ -41746,7 +41759,16 @@
 			"version": "2.6.2",
 			"resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.6.2.tgz",
 			"integrity": "sha512-AV33EzqiFJ3fj+mPlKABN59YFPReLkDxQnj067Z3uEOeRQf3g05WprL0RDuqM7UBhSRo9W1rMSC2KvZmjE5UOA==",
-			"dev": true
+			"dev": true,
+			"bin": {
+				"prettier": "bin-prettier.js"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			},
+			"funding": {
+				"url": "https://github.com/prettier/prettier?sponsor=1"
+			}
 		},
 		"node_modules/prettier-linter-helpers": {
 			"version": "1.0.0",
@@ -61640,6 +61662,16 @@
 						"classnames": "^2.3.1"
 					}
 				},
+				"@wordpress/style-engine": {
+					"version": "0.2.0",
+					"resolved": "https://registry.npmjs.org/@wordpress/style-engine/-/style-engine-0.2.0.tgz",
+					"integrity": "sha512-Xc1LZxZgkPiqaBT3xaHPS8fa0F3jkhcYYlVCOPjuQ8qZeF7nOxqJD2b/WEqtvsV5kiCHEtcdrhwAjdV6Kkr4vw==",
+					"dev": true,
+					"requires": {
+						"@babel/runtime": "^7.16.0",
+						"lodash": "^4.17.21"
+					}
+				},
 				"framer-motion": {
 					"version": "6.3.3",
 					"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.3.3.tgz",
@@ -65367,10 +65399,9 @@
 			}
 		},
 		"@wordpress/style-engine": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/style-engine/-/style-engine-0.2.0.tgz",
-			"integrity": "sha512-Xc1LZxZgkPiqaBT3xaHPS8fa0F3jkhcYYlVCOPjuQ8qZeF7nOxqJD2b/WEqtvsV5kiCHEtcdrhwAjdV6Kkr4vw==",
-			"dev": true,
+			"version": "1.15.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/style-engine/-/style-engine-1.15.0.tgz",
+			"integrity": "sha512-axWOvO0CfHWQ6JnursjHs1djQ9wpylFBGw/EMFf06KrqiOQ8wvH4WcNGiSpA35Q8npS2ajg1fbuSSinHwD6gTw==",
 			"requires": {
 				"@babel/runtime": "^7.16.0",
 				"lodash": "^4.17.21"
diff --git a/package.json b/package.json
index da4effcad03..abfee0542fc 100644
--- a/package.json
+++ b/package.json
@@ -252,6 +252,7 @@
 		"@wordpress/plugins": "4.10.0",
 		"@wordpress/primitives": "3.0.4",
 		"@wordpress/server-side-render": "3.10.0",
+		"@wordpress/style-engine": "^1.15.0",
 		"@wordpress/url": "3.13.0",
 		"@wordpress/wordcount": "3.13.0",
 		"change-case": "^4.1.2",
diff --git a/src/BlockTypes/AttributeFilter.php b/src/BlockTypes/AttributeFilter.php
index 0979f6d2353..7d302625adf 100644
--- a/src/BlockTypes/AttributeFilter.php
+++ b/src/BlockTypes/AttributeFilter.php
@@ -25,4 +25,13 @@ protected function enqueue_data( array $attributes = [] ) {
 		parent::enqueue_data( $attributes );
 		$this->asset_data_registry->add( 'attributes', array_values( wc_get_attribute_taxonomies() ), true );
 	}
+
+	/**
+	 * Get the frontend script handle for this block type.
+	 *
+	 * @param string $key Data to get, or default to everything.
+	 */
+	protected function get_block_type_script( $key = null ) {
+		return null;
+	}
 }
diff --git a/src/BlockTypes/RatingFilter.php b/src/BlockTypes/RatingFilter.php
index b9036b57f67..5968c6aac62 100644
--- a/src/BlockTypes/RatingFilter.php
+++ b/src/BlockTypes/RatingFilter.php
@@ -14,4 +14,12 @@ class RatingFilter extends AbstractBlock {
 	protected $block_name  = 'rating-filter';
 	const RATING_QUERY_VAR = 'rating_filter';
 
+	/**
+	 * Get the frontend script handle for this block type.
+	 *
+	 * @param string $key Data to get, or default to everything.
+	 */
+	protected function get_block_type_script( $key = null ) {
+		return null;
+	}
 }
diff --git a/src/BlockTypes/StockFilter.php b/src/BlockTypes/StockFilter.php
index 3f0784d80e3..6b140e8a4f6 100644
--- a/src/BlockTypes/StockFilter.php
+++ b/src/BlockTypes/StockFilter.php
@@ -33,4 +33,13 @@ protected function enqueue_data( array $stock_statuses = [] ) {
 	public static function get_stock_status_query_var_values() {
 		return array_keys( wc_get_product_stock_status_options() );
 	}
+
+	/**
+	 * Get the frontend script handle for this block type.
+	 *
+	 * @param string $key Data to get, or default to everything.
+	 */
+	protected function get_block_type_script( $key = null ) {
+		return null;
+	}
 }