Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit a992c64

Browse files
mikejolleyAljullutjcafferkey
authored
Experiment: Replace style hooks coming from @wordpress/block-editor (#9251)
* 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 <[email protected]> * Update assets/js/blocks/attribute-filter/block-wrapper.tsx Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/active-filters/block-wrapper.tsx Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/rating-filter/block-wrapper.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/stock-filter/block-wrapper.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/price-filter/block-wrapper.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Simplify styleprop * Styleprops simplify * Fix withFeaturedItem styles * Like the original hook, flatten props and combine with parsed styles --------- Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Tom Cafferkey <[email protected]>
1 parent b9148b4 commit a992c64

File tree

42 files changed

+471
-501
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+471
-501
lines changed

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

Lines changed: 24 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,7 @@ import {
77
useStoreEvents,
88
useStoreAddToCart,
99
} from '@woocommerce/base-context/hooks';
10-
import {
11-
useBorderProps,
12-
useColorProps,
13-
useTypographyProps,
14-
useSpacingProps,
15-
} from '@woocommerce/base-hooks';
10+
import { useStyleProps } from '@woocommerce/base-hooks';
1611
import { decodeEntities } from '@wordpress/html-entities';
1712
import { CART_URL } from '@woocommerce/block-settings';
1813
import { getSetting } from '@woocommerce/settings';
@@ -35,22 +30,18 @@ import type {
3530
/**
3631
* Product Button Block Component.
3732
*
38-
* @param {Object} props Incoming props.
39-
* @param {Object} [props.product] Product.
40-
* @param {Object} [props.colorStyles] Object contains CSS class and CSS style for color.
41-
* @param {Object} [props.borderStyles] Object contains CSS class and CSS style for border.
42-
* @param {Object} [props.typographyStyles] Object contains CSS class and CSS style for typography.
43-
* @param {Object} [props.spacingStyles] Object contains CSS style for spacing.
44-
* @param {Object} [props.textAlign] Text alignment.
33+
* @param {Object} props Incoming props.
34+
* @param {Object} [props.product] Product.
35+
* @param {Object} [props.style] Object contains CSS Styles.
36+
* @param {string} [props.className] String contains CSS class.
37+
* @param {Object} [props.textAlign] Text alignment.
4538
*
4639
* @return {*} The component.
4740
*/
4841
const AddToCartButton = ( {
4942
product,
50-
colorStyles,
51-
borderStyles,
52-
typographyStyles,
53-
spacingStyles,
43+
className,
44+
style,
5445
textAlign,
5546
}: AddToCartButtonAttributes ): JSX.Element => {
5647
const {
@@ -114,14 +105,15 @@ const AddToCartButton = ( {
114105

115106
return (
116107
<ButtonTag
108+
{ ...buttonProps }
117109
aria-label={ buttonAriaLabel }
110+
disabled={ addingToCart }
118111
className={ classnames(
112+
className,
119113
'wp-block-button__link',
120114
'wp-element-button',
121115
'add_to_cart_button',
122116
'wc-block-components-product-button__button',
123-
colorStyles.className,
124-
borderStyles.className,
125117
{
126118
loading: addingToCart,
127119
added: addedToCart,
@@ -130,14 +122,7 @@ const AddToCartButton = ( {
130122
[ `has-text-align-${ textAlign }` ]: textAlign,
131123
}
132124
) }
133-
style={ {
134-
...colorStyles.style,
135-
...borderStyles.style,
136-
...typographyStyles.style,
137-
...spacingStyles.style,
138-
} }
139-
disabled={ addingToCart }
140-
{ ...buttonProps }
125+
style={ style }
141126
>
142127
{ buttonText }
143128
</ButtonTag>
@@ -147,19 +132,15 @@ const AddToCartButton = ( {
147132
/**
148133
* Product Button Block Component.
149134
*
150-
* @param {Object} props Incoming props.
151-
* @param {Object} [props.colorStyles] Object contains CSS class and CSS style for color.
152-
* @param {Object} [props.borderStyles] Object contains CSS class and CSS style for border.
153-
* @param {Object} [props.typographyStyles] Object contains CSS class and CSS style for typography.
154-
* @param {Object} [props.spacingStyles] Object contains CSS style for spacing.
135+
* @param {Object} props Incoming props.
136+
* @param {Object} [props.style] Object contains CSS Styles.
137+
* @param {string} [props.className] String contains CSS class.
155138
*
156139
* @return {*} The component.
157140
*/
158141
const AddToCartButtonPlaceholder = ( {
159-
colorStyles,
160-
borderStyles,
161-
typographyStyles,
162-
spacingStyles,
142+
className,
143+
style,
163144
}: AddToCartButtonPlaceholderAttributes ): JSX.Element => {
164145
return (
165146
<button
@@ -169,15 +150,9 @@ const AddToCartButtonPlaceholder = ( {
169150
'add_to_cart_button',
170151
'wc-block-components-product-button__button',
171152
'wc-block-components-product-button__button--placeholder',
172-
colorStyles.className,
173-
borderStyles.className
153+
className
174154
) }
175-
style={ {
176-
...colorStyles.style,
177-
...borderStyles.style,
178-
...typographyStyles.style,
179-
...spacingStyles.style,
180-
} }
155+
style={ style }
181156
disabled={ true }
182157
/>
183158
);
@@ -193,12 +168,9 @@ const AddToCartButtonPlaceholder = ( {
193168
*/
194169
export const Block = ( props: BlockAttributes ): JSX.Element => {
195170
const { className, textAlign } = props;
171+
const styleProps = useStyleProps( props );
196172
const { parentClassName } = useInnerBlockLayoutContext();
197173
const { product } = useProductDataContext();
198-
const colorProps = useColorProps( props );
199-
const borderProps = useBorderProps( props );
200-
const typographyProps = useTypographyProps( props );
201-
const spacingProps = useSpacingProps( props );
202174

203175
return (
204176
<div
@@ -218,17 +190,13 @@ export const Block = ( props: BlockAttributes ): JSX.Element => {
218190
{ product.id ? (
219191
<AddToCartButton
220192
product={ product }
221-
colorStyles={ colorProps }
222-
borderStyles={ borderProps }
223-
typographyStyles={ typographyProps }
224-
spacingStyles={ spacingProps }
193+
style={ styleProps.style }
194+
className={ styleProps.className }
225195
/>
226196
) : (
227197
<AddToCartButtonPlaceholder
228-
colorStyles={ colorProps }
229-
borderStyles={ borderProps }
230-
typographyStyles={ typographyProps }
231-
spacingStyles={ spacingProps }
198+
style={ styleProps.style }
199+
className={ styleProps.className }
232200
/>
233201
) }
234202
</div>

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,8 @@ export interface BlockAttributes {
1515
}
1616

1717
export interface AddToCartButtonPlaceholderAttributes {
18-
borderStyles: WithClass & WithStyle;
19-
colorStyles: WithClass & WithStyle;
20-
spacingStyles: WithStyle;
21-
typographyStyles: WithStyle;
18+
className: string;
19+
style: Record< string, unknown >;
2220
}
2321

2422
export interface AddToCartButtonAttributes

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

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,7 @@ import {
99
useInnerBlockLayoutContext,
1010
useProductDataContext,
1111
} from '@woocommerce/shared-context';
12-
import {
13-
useBorderProps,
14-
useSpacingProps,
15-
useTypographyProps,
16-
} from '@woocommerce/base-hooks';
12+
import { useStyleProps } from '@woocommerce/base-hooks';
1713
import { withProductDataContext } from '@woocommerce/shared-hocs';
1814
import { useStoreEvents } from '@woocommerce/base-context/hooks';
1915
import type { HTMLAttributes } from 'react';
@@ -87,12 +83,10 @@ export const Block = ( props: Props ): JSX.Element | null => {
8783
saleBadgeAlign = 'right',
8884
...restProps
8985
} = props;
86+
const styleProps = useStyleProps( props );
9087
const { parentClassName } = useInnerBlockLayoutContext();
9188
const { product, isLoading } = useProductDataContext();
9289
const { dispatchStoreEvent } = useStoreEvents();
93-
const typographyProps = useTypographyProps( props );
94-
const borderProps = useBorderProps( props );
95-
const spacingProps = useSpacingProps( props );
9690

9791
if ( ! product.id ) {
9892
return (
@@ -104,13 +98,9 @@ export const Block = ( props: Props ): JSX.Element | null => {
10498
[ `${ parentClassName }__product-image` ]:
10599
parentClassName,
106100
},
107-
borderProps.className
101+
styleProps.className
108102
) }
109-
style={ {
110-
...typographyProps.style,
111-
...borderProps.style,
112-
...spacingProps.style,
113-
} }
103+
style={ styleProps.style }
114104
>
115105
<ImagePlaceholder />
116106
</div>
@@ -142,13 +132,9 @@ export const Block = ( props: Props ): JSX.Element | null => {
142132
{
143133
[ `${ parentClassName }__product-image` ]: parentClassName,
144134
},
145-
borderProps.className
135+
styleProps.className
146136
) }
147-
style={ {
148-
...typographyProps.style,
149-
...borderProps.style,
150-
...spacingProps.style,
151-
} }
137+
style={ styleProps.style }
152138
>
153139
<ParentComponent { ...( showProductLink && anchorProps ) }>
154140
{ !! showSaleBadge && (

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,10 @@ import { ImageSizing } from '../types';
1313

1414
jest.mock( '@woocommerce/base-hooks', () => ( {
1515
__esModule: true,
16-
useBorderProps: jest.fn( () => ( {
16+
useStyleProps: jest.fn( () => ( {
1717
className: '',
1818
style: {},
1919
} ) ),
20-
useTypographyProps: jest.fn( () => ( {
21-
style: {},
22-
} ) ),
23-
useSpacingProps: jest.fn( () => ( {
24-
style: {},
25-
} ) ),
2620
} ) );
2721

2822
const productWithoutImages: ProductResponseItem = {

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

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,7 @@ import {
88
useInnerBlockLayoutContext,
99
useProductDataContext,
1010
} from '@woocommerce/shared-context';
11-
import {
12-
useColorProps,
13-
useSpacingProps,
14-
useTypographyProps,
15-
} from '@woocommerce/base-hooks';
11+
import { useStyleProps } from '@woocommerce/base-hooks';
1612
import { withProductDataContext } from '@woocommerce/shared-hocs';
1713
import { CurrencyCode } from '@woocommerce/type-defs/currency';
1814
import type { HTMLAttributes } from 'react';
@@ -41,23 +37,20 @@ interface PriceProps {
4137

4238
export const Block = ( props: Props ): JSX.Element | null => {
4339
const { className, textAlign, isDescendentOfSingleProductTemplate } = props;
40+
const styleProps = useStyleProps( props );
4441
const { parentName, parentClassName } = useInnerBlockLayoutContext();
4542
const { product } = useProductDataContext();
4643

4744
const isDescendentOfAllProductsBlock =
4845
parentName === 'woocommerce/all-products';
49-
const colorProps = useColorProps( props );
50-
const spacingProps = useSpacingProps( props );
51-
const typographyProps = useTypographyProps( props );
5246

5347
const wrapperClassName = classnames(
5448
'wc-block-components-product-price',
5549
className,
56-
colorProps.className,
50+
styleProps.className,
5751
{
5852
[ `${ parentClassName }__product-price` ]: parentClassName,
59-
},
60-
typographyProps.className
53+
}
6154
);
6255

6356
if ( ! product.id && ! isDescendentOfSingleProductTemplate ) {
@@ -74,13 +67,6 @@ export const Block = ( props: Props ): JSX.Element | null => {
7467
return productPriceComponent;
7568
}
7669

77-
const style = {
78-
...colorProps.style,
79-
...typographyProps.style,
80-
};
81-
const spacingStyle = {
82-
...spacingProps.style,
83-
};
8470
const prices: PriceProps = product.prices;
8571
const currency = isDescendentOfSingleProductTemplate
8672
? getCurrencyFromPriceResponse()
@@ -97,8 +83,9 @@ export const Block = ( props: Props ): JSX.Element | null => {
9783
<ProductPrice
9884
align={ textAlign }
9985
className={ wrapperClassName }
100-
regularPriceStyle={ style }
101-
priceStyle={ style }
86+
style={ styleProps.style }
87+
regularPriceStyle={ styleProps.style }
88+
priceStyle={ styleProps.style }
10289
priceClassName={ priceClassName }
10390
currency={ currency }
10491
price={
@@ -119,7 +106,6 @@ export const Block = ( props: Props ): JSX.Element | null => {
119106
[ `${ parentClassName }__product-price__regular` ]:
120107
parentClassName,
121108
} ) }
122-
spacingStyle={ spacingStyle }
123109
/>
124110
);
125111
if ( isDescendentOfAllProductsBlock ) {

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

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@ import {
77
useInnerBlockLayoutContext,
88
useProductDataContext,
99
} from '@woocommerce/shared-context';
10-
import {
11-
useColorProps,
12-
useSpacingProps,
13-
useTypographyProps,
14-
} from '@woocommerce/base-hooks';
10+
import { useStyleProps } from '@woocommerce/base-hooks';
1511
import { withProductDataContext } from '@woocommerce/shared-hocs';
1612
import { isNumber, ProductResponseItem } from '@woocommerce/types';
1713

@@ -136,17 +132,15 @@ interface ProductRatingProps {
136132

137133
export const Block = ( props: ProductRatingProps ): JSX.Element | null => {
138134
const { textAlign, isDescendentOfSingleProductBlock } = props;
135+
const styleProps = useStyleProps( props );
139136
const { parentClassName } = useInnerBlockLayoutContext();
140137
const { product } = useProductDataContext();
141138
const rating = getAverageRating( product );
142-
const colorProps = useColorProps( props );
143-
const typographyProps = useTypographyProps( props );
144-
const spacingProps = useSpacingProps( props );
145139
const reviews = getRatingCount( product );
146140
const href = getReviewsHref( product );
147141

148142
const className = classnames(
149-
colorProps.className,
143+
styleProps.className,
150144
'wc-block-components-product-rating',
151145
{
152146
[ `${ parentClassName }__product-rating` ]: parentClassName,
@@ -165,14 +159,7 @@ export const Block = ( props: ProductRatingProps ): JSX.Element | null => {
165159
);
166160

167161
return (
168-
<div
169-
className={ className }
170-
style={ {
171-
...colorProps.style,
172-
...typographyProps.style,
173-
...spacingProps.style,
174-
} }
175-
>
162+
<div className={ className } style={ styleProps.style }>
176163
<div className="wc-block-components-product-rating__container">
177164
{ content }
178165
{ reviews && isDescendentOfSingleProductBlock ? (

0 commit comments

Comments
 (0)