Add Product Query Support for Atomic Price Block (https://github.com/woocommerce/woocommerce-blocks/pull/7199)

* Add attributes, settings, and editor PQ settings.

- Adds isDescendentOfQueryLoop attribute and sets up usage in editor.
- Connects Context (via useContext) in editor.
- Sets up necessary hierarchy in block index file settings.

* Add server-side rendered product price.

Adds the SSR output for the atomic Price block for PQ support.

* Remove Save attribute from JS index.

To allow for the block to be SSR, we need to remove the Save
attrubite/function on the JS side and allow for the PHP class to handle
it on the backend.

* Update PHP asset register method for added clarity

* Adjust block attr/context spreading for clarity.

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/attributes.js

@@ -8,6 +8,10 @@ let blockAttributes = {
 		type: 'number',
 		default: 0,
 	},
+	isDescendentOfQueryLoop: {
+		type: 'boolean',
+		default: false,
+	},
 };
 
 if ( isFeaturePluginBuild() ) {

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/edit.js

@@ -8,6 +8,7 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { useEffect } from 'react';
 
 /**
  * Internal dependencies
@@ -16,8 +17,19 @@ import Block from './block';
 import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 
-const PriceEdit = ( { attributes, setAttributes } ) => {
+const PriceEdit = ( { attributes, setAttributes, context } ) => {
 	const blockProps = useBlockProps();
+	const blockAttrs = {
+		...attributes,
+		...context,
+	};
+	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
+
+	useEffect(
+		() => setAttributes( { isDescendentOfQueryLoop } ),
+		[ setAttributes, isDescendentOfQueryLoop ]
+	);
+
 	return (
 		<>
 			<BlockControls>
@@ -31,7 +43,7 @@ const PriceEdit = ( { attributes, setAttributes } ) => {
 				) }
 			</BlockControls>
 			<div { ...blockProps }>
-				<Block { ...attributes } />
+				<Block { ...blockAttrs } />
 			</div>
 		</>
 	);

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/index.js

@@ -9,7 +9,6 @@ import { registerBlockType } from '@wordpress/blocks';
  */
 import sharedConfig from '../shared/config';
 import edit from './edit';
-import { Save } from './save';
 import attributes from './attributes';
 import {
 	BLOCK_TITLE as title,
@@ -22,10 +21,16 @@ const blockConfig = {
 	apiVersion: 2,
 	title,
 	description,
+	parent: [ 'core/group' ],
+	ancestor: [
+		'@woocommerce/all-products',
+		'@woocommerce/single-product',
+		'core/post-template',
+	],
+	usesContext: [ 'query', 'queryId', 'postId' ],
 	icon: { src: icon },
 	attributes,
 	edit,
-	save: Save,
 	supports: {
 		...sharedConfig.supports,
 		...( isFeaturePluginBuild() && {

plugins/woocommerce-blocks/src/BlockTypes/ProductPrice.php

@@ -45,12 +45,47 @@ class ProductPrice extends AbstractBlock {
 	}
 
 	/**
-	 * 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 );
+
+		if ( $product ) {
+			return sprintf(
+				'<div class="wc-block-components-product-price wc-block-grid__product-price">
+					%s
+				</div>',
+				$product->get_price_html()
+			);
+		}
 	}
 }