Make Filters Products by Price work with Active Filters block

assets/js/blocks/price-filter/block.js

@@ -58,6 +58,19 @@ function formatParams( url, params ) {
 	return addQueryArgs( cleanUrl, paramObject );
 }
 
+/**
+ * Formats price values taking into account precision
+ *
+ * @param {string} value
+ * @param {number} minorUnit
+ *
+ * @return {number} Formatted price.
+ */
+
+function formatPrice( value, minorUnit ) {
+	return Number( value ) * 10 ** minorUnit;
+}
+
 /**
  * Component displaying a price filter.
  *
@@ -71,6 +84,8 @@ const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
 		''
 	);
 
+	const [ hasSetPriceDefault, setHasSetPriceDefault ] = useState( false );
+
 	const [ queryState ] = useQueryStateByContext();
 	const { results, isLoading } = useCollectionData( {
 		queryPrices: true,
@@ -84,18 +99,18 @@ const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
 
 	const [ minPriceQuery, setMinPriceQuery ] = useQueryStateByKey(
 		'min_price',
-		Number( minPriceParam ) * 10 ** currency.minorUnit || null
+		formatPrice( minPriceParam, currency.minorUnit ) || null
 	);
 	const [ maxPriceQuery, setMaxPriceQuery ] = useQueryStateByKey(
 		'max_price',
-		Number( maxPriceParam ) * 10 ** currency.minorUnit || null
+		formatPrice( maxPriceParam, currency.minorUnit ) || null
 	);
 
 	const [ minPrice, setMinPrice ] = useState(
-		Number( minPriceParam ) * 10 ** currency.minorUnit || null
+		formatPrice( minPriceParam, currency.minorUnit ) || null
 	);
 	const [ maxPrice, setMaxPrice ] = useState(
-		Number( maxPriceParam ) * 10 ** currency.minorUnit || null
+		formatPrice( maxPriceParam, currency.minorUnit ) || null
 	);
 
 	const { minConstraint, maxConstraint } = usePriceConstraints( {
@@ -108,6 +123,33 @@ const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
 		minorUnit: currency.minorUnit,
 	} );
 
+	/**
+	 * Important: For PHP rendered block templates only.
+	 *
+	 * When we render the PHP block template (e.g. Classic Block) we need
+	 * to set the default min_price and max_price values from the URL
+	 */
+	useEffect( () => {
+		if ( ! hasSetPriceDefault && filteringForPhpTemplate ) {
+			setMinPriceQuery(
+				formatPrice( minPriceParam, currency.minorUnit )
+			);
+			setMaxPriceQuery(
+				formatPrice( maxPriceParam, currency.minorUnit )
+			);
+
+			setHasSetPriceDefault( true );
+		}
+	}, [
+		currency.minorUnit,
+		filteringForPhpTemplate,
+		hasSetPriceDefault,
+		maxPriceParam,
+		minPriceParam,
+		setMaxPriceQuery,
+		setMinPriceQuery,
+	] );
+
 	// Updates the query based on slider values.
 	const onSubmit = useCallback(
 		( newMinPrice, newMaxPrice ) => {
@@ -126,7 +168,6 @@ const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
 					min_price: finalMinPrice / 10 ** currency.minorUnit,
 					max_price: finalMaxPrice / 10 ** currency.minorUnit,
 				} );
-
 				// If the params have changed, lets reload the page.
 				if ( window.location.href !== newUrl ) {
 					window.location.href = newUrl;