Add support for the Editor Preview update when custom attributes are changed

assets/js/blocks/product-query/inspector-controls.tsx

@@ -12,24 +12,26 @@ import { ElementType } from 'react';
  * Internal dependencies
  */
 import { ProductQueryBlock } from './types';
-import { isWooQueryBlockVariation, setCustomQueryAttribute } from './utils';
+import { isWooQueryBlockVariation, setCustomQueryArguments } from './utils';
 
 export const INSPECTOR_CONTROLS = {
-	onSale: ( props: ProductQueryBlock ) => (
-		<ToggleControl
-			label={ __(
-				'Show only products on sale',
-				'woo-gutenberg-products-block'
-			) }
-			checked={
-				props.attributes.__woocommerceVariationProps?.attributes?.query
-					?.onSale || false
-			}
-			onChange={ ( onSale ) => {
-				setCustomQueryAttribute( props, { onSale } );
-			} }
-		/>
-	),
+	onSale: ( props: ProductQueryBlock ) => {
+		return (
+			<ToggleControl
+				label={ __(
+					'Show only products on sale',
+					'woo-gutenberg-products-block'
+				) }
+				checked={
+					props.attributes.query?.__woocommerceVariationQuery
+						?.onSale || false
+				}
+				onChange={ ( onSale ) => {
+					setCustomQueryArguments( props, { onSale } );
+				} }
+			/>
+		);
+	},
 };
 
 export const withProductQueryControls =

assets/js/blocks/product-query/types.ts

@@ -41,10 +41,6 @@ export interface ProductQueryAttributes {
 	 * @example  `[ 'stockStatus' ]`  will not render the dropdown for stock status.
 	 */
 	disabledInspectorControls?: string[];
-	/**
-	 * Query attributes that define which products will be fetched.
-	 */
-	query?: ProductQueryArguments;
 }
 
 export interface QueryBlockQuery {
@@ -61,6 +57,8 @@ export interface QueryBlockQuery {
 	search?: string;
 	sticky?: string;
 	taxQuery?: string;
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	__woocommerceVariationQuery: ProductQueryArguments;
 }
 
 export enum QueryVariation {
@@ -70,10 +68,12 @@ export enum QueryVariation {
 	PRODUCTS_ON_SALE = 'query-products-on-sale',
 }
 
-export type WooCommerceBlockVariation< T > = EditorBlock< {
-	// Disabling naming convention because we are namespacing our
-	// custom attributes inside a core block. Prefixing with underscores
-	// will help signify our intentions.
-	// eslint-disable-next-line @typescript-eslint/naming-convention
-	__woocommerceVariationProps: Partial< BlockInstance< T > >;
-} >;
+export type WooCommerceBlockVariation< T extends Record< string, unknown > > =
+	EditorBlock< {
+		// Disabling naming convention because we are namespacing our
+		// custom attributes inside a core block. Prefixing with underscores
+		// will help signify our intentions.
+		query: QueryBlockQuery;
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		__woocommerceVariationProps: Partial< BlockInstance< T > >;
+	} >;

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

@@ -3,6 +3,7 @@
  */
 import {
 	ProductQueryArguments,
+	ProductQueryAttributes,
 	ProductQueryBlock,
 	QueryVariation,
 } from './types';
@@ -33,9 +34,9 @@ export function isWooQueryBlockVariation( block: ProductQueryBlock ) {
  * options relating to our custom query, while keeping the code
  * clean.
  */
-export function setCustomQueryAttribute(
+export function setCustomAttribute(
 	block: ProductQueryBlock,
-	attributes: Partial< ProductQueryArguments >
+	attributes: Partial< ProductQueryAttributes >
 ) {
 	const { __woocommerceVariationProps } = block.attributes;
 
@@ -44,10 +45,22 @@ export function setCustomQueryAttribute(
 			...__woocommerceVariationProps,
 			attributes: {
 				...__woocommerceVariationProps.attributes,
-				query: {
-					...__woocommerceVariationProps.attributes?.query,
-					...attributes,
-				},
+				...attributes,
+			},
+		},
+	} );
+}
+
+export function setCustomQueryArguments(
+	block: ProductQueryBlock,
+	queryArguments: Partial< ProductQueryArguments >
+) {
+	block.setAttributes( {
+		query: {
+			...block.attributes.query,
+			__woocommerceVariationQuery: {
+				...block.attributes.query?.__woocommerceVariationQuery,
+				...queryArguments,
 			},
 		},
 	} );

assets/js/blocks/product-query/variations/products-on-sale.tsx

@@ -30,6 +30,12 @@ if ( isExperimentalBuild() ) {
 		},
 		attributes: {
 			...QUERY_DEFAULT_ATTRIBUTES,
+			query: {
+				...QUERY_DEFAULT_ATTRIBUTES.query,
+				__woocommerceVariationQuery: {
+					onSale: true,
+				},
+			},
 			__woocommerceVariationProps: {
 				name: 'query-products-on-sale',
 				attributes: {

src/BlockTypes/ProductQuery.php

@@ -28,13 +28,27 @@ class ProductQuery extends AbstractBlock {
 	 */
 	protected function initialize() {
 		parent::initialize();
+
 		add_filter(
-			'pre_render_block',
-			array( $this, 'update_query' ),
+			'rest_product_query',
+			function( $args, $request ) {
+
+				$custom_query_args = $request->get_param( '__woocommerceVariationQuery' );
+				$on_sale_query     = ! isset( $custom_query_args['onSale'] ) || 'true' !== $custom_query_args['onSale'] ? array() : $this->get_on_sale_products_query();
+
+				return array_merge( $args, $on_sale_query );
+			},
 			10,
 			2
 		);
 
+			add_filter(
+				'pre_render_block',
+				array( $this, 'update_query' ),
+				10,
+				2
+			);
+
 	}
 
 	/**
@@ -80,60 +94,56 @@ public function update_query( $pre_render, $parsed_block ) {
 		);
 	}
 
-	/**
-	 * Return a custom query based on the attributes.
-	 *
-	 * @param WP_Query $query         The WordPress Query.
-	 * @param WP_Block $parsed_block  The block being rendered.
-	 * @return array
-	 */
+		/**
+		 * Return a custom query based on the attributes.
+		 *
+		 * @param WP_Query $query         The WordPress Query.
+		 * @param WP_Block $parsed_block  The block being rendered.
+		 * @return array
+		 */
 	public function get_query_by_attributes( $query, $parsed_block ) {
-		if ( ! isset( $parsed_block['attrs']['__woocommerceVariationProps'] ) ) {
+		if ( ! isset( $parsed_block['attrs']['query']['customQueryArgs']['__woocommerceVariationQuery']['onSale'] ) ) {
 			return $query;
 		}
 
-		$variation_props     = $parsed_block['attrs']['__woocommerceVariationProps'];
+		$variation_query     = $parsed_block['attrs']['query']['customQueryArgs']['__woocommerceVariationQuery'];
 		$common_query_values = array(
 			'post_type'      => 'product',
 			'post_status'    => 'publish',
 			'posts_per_page' => $query['posts_per_page'],
 			'orderby'        => $query['orderby'],
 			'order'          => $query['order'],
 		);
-		$on_sale_query       = $this->get_on_sale_products_query( $variation_props );
+		$on_sale_query       = ! isset( $variation_query['onSale'] ) || true !== $variation_query['onSale'] ? array() : $this->get_on_sale_products_query();
 
 		return array_merge( $query, $common_query_values, $on_sale_query );
 	}
 
+
 	/**
 	 * Return a query for on sale products.
 	 *
-	 * @param array $variation_props Dedicated attributes for the variation.
 	 * @return array
 	 */
-	private function get_on_sale_products_query( $variation_props ) {
-		if ( ! isset( $variation_props['attributes']['query']['onSale'] ) || true !== $variation_props['attributes']['query']['onSale'] ) {
-			return array();
-		}
-
+	private function get_on_sale_products_query() {
 		return array(
 			// Ignoring the warning of not using meta queries.
-			// phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_query
-			'meta_query' => array(
-				'relation' => 'OR',
-				array(
-					'key'     => '_sale_price',
-					'value'   => 0,
-					'compare' => '>',
-					'type'    => 'numeric',
-				),
-				array(
-					'key'     => '_min_variation_sale_price',
-					'value'   => 0,
-					'compare' => '>',
-					'type'    => 'numeric',
-				),
+		// phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_query
+		'meta_query' => array(
+			'relation' => 'OR',
+			array(
+				'key'     => '_sale_price',
+				'value'   => 0,
+				'compare' => '>',
+				'type'    => 'numeric',
+			),
+			array(
+				'key'     => '_min_variation_sale_price',
+				'value'   => 0,
+				'compare' => '>',
+				'type'    => 'numeric',
 			),
+		),
 		);
 	}
 }