diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/block.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/block.js
index 2c493568973..685dec13502 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/block.js
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/block.js
@@ -15,6 +15,10 @@ import { withProductDataContext } from '@woocommerce/shared-hocs';
* Internal dependencies
*/
import './style.scss';
+import {
+ useColorProps,
+ useTypographyProps,
+} from '../../../../hooks/style-attributes';
/**
* Product Tag List Block Component.
@@ -23,9 +27,12 @@ import './style.scss';
* @param {string} [props.className] CSS Class name for the component.
* @return {*} The component.
*/
-const Block = ( { className } ) => {
+const Block = ( props ) => {
+ const { className } = props;
const { parentClassName } = useInnerBlockLayoutContext();
const { product } = useProductDataContext();
+ const colorProps = useColorProps( props );
+ const typographyProps = useTypographyProps( props );
if ( isEmpty( product.tags ) ) {
return null;
@@ -35,11 +42,13 @@ const Block = ( { className } ) => {
{ __( 'Tags:', 'woo-gutenberg-products-block' ) }{ ' ' }
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/edit.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/edit.js
index 0c684e83c72..b58ecf958cc 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/edit.js
@@ -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
@@ -13,13 +14,14 @@ import withProductSelector from '../shared/with-product-selector';
import { BLOCK_TITLE, BLOCK_ICON } from './constants';
const Edit = ( { attributes } ) => {
+ const blockProps = useBlockProps();
return (
- <>
+
- >
+
);
};
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/index.js
index 102cd643277..aef3f9c8049 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/index.js
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/index.js
@@ -14,13 +14,18 @@ import {
BLOCK_ICON as icon,
BLOCK_DESCRIPTION as description,
} from './constants';
+import { Save } from './save';
+import { supports } from './supports';
const blockConfig = {
+ apiVersion: 2,
title,
description,
icon: { src: icon },
attributes,
+ supports,
edit,
+ save: Save,
};
registerExperimentalBlockType( 'woocommerce/product-tag-list', {
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/save.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/save.tsx
new file mode 100644
index 00000000000..03a720e27df
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/save.tsx
@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+
+type Props = {
+ attributes: Record< string, unknown > & {
+ className?: string;
+ };
+};
+
+export const Save = ( { attributes }: Props ): JSX.Element => {
+ return (
+
+ );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/supports.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/supports.js
new file mode 100644
index 00000000000..324ff82f9a1
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/supports.js
@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+export const supports = {
+ ...( isFeaturePluginBuild() && {
+ color: {
+ text: true,
+ background: false,
+ link: true,
+ },
+ } ),
+ typography: {
+ fontSize: true,
+ },
+};