Add Style Attributes Hooks to blocks/hooks Directory. (https://github.com/woocommerce/woocommerce-blocks/pull/6870)

* Copy style-attributes file to desired directory.

Add a copy of the style-attributes file in blocks/hooks to the desired
base/hooks directory with the other hooks.

* Remove relative imports in favor of global aliases

Utilizes the custom global project aliases in place of using relative
imports.

Note: seeing some linting issues with the aliases. This seems to be the
case elsewhere so it is likely not a blocker for this effort, however,
it may be worth looking into as a follow-up.

* Adjust all imports to use @woocommerce/base-hooks.

Replace all instances of relative file paths to hooks/style-attributes
to use the custom global alias.

* Remove the hooks dir in `assets/js/blocks/`.

Now that everything is using the `@woocommerce/base-hooks` custom global
alias and we have the `style-attributes` hooks file in the base/hooks
directory, we no longer need the `style-attributes` hooks file in the
aforementioned `assets/js/blocks` directory.

* Split style-attributes.ts out into separate files.

Moved the four hooks in style-attributes.ts out into their own, separate
hook file to be consistent with the rest of our custom hooks.

Additionally, moved the helper function (parseStyle) out into a separate
export in base/utils.

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

@@ -8,6 +8,12 @@ import {
 	useStoreEvents,
 	useStoreAddToCart,
 } from '@woocommerce/base-context/hooks';
+import {
+	useBorderProps,
+	useColorProps,
+	useTypographyProps,
+	useSpacingProps,
+} from '@woocommerce/base-hooks';
 import { decodeEntities } from '@wordpress/html-entities';
 import { CART_URL } from '@woocommerce/block-settings';
 import { getSetting } from '@woocommerce/settings';
@@ -21,12 +27,6 @@ import { withProductDataContext } from '@woocommerce/shared-hocs';
  * Internal dependencies
  */
 import './style.scss';
-import {
-	useBorderProps,
-	useColorProps,
-	useTypographyProps,
-	useSpacingProps,
-} from '../../../../hooks/style-attributes';
 
 /**
  * Product Button Block Component.

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

@@ -7,6 +7,7 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
+import { useColorProps, useTypographyProps } from '@woocommerce/base-hooks';
 import { isEmpty } from 'lodash';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 import { HTMLAttributes } from 'react';
@@ -16,10 +17,6 @@ import { HTMLAttributes } from 'react';
  */
 import './style.scss';
 import { Attributes } from './types';
-import {
-	useColorProps,
-	useTypographyProps,
-} from '../../../../hooks/style-attributes';
 
 type Props = Attributes & HTMLAttributes< HTMLDivElement >;
 

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

@@ -10,6 +10,11 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
+import {
+	useBorderProps,
+	useSpacingProps,
+	useTypographyProps,
+} from '@woocommerce/base-hooks';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 import { useStoreEvents } from '@woocommerce/base-context/hooks';
 
@@ -18,11 +23,6 @@ import { useStoreEvents } from '@woocommerce/base-context/hooks';
  */
 import ProductSaleBadge from './../sale-badge/block';
 import './style.scss';
-import {
-	useBorderProps,
-	useSpacingProps,
-	useTypographyProps,
-} from '../../../../hooks/style-attributes';
 
 /**
  * Product Image Block Component.

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

@@ -9,7 +9,7 @@ import { ProductDataContextProvider } from '@woocommerce/shared-context';
  */
 import { Block } from '../block';
 
-jest.mock( '../../../../../hooks/style-attributes', () => ( {
+jest.mock( '@woocommerce/base-hooks', () => ( {
 	__esModule: true,
 	useBorderProps: jest.fn( () => ( {
 		className: '',

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

@@ -9,15 +9,12 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
+import { useColorProps, useTypographyProps } from '@woocommerce/base-hooks';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 
 /**
  * Internal dependencies
  */
-import {
-	useColorProps,
-	useTypographyProps,
-} from '../../../../hooks/style-attributes';
 
 /**
  * Product Price Block Component.

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

@@ -8,17 +8,17 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
+import {
+	useColorProps,
+	useSpacingProps,
+	useTypographyProps,
+} from '@woocommerce/base-hooks';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import {
-	useColorProps,
-	useSpacingProps,
-	useTypographyProps,
-} from '../../../../hooks/style-attributes';
 
 /**
  * Product Rating Block Component.

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.js

@@ -9,18 +9,18 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
+import {
+	useBorderProps,
+	useColorProps,
+	useSpacingProps,
+	useTypographyProps,
+} from '@woocommerce/base-hooks';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import {
-	useBorderProps,
-	useColorProps,
-	useSpacingProps,
-	useTypographyProps,
-} from '../../../../hooks/style-attributes';
 
 /**
  * Product Sale Badge Block Component.

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/block.js

@@ -8,16 +8,13 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
+import { useColorProps, useTypographyProps } from '@woocommerce/base-hooks';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import {
-	useColorProps,
-	useTypographyProps,
-} from '../../../../hooks/style-attributes';
 
 /**
  * Product Stock Indicator Block Component.

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

@@ -10,16 +10,13 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
+import { useColorProps, useTypographyProps } from '@woocommerce/base-hooks';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import {
-	useColorProps,
-	useTypographyProps,
-} from '../../../../hooks/style-attributes';
 
 /**
  * Product Summary Block Component.

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/block.js

@@ -8,6 +8,7 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
+import { useColorProps, useTypographyProps } from '@woocommerce/base-hooks';
 import { isEmpty } from 'lodash';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 
@@ -15,10 +16,6 @@ import { withProductDataContext } from '@woocommerce/shared-hocs';
  * Internal dependencies
  */
 import './style.scss';
-import {
-	useColorProps,
-	useTypographyProps,
-} from '../../../../hooks/style-attributes';
 
 /**
  * Product Tag List Block Component.

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

@@ -11,17 +11,17 @@ 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';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import { Attributes } from './types';
-import {
-	useSpacingProps,
-	useTypographyProps,
-	useColorProps,
-} from '../../../../hooks/style-attributes';
 
 type Props = Attributes & HTMLAttributes< HTMLDivElement >;
 

plugins/woocommerce-blocks/assets/js/base/hooks/index.js

@@ -4,3 +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';

plugins/woocommerce-blocks/assets/js/base/hooks/use-border-props.ts

@@ -0,0 +1,32 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+/**
+ * External dependencies
+ */
+import { __experimentalUseBorderProps } from '@wordpress/block-editor';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import { isObject } from '@woocommerce/types';
+import { parseStyle } from '@woocommerce/base-utils';
+
+type WithClass = {
+	className: string;
+};
+
+type WithStyle = {
+	style: Record< string, unknown >;
+};
+
+export const useBorderProps = (
+	attributes: unknown
+): WithStyle & WithClass => {
+	if ( ! isFeaturePluginBuild() ) {
+		return {
+			className: '',
+			style: {},
+		};
+	}
+
+	const attributesObject = isObject( attributes ) ? attributes : {};
+	const style = parseStyle( attributesObject.style );
+
+	return __experimentalUseBorderProps( { ...attributesObject, style } );
+};

plugins/woocommerce-blocks/assets/js/base/hooks/use-color-props.ts

@@ -0,0 +1,30 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+/**
+ * External dependencies
+ */
+import { __experimentalUseColorProps } from '@wordpress/block-editor';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import { isObject } from '@woocommerce/types';
+import { parseStyle } from '@woocommerce/base-utils';
+
+type WithClass = {
+	className: string;
+};
+
+type WithStyle = {
+	style: Record< string, unknown >;
+};
+
+export const useColorProps = ( attributes: unknown ): WithStyle & WithClass => {
+	if ( ! isFeaturePluginBuild() ) {
+		return {
+			className: '',
+			style: {},
+		};
+	}
+
+	const attributesObject = isObject( attributes ) ? attributes : {};
+	const style = parseStyle( attributesObject.style );
+
+	return __experimentalUseColorProps( { ...attributesObject, style } );
+};

plugins/woocommerce-blocks/assets/js/base/hooks/use-spacing-props.ts

@@ -0,0 +1,28 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+/**
+ * External dependencies
+ */
+import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import { isObject } from '@woocommerce/types';
+import { hasSpacingStyleSupport } from '@woocommerce/utils';
+import { parseStyle } from '@woocommerce/base-utils';
+
+type WithStyle = {
+	style: Record< string, unknown >;
+};
+
+export const useSpacingProps = ( attributes: unknown ): WithStyle => {
+	if ( ! isFeaturePluginBuild() || ! hasSpacingStyleSupport() ) {
+		return {
+			style: {},
+		};
+	}
+	const attributesObject = isObject( attributes ) ? attributes : {};
+	const style = parseStyle( attributesObject.style );
+
+	return __experimentalGetSpacingClassesAndStyles( {
+		...attributesObject,
+		style,
+	} );
+};

plugins/woocommerce-blocks/assets/js/base/hooks/use-typography-props.ts

@@ -0,0 +1,30 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+/**
+ * External dependencies
+ */
+import { isObject } from '@woocommerce/types';
+import { parseStyle } from '@woocommerce/base-utils';
+
+type WithStyle = {
+	style: Record< string, unknown >;
+};
+
+export const useTypographyProps = ( attributes: unknown ): WithStyle => {
+	const attributesObject = isObject( attributes ) ? attributes : {};
+	const style = parseStyle( attributesObject.style );
+	const typography = isObject( style.typography )
+		? ( style.typography as Record< string, unknown > )
+		: {};
+
+	return {
+		style: {
+			fontSize: attributesObject.fontSize
+				? `var(--wp--preset--font-size--${ attributesObject.fontSize })`
+				: typography.fontSize,
+			lineHeight: typography.lineHeight,
+			fontWeight: typography.fontWeight,
+			textTransform: typography.textTransform,
+			fontFamily: attributesObject.fontFamily,
+		},
+	};
+};

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

@@ -7,3 +7,4 @@ export * from './get-valid-block-attributes';
 export * from './product-data';
 export * from './derive-selected-shipping-rates';
 export * from './get-icons-from-payment-methods';
+export * from './parse-style';

plugins/woocommerce-blocks/assets/js/base/utils/parse-style.ts

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import { isString, isObject } from '@woocommerce/types';
+
+export const parseStyle = ( style: unknown ): Record< string, unknown > => {
+	if ( isString( style ) ) {
+		return JSON.parse( style ) || {};
+	}
+
+	if ( isObject( style ) ) {
+		return style;
+	}
+
+	return {};
+};

plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.tsx

@@ -2,7 +2,11 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { usePrevious, useShallowEqual } from '@woocommerce/base-hooks';
+import {
+	usePrevious,
+	useShallowEqual,
+	useBorderProps,
+} from '@woocommerce/base-hooks';
 import {
 	useCollection,
 	useQueryStateByKey,
@@ -40,7 +44,6 @@ import classNames from 'classnames';
 import { getAttributeFromID } from '../../utils/attributes';
 import { updateAttributeFilter } from '../../utils/attributes-query';
 import { previewAttributeObject, previewOptions } from './preview';
-import { useBorderProps } from '../../hooks/style-attributes';
 import './style.scss';
 import {
 	formatParams,

plugins/woocommerce-blocks/assets/js/blocks/mini-cart/block.tsx

@@ -4,6 +4,7 @@
 import { renderParentBlock } from '@woocommerce/atomic-utils';
 import Drawer from '@woocommerce/base-components/drawer';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useTypographyProps } from '@woocommerce/base-hooks';
 import { translateJQueryEventToNative } from '@woocommerce/base-utils';
 import { getRegisteredBlockComponents } from '@woocommerce/blocks-registry';
 import {
@@ -27,6 +28,7 @@ import {
 } from '@wordpress/element';
 import { sprintf, _n } from '@wordpress/i18n';
 import classnames from 'classnames';
+
 /**
  * Internal dependencies
  */
@@ -34,7 +36,6 @@ import QuantityBadge from './quantity-badge';
 import { MiniCartContentsBlock } from './mini-cart-contents/block';
 import './style.scss';
 import { blockName } from './mini-cart-contents/attributes';
-import { useTypographyProps } from '../../hooks/style-attributes';
 
 interface Props {
 	isInitiallyOpen?: boolean;

plugins/woocommerce-blocks/assets/js/blocks/mini-cart/edit.tsx

@@ -13,12 +13,12 @@ import {
 import { getSetting } from '@woocommerce/settings';
 import { __ } from '@wordpress/i18n';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
+import { useTypographyProps } from '@woocommerce/base-hooks';
 
 /**
  * Internal dependencies
  */
 import QuantityBadge from './quantity-badge';
-import { useTypographyProps } from '../../hooks/style-attributes';
 
 interface Attributes {
 	addToCartBehaviour: string;

plugins/woocommerce-blocks/assets/js/hooks/style-attributes.ts

@@ -1,101 +0,0 @@
-/* eslint-disable @wordpress/no-unsafe-wp-apis */
-/**
- * External dependencies
- */
-import {
-	__experimentalUseColorProps,
-	__experimentalGetSpacingClassesAndStyles,
-	__experimentalUseBorderProps,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { isFeaturePluginBuild } from '../settings/blocks/feature-flags';
-import { isString, isObject } from '../types/type-guards';
-import { hasSpacingStyleSupport } from '../utils/global-style';
-
-type WithClass = {
-	className: string;
-};
-
-type WithStyle = {
-	style: Record< string, unknown >;
-};
-
-const parseStyle = ( style: unknown ): Record< string, unknown > => {
-	if ( isString( style ) ) {
-		return JSON.parse( style ) || {};
-	}
-
-	if ( isObject( style ) ) {
-		return style;
-	}
-
-	return {};
-};
-
-export const useSpacingProps = ( attributes: unknown ): WithStyle => {
-	if ( ! isFeaturePluginBuild() || ! hasSpacingStyleSupport() ) {
-		return {
-			style: {},
-		};
-	}
-	const attributesObject = isObject( attributes ) ? attributes : {};
-	const style = parseStyle( attributesObject.style );
-
-	return __experimentalGetSpacingClassesAndStyles( {
-		...attributesObject,
-		style,
-	} );
-};
-
-export const useTypographyProps = ( attributes: unknown ): WithStyle => {
-	const attributesObject = isObject( attributes ) ? attributes : {};
-	const style = parseStyle( attributesObject.style );
-	const typography = isObject( style.typography )
-		? ( style.typography as Record< string, unknown > )
-		: {};
-
-	return {
-		style: {
-			fontSize: attributesObject.fontSize
-				? `var(--wp--preset--font-size--${ attributesObject.fontSize })`
-				: typography.fontSize,
-			lineHeight: typography.lineHeight,
-			fontWeight: typography.fontWeight,
-			textTransform: typography.textTransform,
-			fontFamily: attributesObject.fontFamily,
-		},
-	};
-};
-
-export const useColorProps = ( attributes: unknown ): WithStyle & WithClass => {
-	if ( ! isFeaturePluginBuild() ) {
-		return {
-			className: '',
-			style: {},
-		};
-	}
-
-	const attributesObject = isObject( attributes ) ? attributes : {};
-	const style = parseStyle( attributesObject.style );
-
-	return __experimentalUseColorProps( { ...attributesObject, style } );
-};
-
-export const useBorderProps = (
-	attributes: unknown
-): WithStyle & WithClass => {
-	if ( ! isFeaturePluginBuild() ) {
-		return {
-			className: '',
-			style: {},
-		};
-	}
-
-	const attributesObject = isObject( attributes ) ? attributes : {};
-	const style = parseStyle( attributesObject.style );
-
-	return __experimentalUseBorderProps( { ...attributesObject, style } );
-};