just a POC

assets/js/atomic/blocks/product-elements/image/attributes.js

@@ -19,6 +19,10 @@ export const blockAttributes = {
 		type: 'number',
 		default: 0,
 	},
+	postId: {
+		type: 'number',
+		default: 0,
+	},
 };
 
 export default blockAttributes;

assets/js/atomic/blocks/product-elements/image/block.js

@@ -46,6 +46,7 @@ export const Block = ( props ) => {
 
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
+
 	const [ imageLoaded, setImageLoaded ] = useState( false );
 	const { dispatchStoreEvent } = useStoreEvents();
 

assets/js/atomic/blocks/product-elements/image/edit.js

@@ -21,13 +21,20 @@ import {
 import Block from './block';
 import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+import { useEffect } from 'react';
 
-const Edit = ( { attributes, setAttributes } ) => {
+const Edit = ( { attributes, setAttributes, context } ) => {
 	const { showProductLink, imageSizing, showSaleBadge, saleBadgeAlign } =
 		attributes;
 
 	const blockProps = useBlockProps();
 
+	const newProps = { ...attributes, ...context };
+
+	useEffect( () => {
+		setAttributes( { postId: context.postId } );
+	}, [ context, context.postId, setAttributes ] );
+
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>
@@ -146,17 +153,10 @@ const Edit = ( { attributes, setAttributes } ) => {
 				</PanelBody>
 			</InspectorControls>
 			<Disabled>
-				<Block { ...attributes } />
+				<Block { ...newProps } />
 			</Disabled>
 		</div>
 	);
 };
 
-export default withProductSelector( {
-	icon: BLOCK_ICON,
-	label: BLOCK_TITLE,
-	description: __(
-		'Choose a product to display its image.',
-		'woo-gutenberg-products-block'
-	),
-} )( Edit );
+export default Edit;

assets/js/atomic/blocks/product-elements/image/index.js

@@ -26,6 +26,7 @@ const blockConfig = {
 	edit,
 	supports,
 	save: Save,
+	usesContext: [ 'query', 'queryId', 'postId' ],
 };
 
 registerBlockType( 'woocommerce/product-image', {

assets/js/atomic/blocks/product-elements/image/save.tsx

@@ -10,11 +10,12 @@ type Props = {
 	};
 };
 
-export const Save = ( { attributes }: Props ): JSX.Element => {
+export const Save = ( { attributes }: any ): JSX.Element => {
 	return (
 		<div
 			{ ...useBlockProps.save( {
 				className: classnames( 'is-loading', attributes.className ),
+				postId: attributes.postId,
 			} ) }
 		/>
 	);

assets/js/blocks/product-query/index.tsx

@@ -26,54 +26,33 @@ const QUERY_DEFAULT_ATTRIBUTES = {
 		search: '',
 		exclude: [],
 		sticky: '',
-		inherit: true,
+		inherit: false,
 		hidePostTypeSettings: true,
 	},
 };
 
-registerBlockVariation( 'core/query', {
-	name: 'product-query',
-	title: __( 'Product Query', 'woo-gutenberg-products-block' ),
-	isActive: () => true,
-	icon: {
-		src: (
-			<Icon
-				icon={ sparkles }
-				className="wc-block-editor-components-block-icon wc-block-editor-components-block-icon--sparkles"
-			/>
-		),
-	},
-	attributes: { ...QUERY_DEFAULT_ATTRIBUTES, namespace: 'product-query' },
-	innerBlocks: [
-		[
-			'core/post-template',
-			{},
-			[
-				[ 'woocommerce/product-image-2' ],
-				[ 'woocommerce/product-title' ],
-			],
-		],
-		[ 'core/query-pagination' ],
-		[ 'core/query-no-results' ],
-	],
-	scope: [ 'block', 'inserter' ],
-} );
-
 export const withInspectorControl = createHigherOrderComponent(
 	( BlockEdit ) => {
 		return ( props ) => {
-			return props.attributes.namespace !== 'product-query' ? (
+			return props.name !== 'core/query' ||
+				props.attributes?.productQuery?.namespace !==
+					'product-query' ? (
 				<BlockEdit { ...props } />
 			) : (
 				<>
 					<BlockEdit { ...props } />
 					<InspectorControls>
 						<ToggleControl
 							label={ __( 'ON Sale' ) }
-							checked={ props.attributes.onSale || false }
+							checked={
+								props.attributes.productQuery?.onSale || false
+							}
 							onChange={ ( nextValue ) => {
 								props.setAttributes( {
-									onSale: nextValue,
+									productQuery: {
+										...props.attributes.productQuery,
+										onSale: nextValue,
+									},
 								} );
 							} }
 						/>
@@ -90,11 +69,8 @@ export function addAttribute( settings, name ) {
 		// Gracefully handle if settings.attributes is undefined.
 		settings.attributes = {
 			...settings.attributes,
-			namespace: {
-				type: 'string',
-			},
-			onSale: {
-				type: 'boolean',
+			productQuery: {
+				type: 'object',
 			},
 		};
 	}
@@ -109,31 +85,67 @@ addFilter(
 
 addFilter( 'editor.BlockEdit', 'core/query', withInspectorControl );
 
-// registerBlockVariation( 'core/query', {
-// 	name: 'Products on Sale',
-// 	title: __( 'Product on Sale', 'woo-gutenberg-products-block' ),
-// 	isActive: ( blockAttributes ) => blockAttributes.onSale,
-// 	icon: {
-// 		src: (
-// 			<Icon
-// 				icon={ sparkles }
-// 				className="wc-block-editor-components-block-icon wc-block-editor-components-block-icon--sparkles"
-// 			/>
-// 		),
-// 	},
-// 	attributes: {
-// 		...QUERY_DEFAULT_ATTRIBUTES,
-// 		namespace: 'product-on-sale',
-// 		onSale: true,
-// 	},
-// 	innerBlocks: [
-// 		[
-// 			'core/post-template',
-// 			{},
-// 			[ [ 'woocommerce/product-image-2' ], [ 'core/post-title' ] ],
-// 		],
-// 		[ 'core/query-pagination' ],
-// 		[ 'core/query-no-results' ],
-// 	],
-// 	scope: [ 'block', 'inserter' ],
-// } );
+registerBlockVariation( 'core/query', {
+	name: 'product-query',
+	title: __( 'Product Query', 'woo-gutenberg-products-block' ),
+	isActive: ( attributes ) => {
+		return attributes?.productQuery?.namespace === 'product-query';
+	},
+	icon: {
+		src: (
+			<Icon
+				icon={ sparkles }
+				className="wc-block-editor-components-block-icon wc-block-editor-components-block-icon--sparkles"
+			/>
+		),
+	},
+	attributes: {
+		...QUERY_DEFAULT_ATTRIBUTES,
+		productQuery: {
+			namespace: 'product-query',
+		},
+	},
+	innerBlocks: [
+		[
+			'core/post-template',
+			{},
+			[ [ 'core/post-title' ], [ 'woocommerce/product-image' ] ],
+		],
+		[ 'core/query-pagination' ],
+		[ 'core/query-no-results' ],
+	],
+	scope: [ 'block', 'inserter' ],
+} );
+
+registerBlockVariation( 'core/query', {
+	name: 'On Sale Products',
+	title: __( 'On Sale Products', 'woo-gutenberg-products-block' ),
+	isActive: ( blockAttributes ) =>
+		blockAttributes.productQuery.namespace === 'product-query-on-sale' ||
+		blockAttributes.productQuery.onSale === true,
+	icon: {
+		src: (
+			<Icon
+				icon={ sparkles }
+				className="wc-block-editor-components-block-icon wc-block-editor-components-block-icon--sparkles"
+			/>
+		),
+	},
+	attributes: {
+		...QUERY_DEFAULT_ATTRIBUTES,
+		productQuery: {
+			namespace: 'product-query-on-sale',
+			onSale: true,
+		},
+	},
+	innerBlocks: [
+		[
+			'core/post-template',
+			{},
+			[ [ 'core/post-title' ], [ 'woocommerce/product-image' ] ],
+		],
+		[ 'core/query-pagination' ],
+		[ 'core/query-no-results' ],
+	],
+	scope: [ 'block', 'inserter' ],
+} );

assets/js/shared/hocs/with-product-data-context.js

@@ -14,7 +14,7 @@ import { useState, useEffect } from '@wordpress/element';
  * @param {Object} props Component props.
  */
 const OriginalComponentWithContext = ( props ) => {
-	const { productId, OriginalComponent } = props;
+	const { productId, OriginalComponent, postId } = props;
 	const [ product, setProduct ] = useState( null );
 	const [ isLoading, setIsLoading ] = useState( true );
 
@@ -26,10 +26,11 @@ const OriginalComponentWithContext = ( props ) => {
 	}, [ props.product ] );
 
 	useEffect( () => {
-		if ( productId > 0 ) {
+		const id = productId > 0 ? productId : postId;
+		if ( id > 0 ) {
 			setIsLoading( true );
 			apiFetch( {
-				path: `/wc/store/v1/products/${ productId }`,
+				path: `/wc/store/v1/products/${ id }`,
 			} )
 				.then( ( receivedProduct ) => {
 					setProduct( receivedProduct );
@@ -41,7 +42,7 @@ const OriginalComponentWithContext = ( props ) => {
 					setIsLoading( false );
 				} );
 		}
-	}, [ productId ] );
+	}, [ productId, postId ] );
 
 	if ( ! isLoading && ! product ) {
 		return null;