Add product query support for Product Summary block (#7774)

* Add product query support for Product Summary block

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

* Update variable names for clarity & readability

* Escape all values in output string

* Fix custom style not working

More info: #7774 (comment)

assets/js/atomic/blocks/product-elements/summary/attributes.ts

@@ -10,6 +10,10 @@ export const blockAttributes: BlockAttributes = {
 		type: 'number',
 		default: 0,
 	},
+	isDescendentOfQueryLoop: {
+		type: 'boolean',
+		default: false,
+	},
 };
 
 export default blockAttributes;

assets/js/atomic/blocks/product-elements/summary/edit.tsx

@@ -2,6 +2,9 @@
  * External dependencies
  */
 import { useBlockProps } from '@wordpress/block-editor';
+import type { BlockEditProps } from '@wordpress/blocks';
+import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';
+import { useEffect } from 'react';
 
 /**
  * Internal dependencies
@@ -16,15 +19,27 @@ import {
 import './editor.scss';
 import type { BlockAttributes } from './types';
 
-interface Props {
-	attributes: BlockAttributes;
-}
-
-const Edit = ( { attributes }: Props ): JSX.Element => {
+const Edit = ( {
+	attributes,
+	setAttributes,
+	context,
+}: BlockEditProps< BlockAttributes > & { 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 }>
-			<Block { ...attributes } />
+			<Block { ...blockAttrs } />
 		</div>
 	);
 };

assets/js/atomic/blocks/product-elements/summary/index.ts

@@ -16,7 +16,6 @@ import {
 	BLOCK_ICON as icon,
 	BLOCK_DESCRIPTION as description,
 } from './constants';
-import { Save } from './save';
 
 const blockConfig: BlockConfiguration = {
 	...sharedConfig,
@@ -27,7 +26,12 @@ const blockConfig: BlockConfiguration = {
 	attributes,
 	supports,
 	edit,
-	save: Save,
+	usesContext: [ 'query', 'queryId', 'postId' ],
+	ancestor: [
+		'@woocommerce/all-products',
+		'@woocommerce/single-product',
+		'core/post-template',
+	],
 };
 
 registerBlockType( 'woocommerce/product-summary', blockConfig );

assets/js/atomic/blocks/product-elements/summary/types.ts

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

src/BlockTypes/ProductSummary.php

@@ -1,6 +1,8 @@
 <?php
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
 /**
  * ProductSummary class.
  */
@@ -51,5 +53,71 @@ protected function get_block_type_supports() {
 	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 );
+		$summary_content = self::get_summary_content( $product );
+
+		if ( ! $summary_content ) {
+			return '';
+		}
+
+		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
+		$classname          = isset( $attributes['className'] ) ? $attributes['className'] : '';
+
+		$output = '<div class="wc-block-components-product-summary '
+			. esc_attr( $classes_and_styles['classes'] ) . ' ' . esc_attr( $classname ) . '"';
+
+		if ( isset( $classes_and_styles['styles'] ) ) {
+			$output .= ' style="' . esc_attr( $classes_and_styles['styles'] ) . '"';
+		}
+
+		$output .= '>';
+		$output .= '<p>' . wp_kses_post( $summary_content ) . '</p>';
+		$output .= '</div>';
+
+		return $output;
+	}
+
+	/**
+	 * Returns summary text for a product.
+	 *
+	 * @param [WC_Product] $product Product to get summary text for.
+	 * @return (string|null) Summary text for the product.
+	 */
+	protected function get_summary_content( $product ) {
+		$short_description = $product->get_short_description();
+		$summary_content   = $short_description ? $short_description : $product->get_description();
+
+		if ( ! $summary_content ) {
+			return null;
+		}
+
+		$summary = wc_trim_string( $summary_content, 150 );
+		return $summary;
 	}
 }