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

…7819)

This reverts commit 222c977.

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

@@ -3,10 +3,6 @@ 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,12 +2,9 @@
  * 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
@@ -17,29 +14,18 @@ import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 import { Attributes } from './types';
 
-const Edit = ( {
-	attributes,
-	setAttributes,
-	context,
-}: BlockEditProps< Attributes > & { context: Context } ): JSX.Element => {
-	const blockProps = useBlockProps();
-
-	const blockAttrs = {
-		...attributes,
-		...context,
-	};
-	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
+interface Props {
+	attributes: Attributes;
+}
 
-	useEffect(
-		() => setAttributes( { isDescendentOfQueryLoop } ),
-		[ setAttributes, isDescendentOfQueryLoop ]
-	);
+const Edit = ( { attributes }: Props ): JSX.Element => {
+	const blockProps = useBlockProps();
 
 	return (
 		<div { ...blockProps }>
 			<EditProductLink />
 			<Disabled>
-				<Block { ...blockAttrs } />
+				<Block { ...attributes } />
 			</Disabled>
 		</div>
 	);

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

@@ -18,6 +18,7 @@ import {
 	BLOCK_ICON as icon,
 	BLOCK_DESCRIPTION as description,
 } from './constants';
+import { Save } from './save';
 
 const blockConfig: BlockConfiguration = {
 	...sharedConfig,
@@ -26,18 +27,13 @@ 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,
@@ -50,6 +46,7 @@ const blockConfig: BlockConfiguration = {
 				'.wc-block-components-product-category-list',
 		} ),
 	},
+	save: Save,
 	edit,
 };
 

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 ),
+			} ) }
+		/>
+	);
+};

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

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

checkstyle.xml

@@ -1405,10 +1405,17 @@
   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="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;.
+<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;.
   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,8 +1,6 @@
 <?php
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
-use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
-
 /**
  * ProductCategoryList class.
  */
@@ -33,9 +31,10 @@ protected function get_block_type_supports() {
 		return array(
 			'color'                  =>
 			array(
-				'text'       => true,
-				'link'       => true,
-				'background' => false,
+				'text'                            => true,
+				'link'                            => true,
+				'background'                      => false,
+				'__experimentalSkipSerialization' => true,
 			),
 			'typography'             =>
 			array(
@@ -49,64 +48,12 @@ protected function get_block_type_supports() {
 	}
 
 	/**
-	 * Overwrite parent method to prevent script registration.
+	 * Register script and style assets for the block type before it is registered.
 	 *
-	 * 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.
+	 * This registers the scripts; it does not enqueue them.
 	 */
 	protected function register_block_type_assets() {
-		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 '
-				. esc_attr( $classes_and_styles['classes'] ) . ' '
-				. esc_attr( $classname ) . '" '
-				. 'style="' . esc_attr( $classes_and_styles['styles'] ) . '">'
-					. __( 'Categories:', 'woo-gutenberg-products-block' )
-					. '<ul>';
-
-		foreach ( $product_categories_terms as $product_category_term ) {
-			$output .= '
-				<li class="category-list-item-' . esc_attr( $product_category_term->slug ) . '">
-					<a href="' . esc_url( get_term_link( $product_category_term->term_id ) ) . '">'
-						. esc_html( $product_category_term->name )
-				. '</a>'
-			. '</li>';
-		}
-
-		$output .= '</ul></div>';
-
-		return $output;
+		parent::register_block_type_assets();
+		$this->register_chunk_translations( [ $this->block_name ] );
 	}
 }