Add global style for Product Categories List block

assets/js/blocks/product-categories/block.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
 import PropTypes from 'prop-types';
 import {
@@ -183,8 +183,12 @@ const ProductCategoriesBlock = ( { attributes, setAttributes, name } ) => {
 		);
 	};
 
+	const blockProps = useBlockProps( {
+		className: 'wc-block-product-categories',
+	} );
+
 	return (
-		<>
+		<div { ...blockProps }>
 			{ getInspectorControls() }
 			<Disabled>
 				<ServerSideRender
@@ -193,7 +197,7 @@ const ProductCategoriesBlock = ( { attributes, setAttributes, name } ) => {
 					EmptyResponsePlaceholder={ EmptyPlaceholder }
 				/>
 			</Disabled>
-		</>
+		</div>
 	);
 };
 

assets/js/blocks/product-categories/index.js

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { createBlock, registerBlockType } from '@wordpress/blocks';
 import { Icon, list } from '@woocommerce/icons';
 
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 /**
  * Internal dependencies
  */
@@ -13,6 +14,7 @@ import './style.scss';
 import Block from './block.js';
 
 registerBlockType( 'woocommerce/product-categories', {
+	apiVersion: 2,
 	title: __( 'Product Categories List', 'woo-gutenberg-products-block' ),
 	icon: {
 		src: <Icon srcElement={ list } />,
@@ -27,6 +29,16 @@ registerBlockType( 'woocommerce/product-categories', {
 	supports: {
 		align: [ 'wide', 'full' ],
 		html: false,
+		...( isFeaturePluginBuild() && {
+			color: {
+				background: false,
+				link: true,
+			},
+			typography: {
+				fontSize: true,
+				lineHeight: true,
+			},
+		} ),
 	},
 	example: {
 		attributes: {

src/BlockTypes/ProductCategories.php

@@ -1,11 +1,14 @@
 <?php
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
 /**
  * ProductCategories class.
  */
 class ProductCategories extends AbstractDynamicBlock {
 
+
 	/**
 	 * Block name.
 	 *
@@ -42,6 +45,10 @@ protected function get_block_type_attributes() {
 				'hasEmpty'       => $this->get_schema_boolean( false ),
 				'isDropdown'     => $this->get_schema_boolean( false ),
 				'isHierarchical' => $this->get_schema_boolean( true ),
+				'textColor'      => $this->get_schema_string(),
+				'fontSize'       => $this->get_schema_string(),
+				'lineHeight'     => $this->get_schema_string(),
+				'style'          => array( 'type' => 'object' ),
 			)
 		);
 	}
@@ -77,9 +84,11 @@ protected function render( $attributes, $content ) {
 			}
 		}
 
-		$classes = $this->get_container_classes( $attributes );
+		$classes_and_styles = $this->get_container_classes_and_styles( $attributes );
+		$classes            = $classes_and_styles[0];
+		$styles             = $classes_and_styles[1];
 
-		$output  = '<div class="' . esc_attr( $classes ) . '">';
+		$output  = '<div class="wp-block-woocommerce-product-categories ' . esc_attr( $classes ) . '" style="' . esc_attr( $styles ) . '">';
 		$output .= ! empty( $attributes['isDropdown'] ) ? $this->renderDropdown( $categories, $attributes, $uid ) : $this->renderList( $categories, $attributes, $uid );
 		$output .= '</div>';
 
@@ -90,9 +99,10 @@ protected function render( $attributes, $content ) {
 	 * Get the list of classes to apply to this block.
 	 *
 	 * @param array $attributes Block attributes. Default empty array.
-	 * @return string space-separated list of classes.
+	 * @return array space-separated list of classes and space-separated list of inline styles.
 	 */
-	protected function get_container_classes( $attributes = array() ) {
+	protected function get_container_classes_and_styles( $attributes = array() ) {
+
 		$classes = array( 'wc-block-product-categories' );
 
 		if ( isset( $attributes['align'] ) ) {
@@ -109,7 +119,30 @@ protected function get_container_classes( $attributes = array() ) {
 			$classes[] = 'is-list';
 		}
 
-		return implode( ' ', $classes );
+		$line_height_class_and_style = StyleAttributesUtils::get_line_height_class_and_style( $attributes );
+		$text_color_class_and_style  = StyleAttributesUtils::get_text_color_class_and_style( $attributes );
+		$font_size_class_and_style   = StyleAttributesUtils::get_font_size_class_and_style( $attributes );
+
+		$line_height_class = isset( $line_height_class_and_style['class'] ) ? $line_height_class_and_style['class'] : null;
+		$text_color_class  = isset( $text_color_class_and_style['class'] ) ? $text_color_class_and_style['class'] : null;
+		$font_size_class   = isset( $font_size_class_and_style['class'] ) ? $font_size_class_and_style['class'] : null;
+
+		$classes = array_filter(
+			array( $line_height_class, $text_color_class, $font_size_class )
+		);
+
+		$line_height_style = isset( $line_height_class_and_style['style'] ) ? $line_height_class_and_style['style'] : null;
+		$text_color_style  = isset( $text_color_class_and_style['style'] ) ? $text_color_class_and_style['style'] : null;
+		$font_size_style   = isset( $font_size_class_and_style['style'] ) ? $font_size_class_and_style['style'] : null;
+
+		$styles = array_filter(
+			array( $line_height_style, $text_color_style, $font_size_style )
+		);
+
+		$string_classes = implode( ' ', $classes );
+		$string_styles  = implode( ' ', $styles );
+
+		return array( $string_classes, $string_styles );
 	}
 
 	/**
@@ -301,11 +334,15 @@ protected function renderList( $categories, $attributes, $uid, $depth = 0 ) {
 	protected function renderListItems( $categories, $attributes, $uid, $depth = 0 ) {
 		$output = '';
 
+		$link_color_class_and_style = StyleAttributesUtils::get_link_color_class_and_style( $attributes );
+
+		$link_color_style = isset( $link_color_class_and_style['style'] ) ? $link_color_class_and_style['style'] : '';
+
 		foreach ( $categories as $category ) {
 			$output .= '
 				<li class="wc-block-product-categories-list-item">
-					<a href="' . esc_attr( get_term_link( $category->term_id, 'product_cat' ) ) . '">' . $this->get_image_html( $category, $attributes ) . esc_html( $category->name ) . '</a>
-					' . $this->getCount( $category, $attributes ) . '
+					<a style="' . esc_attr( $link_color_style ) . '" href="' . esc_attr( get_term_link( $category->term_id, 'product_cat' ) ) . '">' . $this->get_image_html( $category, $attributes ) . esc_html( $category->name ) . '</a>
+				' . $this->getCount( $category, $attributes ) . '
 					' . ( ! empty( $category->children ) ? $this->renderList( $category->children, $attributes, $uid, $depth + 1 ) : '' ) . '
 				</li>
 			';

src/Utils/StyleAttributesUtils.php

@@ -0,0 +1,160 @@
+<?php
+namespace Automattic\WooCommerce\Blocks\Utils;
+
+/**
+ * StyleAttributesUtils class used for getting class and style from attributes.
+ */
+class StyleAttributesUtils {
+
+
+	/**
+	 * Get class and style for font-size from attributes.
+	 *
+	 * @param array $attributes Block attributes.
+	 *
+	 * @return (array | null)
+	 */
+	public static function get_font_size_class_and_style( $attributes ) {
+
+		$font_size = $attributes['fontSize'];
+
+		$custom_font_size = isset( $attributes['style']['color']['fontSize'] ) ? $attributes['style']['color']['fontSize'] : null;
+
+		if ( ! isset( $font_size ) && ! isset( $custom_font_size ) ) {
+			return null;
+		};
+
+		$has_named_font_size  = ! empty( $font_size );
+		$has_custom_font_size = isset( $custom_font_size );
+
+		if ( $has_named_font_size ) {
+			return array(
+				'class' => sprintf( 'has-font-size has-%s-font-size', $font_size ),
+				'style' => null,
+			);
+		} elseif ( $has_custom_font_size ) {
+			return array(
+				'class' => null,
+				'style' => sprintf( 'font-size: %s;', $custom_font_size ),
+			);
+		}
+		return null;
+	}
+
+	/**
+	 * Get class and style for text-color from attributes.
+	 *
+	 * @param array $attributes Block attributes.
+	 *
+	 * @return (array | null)
+	 */
+	public static function get_text_color_class_and_style( $attributes ) {
+
+		$text_color = $attributes['textColor'];
+
+		$custom_text_color = isset( $attributes['style']['color']['text'] ) ? $attributes['style']['color']['text'] : null;
+
+		if ( ! isset( $text_color ) && ! isset( $custom_text_color ) ) {
+			return null;
+		};
+
+		$has_named_text_color  = ! empty( $text_color );
+		$has_custom_text_color = isset( $custom_text_color );
+
+		if ( $has_named_text_color ) {
+			return array(
+				'class' => sprintf( 'has-text-color has-%s-color', $text_color ),
+				'style' => null,
+			);
+		} elseif ( $has_custom_text_color ) {
+			return array(
+				'class' => null,
+				'style' => sprintf( 'color: %s;', $custom_text_color ),
+			);
+		}
+		return null;
+
+	}
+
+	/**
+	 * Get class and style for link-color from attributes.
+	 *
+	 * @param array $attributes Block attributes.
+	 *
+	 * @return (array | null)
+	 */
+	public static function get_link_color_class_and_style( $attributes ) {
+
+		if ( ! isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+			return null;
+		};
+
+		$link_color = $attributes['style']['elements']['link']['color']['text'];
+
+		// If the link color is selected from the theme color picker, the value of $link_color is var:preset|color|slug.
+		// If the link color is selected from the core color picker, the value of $link_color is an hex value.
+		// When the link color is a string var:preset|color|slug we parsed it for get the slug, otherwise we use the hex value.
+		$index_named_link_color = strrpos( $link_color, '|' );
+
+		if ( ! empty( $index_named_link_color ) ) {
+			$parsed_named_link_color = substr( $link_color, $index_named_link_color + 1 );
+			return array(
+				'class' => null,
+				'style' => sprintf( 'color: %s;', $parsed_named_link_color ),
+			);
+		} else {
+			return array(
+				'class' => null,
+				'style' => sprintf( 'color: %s;', $link_color ),
+			);
+		}
+
+	}
+
+
+	/**
+	 * Get class and style for line height from attributes.
+	 *
+	 * @param array $attributes Block attributes.
+	 *
+	 * @return (array | null)
+	 */
+	public static function get_line_height_class_and_style( $attributes ) {
+
+		$line_height = isset( $attributes['style']['color']['lineHeight'] ) ? $attributes['style']['color']['lineHeight'] : null;
+
+		if ( ! isset( $line_height ) ) {
+			return null;
+		};
+
+		$line_height_style = sprintf( 'line-height: %s;', $line_height );
+
+		return array(
+			'class' => null,
+			'style' => $line_height_style,
+		);
+	}
+
+	/**
+	 * Get classes and styles from attributes.
+	 *
+	 * @param array $attributes Block attributes.
+	 *
+	 * @return array
+	 */
+	public static function get_classes_and_styles_by_attributes( $attributes ) {
+		$classes_and_styles = array(
+			line_height => self::get_line_height_class_and_style( $attributes ),
+			text_color  => self::get_text_color_class_and_style( $attributes ),
+			font_size   => self::get_font_size_class_and_style( $attributes ),
+			link_color  => self::get_link_color_class_and_style( $attributes ),
+		);
+
+		return array_filter(
+			$classes_and_styles
+		);
+
+	}
+
+
+}