diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/attributes.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/attributes.js
index 3b90595ded3..d2baa73ae36 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/attributes.js
+++ b/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() ) {
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/edit.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/edit.js
index d2adfc743b3..e0acf021781 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/edit.js
+++ b/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 (
<>
@@ -31,7 +43,7 @@ const PriceEdit = ( { attributes, setAttributes } ) => {
) }
-
+
>
);
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/index.js
index 9ebb4f49637..c677df16713 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/index.js
+++ b/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() && {
diff --git a/plugins/woocommerce-blocks/src/BlockTypes/ProductPrice.php b/plugins/woocommerce-blocks/src/BlockTypes/ProductPrice.php
index c067f673f34..ba078082b3b 100644
--- a/plugins/woocommerce-blocks/src/BlockTypes/ProductPrice.php
+++ b/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(
+ '
+ %s
+
',
+ $product->get_price_html()
+ );
+ }
}
}