Adds product query support for Category list block (#7675)

* Adds product query support for Category list block

On the client side, when the Category list block is used within the
product query bloc, the markup will be rendered on the server side -
No javascript related to Category list block will be rendered.

* bot: update checkstyle.xml

* Fix extra space after the category link

I used the solution from following link: https://css-tricks.com/fighting-the-space-between-inline-block-elements/#aa-remove-the-spaces

Here is the content from the above link:

The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, or one of these tricks:

```CSS
<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>
```

or

```CSS
<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>
```

or with comments…

```CSS
<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>
```

They’re all pretty funky, but it does the trick.

* Fix custom style doesn't work on the frontend side

For more info, check this comment on the PR:
#7675 (review)

In summary, user can set the custom styles like text color, link color, font size, font weight, line height using the editor sidebar.
These styles weren't showing on the frontend side.

* Add support for additional CSS class(es)

* Fix "custom style -> link color" not working

To understand the issue in more details please check following comment:
#7675 (comment)

* Fix classname undefined issue

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

assets/js/atomic/blocks/product-elements/category-list/attributes.ts

@@ -3,6 +3,10 @@ export const blockAttributes: Record< string, Record< string, unknown > > = {
 		type: 'number',
 		default: 0,
 	},
+	isDescendentOfQueryLoop: {
+		type: 'boolean',
+		default: false,
+	},
 };
 
 export default blockAttributes;

assets/js/atomic/blocks/product-elements/category-list/edit.tsx

@@ -2,9 +2,12 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import type { BlockEditProps } from '@wordpress/blocks';
+import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';
 import { Disabled } from '@wordpress/components';
 import EditProductLink from '@woocommerce/editor-components/edit-product-link';
 import { useBlockProps } from '@wordpress/block-editor';
+import { useEffect } from 'react';
 
 /**
  * Internal dependencies
@@ -14,18 +17,29 @@ import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 import { Attributes } from './types';
 
-interface Props {
-	attributes: Attributes;
-}
-
-const Edit = ( { attributes }: Props ): JSX.Element => {
+const Edit = ( {
+	attributes,
+	setAttributes,
+	context,
+}: BlockEditProps< Attributes > & { context: Context } ): JSX.Element => {
 	const blockProps = useBlockProps();
 
+	const blockAttrs = {
+		...attributes,
+		...context,
+	};
+	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
+
+	useEffect(
+		() => setAttributes( { isDescendentOfQueryLoop } ),
+		[ setAttributes, isDescendentOfQueryLoop ]
+	);
+
 	return (
 		<div { ...blockProps }>
 			<EditProductLink />
 			<Disabled>
-				<Block { ...attributes } />
+				<Block { ...blockAttrs } />
 			</Disabled>
 		</div>
 	);

assets/js/atomic/blocks/product-elements/category-list/index.ts

@@ -18,7 +18,6 @@ import {
 	BLOCK_ICON as icon,
 	BLOCK_DESCRIPTION as description,
 } from './constants';
-import { Save } from './save';
 
 const blockConfig: BlockConfiguration = {
 	...sharedConfig,
@@ -27,13 +26,18 @@ const blockConfig: BlockConfiguration = {
 	description,
 	icon: { src: icon },
 	attributes,
+	usesContext: [ 'query', 'queryId', 'postId' ],
+	ancestor: [
+		'@woocommerce/all-products',
+		'@woocommerce/single-product',
+		'core/post-template',
+	],
 	supports: {
 		...( isFeaturePluginBuild() && {
 			color: {
 				text: true,
 				link: true,
 				background: false,
-				__experimentalSkipSerialization: true,
 			},
 			typography: {
 				fontSize: true,
@@ -46,7 +50,6 @@ const blockConfig: BlockConfiguration = {
 				'.wc-block-components-product-category-list',
 		} ),
 	},
-	save: Save,
 	edit,
 };
 

assets/js/atomic/blocks/product-elements/category-list/types.ts

@@ -1,3 +1,4 @@
 export interface Attributes {
 	productId: number;
+	isDescendentOfQueryLoop: boolean;
 }

checkstyle.xml

@@ -1405,17 +1405,10 @@
   Object literal may only specify known properties, and 'ancestor' does not exist in type 'BlockConfiguration<{}>'." source="TS2322" />
 </file>
 <file name="assets/js/atomic/blocks/product-elements/category-list/index.ts">
-<error line="36" column="5" severity="error" message="Type &apos;{ color?: { text: true; link: true; background: false; __experimentalSkipSerialization: true; }; typography?: { fontSize: true; lineHeight: true; __experimentalFontStyle: true; __experimentalFontWeight: true; __experimentalSkipSerialization: true; }; __experimentalSelector?: string; }&apos; is not assignable to type &apos;BlockSupports&apos;.
+<error line="41" column="5" severity="error" message="Type &apos;{ color?: { text: true; link: true; background: false; __experimentalSkipSerialization: true; }; typography?: { fontSize: true; lineHeight: true; __experimentalFontStyle: true; __experimentalFontWeight: true; __experimentalSkipSerialization: true; }; __experimentalSelector?: string; }&apos; is not assignable to type &apos;BlockSupports&apos;.
   Types of property &apos;color&apos; are incompatible.
     Type &apos;{ text: true; link: true; background: false; __experimentalSkipSerialization: true; }&apos; is not assignable to type &apos;Partial&lt;ColorProps&gt;&apos;.
       Object literal may only specify known properties, and &apos;__experimentalSkipSerialization&apos; does not exist in type &apos;Partial&lt;ColorProps&gt;&apos;." source="TS2322" />
-<error line="49" column="2" severity="error" message="Type &apos;({ attributes }: Props) =&gt; JSX.Element&apos; is not assignable to type &apos;ComponentType&lt;BlockSaveProps&lt;{}&gt;&gt;&apos;.
-  Type &apos;({ attributes }: Props) =&gt; JSX.Element&apos; is not assignable to type &apos;FunctionComponent&lt;BlockSaveProps&lt;{}&gt;&gt;&apos;.
-    Types of parameters &apos;__0&apos; and &apos;props&apos; are incompatible.
-      Type &apos;PropsWithChildren&lt;BlockSaveProps&lt;{}&gt;&gt;&apos; is not assignable to type &apos;Props&apos;.
-        Types of property &apos;attributes&apos; are incompatible.
-          Type &apos;Readonly&lt;{}&gt;&apos; is not assignable to type &apos;Record&lt;string, unknown&gt; &amp; { className: string; }&apos;.
-            Property &apos;className&apos; is missing in type &apos;Readonly&lt;{}&gt;&apos; but required in type &apos;{ className: string; }&apos;." source="TS2322" />
 </file>
 <file name="assets/js/atomic/blocks/product-elements/add-to-cart/edit.js">
 <error line="25" column="18" severity="error" message="Binding element &apos;attributes&apos; implicitly has an &apos;any&apos; type." source="TS7031" />

src/BlockTypes/ProductCategoryList.php

@@ -1,6 +1,8 @@
 <?php
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
 /**
  * ProductCategoryList class.
  */
@@ -31,10 +33,9 @@ protected function get_block_type_supports() {
 		return array(
 			'color'                  =>
 			array(
-				'text'                            => true,
-				'link'                            => true,
-				'background'                      => false,
-				'__experimentalSkipSerialization' => true,
+				'text'       => true,
+				'link'       => true,
+				'background' => false,
 			),
 			'typography'             =>
 			array(
@@ -48,12 +49,59 @@ protected function get_block_type_supports() {
 	}
 
 	/**
-	 * Register script and style assets for the block type before it is registered.
+	 * Overwrite parent method to prevent script registration.
 	 *
-	 * This registers the scripts; it does not enqueue them.
+	 * It is necessary to register and enqueues assets during the render
+	 * phase because we want to load assets only if the block has the content.
 	 */
 	protected function register_block_type_assets() {
-		parent::register_block_type_assets();
-		$this->register_chunk_translations( [ $this->block_name ] );
+		return null;
+	}
+
+	/**
+	 * Register the context.
+	 */
+	protected function get_block_type_uses_context() {
+		return [ 'query', 'queryId', 'postId' ];
+	}
+
+	/**
+	 * Include and render the block.
+	 *
+	 * @param array    $attributes Block attributes. Default empty array.
+	 * @param string   $content    Block content. Default empty string.
+	 * @param WP_Block $block      Block instance.
+	 * @return string Rendered block type output.
+	 */
+	protected function render( $attributes, $content, $block ) {
+		if ( ! empty( $content ) ) {
+			parent::register_block_type_assets();
+			$this->register_chunk_translations( [ $this->block_name ] );
+			return $content;
+		}
+
+		$post_id                  = $block->context['postId'];
+		$product                  = wc_get_product( $post_id );
+		$product_categories_terms = get_the_terms( $product->get_id(), 'product_cat' );
+
+		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
+		$classname          = isset( $attributes['className'] ) ? $attributes['className'] : '';
+
+		$output  = '';
+		$output .= '
+			<div class="wc-block-components-product-category-list ' . $classes_and_styles['classes'] . ' ' . $classname . '" style="' . $classes_and_styles['styles'] . '"">
+				' . __( 'Categories:', 'woo-gutenberg-products-block' )
+				. '<ul>';
+
+		foreach ( $product_categories_terms as $product_category_term ) {
+			$output .= '
+				<li class="category-list-item-' . $product_category_term->slug . '">
+					<a href="' . get_term_link( $product_category_term->term_id ) . '">' . $product_category_term->name . '</a></li>
+			';
+		}
+
+		$output .= '</ul> </div>';
+
+		return $output;
 	}
 }