From f2dad05e0dae20b7004d9e1033aaf8addc870eaf Mon Sep 17 00:00:00 2001
From: Luigi Teschio <gigitux@gmail.com>
Date: Mon, 14 Feb 2022 11:29:17 +0100
Subject: [PATCH] Category List block: add support for global style
 (https://github.com/woocommerce/woocommerce-blocks/pull/5516)

* Product title: add support global style woocommerce/woocommerce-blocks#4965

* add specific type

* Enable global style for category list block woocommerce/woocommerce-blocks#4965

Enable global style for category list block

* fix import after merge

* add save function

* add feature flag
---
 .../product-elements/category-list/block.tsx  | 12 ++++++++++-
 .../product-elements/category-list/edit.tsx   |  7 +++++--
 .../product-elements/category-list/index.ts   | 20 +++++++++++++++++-
 .../product-elements/category-list/save.tsx   | 21 +++++++++++++++++++
 4 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/save.tsx

diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/block.tsx
index 59a4dd628fe..3fc4bbe8c44 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/block.tsx
@@ -16,6 +16,10 @@ import { HTMLAttributes } from 'react';
  */
 import './style.scss';
 import { Attributes } from './types';
+import {
+	useColorProps,
+	useTypographyProps,
+} from '../../../../hooks/style-attributes';
 
 type Props = Attributes & HTMLAttributes< HTMLDivElement >;
 
@@ -26,10 +30,14 @@ type Props = Attributes & HTMLAttributes< HTMLDivElement >;
  * @param {string} [props.className] CSS Class name for the component.
  * @return {*} The component.
  */
-const Block = ( { className }: Props ): JSX.Element | null => {
+const Block = ( props: Props ): JSX.Element | null => {
+	const { className } = props;
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 
+	const colorProps = useColorProps( props );
+	const typographyProps = useTypographyProps( props );
+
 	if ( isEmpty( product.categories ) ) {
 		return null;
 	}
@@ -39,10 +47,12 @@ const Block = ( { className }: Props ): JSX.Element | null => {
 			className={ classnames(
 				className,
 				'wc-block-components-product-category-list',
+				colorProps.className,
 				{
 					[ `${ parentClassName }__product-category-list` ]: parentClassName,
 				}
 			) }
+			style={ { ...colorProps.style, ...typographyProps.style } }
 		>
 			{ __( 'Categories:', 'woo-gutenberg-products-block' ) }{ ' ' }
 			<ul>
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/edit.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/edit.tsx
index d3f8266c562..eae09bc5581 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/edit.tsx
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { Disabled } from '@wordpress/components';
 import EditProductLink from '@woocommerce/editor-components/edit-product-link';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -18,13 +19,15 @@ interface Props {
 }
 
 const Edit = ( { attributes }: Props ): JSX.Element => {
+	const blockProps = useBlockProps();
+
 	return (
-		<>
+		<div { ...blockProps }>
 			<EditProductLink />
 			<Disabled>
 				<Block { ...attributes } />
 			</Disabled>
-		</>
+		</div>
 	);
 };
 
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/index.ts b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/index.ts
index 09b7734f3d7..df526ff6c74 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/index.ts
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/index.ts
@@ -1,7 +1,10 @@
 /**
  * External dependencies
  */
-import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+import {
+	isFeaturePluginBuild,
+	registerExperimentalBlockType,
+} from '@woocommerce/block-settings';
 import { BlockConfiguration } from '@wordpress/blocks';
 
 /**
@@ -15,13 +18,28 @@ import {
 	BLOCK_ICON as icon,
 	BLOCK_DESCRIPTION as description,
 } from './constants';
+import { Save } from './save';
 
 const blockConfig: BlockConfiguration = {
 	...sharedConfig,
+	apiVersion: 2,
 	title,
 	description,
 	icon: { src: icon },
 	attributes,
+	supports: {
+		...( isFeaturePluginBuild() && {
+			color: {
+				text: true,
+				link: true,
+				background: false,
+			},
+		} ),
+		typography: {
+			fontSize: true,
+		},
+	},
+	save: Save,
 	edit,
 };
 
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/save.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/save.tsx
new file mode 100644
index 00000000000..11135ed1bb2
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/save.tsx
@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { useBlockProps } from '@wordpress/block-editor';
+
+type Props = {
+	attributes: Record< string, unknown > & {
+		className: string;
+	};
+};
+
+export const Save = ( { attributes }: Props ): JSX.Element => {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: classnames( 'is-loading', attributes.className ),
+			} ) }
+		/>
+	);
+};