From c34eb7acdcf9f0511aec0b8fa4cae1c8f79b28eb Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Tue, 9 Aug 2022 11:30:54 +0700
Subject: [PATCH 01/35] make toggle control full width

---
 assets/js/blocks/price-filter/edit.tsx    | 1 +
 assets/js/blocks/price-filter/editor.scss | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx
index df830023625..7028532665f 100644
--- a/assets/js/blocks/price-filter/edit.tsx
+++ b/assets/js/blocks/price-filter/edit.tsx
@@ -57,6 +57,7 @@ export default function ( {
 								showInputFields: value === 'editable',
 							} )
 						}
+						className="wc-block-price-filter__price-range-toggle"
 					>
 						<ToggleGroupControlOption
 							value="editable"
diff --git a/assets/js/blocks/price-filter/editor.scss b/assets/js/blocks/price-filter/editor.scss
index 44c62d27dea..a203fac89a6 100644
--- a/assets/js/blocks/price-filter/editor.scss
+++ b/assets/js/blocks/price-filter/editor.scss
@@ -15,6 +15,14 @@
 	}
 }
 
+.wc-block-price-filter__price-range-toggle {
+	width: 100%;
+
+	> div {
+		flex-grow: 1;
+	}
+}
+
 .wc-block-price-slider {
 	.components-placeholder__instructions {
 		border-bottom: 1px solid #e0e2e6;

From 2bb8c34c0a420d16f0bfe0eeac066a021ce17e6e Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Tue, 9 Aug 2022 11:49:18 +0700
Subject: [PATCH 02/35] add inlineInput attribute

---
 assets/js/blocks/price-filter/block.json  | 4 ++++
 assets/js/blocks/price-filter/frontend.ts | 1 +
 assets/js/blocks/price-filter/types.ts    | 1 +
 3 files changed, 6 insertions(+)

diff --git a/assets/js/blocks/price-filter/block.json b/assets/js/blocks/price-filter/block.json
index 3219b673952..4e8323204ad 100644
--- a/assets/js/blocks/price-filter/block.json
+++ b/assets/js/blocks/price-filter/block.json
@@ -27,6 +27,10 @@
 			"type": "boolean",
 			"default": true
 		},
+		"inlineInput": {
+			"type": "boolean",
+			"default": false 
+		},
 		"showFilterButton": {
 			"type": "boolean",
 			"default": false
diff --git a/assets/js/blocks/price-filter/frontend.ts b/assets/js/blocks/price-filter/frontend.ts
index ac4e2badb83..ef69736b03d 100644
--- a/assets/js/blocks/price-filter/frontend.ts
+++ b/assets/js/blocks/price-filter/frontend.ts
@@ -14,6 +14,7 @@ const getProps = ( el: HTMLElement ) => {
 	return {
 		attributes: {
 			showInputFields: el.dataset.showinputfields === 'true',
+			inlineInput: el.dataset.inlineInput === 'true',
 			showFilterButton: el.dataset.showfilterbutton === 'true',
 			heading: el.dataset.heading || blockAttributes.heading.default,
 			headingLevel: el.dataset.headingLevel
diff --git a/assets/js/blocks/price-filter/types.ts b/assets/js/blocks/price-filter/types.ts
index 429c298998c..bb574ff6638 100644
--- a/assets/js/blocks/price-filter/types.ts
+++ b/assets/js/blocks/price-filter/types.ts
@@ -1,6 +1,7 @@
 export interface Attributes {
 	showFilterButton: boolean;
 	showInputFields: boolean;
+	inlineInput: boolean;
 	heading: string;
 	headingLevel: number;
 	className?: string;

From d90037cecfa98571c0c2978ffddac6751467e5d4 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Tue, 9 Aug 2022 11:49:35 +0700
Subject: [PATCH 03/35] add inlineInput sidebar setting

---
 assets/js/blocks/price-filter/edit.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx
index 7028532665f..ffc15de3135 100644
--- a/assets/js/blocks/price-filter/edit.tsx
+++ b/assets/js/blocks/price-filter/edit.tsx
@@ -32,8 +32,13 @@ export default function ( {
 	attributes,
 	setAttributes,
 }: BlockEditProps< Attributes > ) {
-	const { heading, headingLevel, showInputFields, showFilterButton } =
-		attributes;
+	const {
+		heading,
+		headingLevel,
+		showInputFields,
+		inlineInput,
+		showFilterButton,
+	} = attributes;
 
 	const blockProps = useBlockProps();
 
@@ -74,6 +79,20 @@ export default function ( {
 							) }
 						/>
 					</ToggleGroupControl>
+					{ showInputFields && (
+						<ToggleControl
+							label={ __(
+								'Inline input fields',
+								'woo-gutenberg-products-block'
+							) }
+							checked={ inlineInput }
+							onChange={ () =>
+								setAttributes( {
+									inlineInput: ! inlineInput,
+								} )
+							}
+						/>
+					) }
 					<ToggleControl
 						label={ __(
 							'Filter button',

From 97edad9c1c5905f2ef2f7c27c43cf754807ec29d Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Tue, 9 Aug 2022 13:13:39 +0700
Subject: [PATCH 04/35] add inlineInput help text

---
 assets/js/blocks/price-filter/edit.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx
index ffc15de3135..2e260e937b7 100644
--- a/assets/js/blocks/price-filter/edit.tsx
+++ b/assets/js/blocks/price-filter/edit.tsx
@@ -91,6 +91,10 @@ export default function ( {
 									inlineInput: ! inlineInput,
 								} )
 							}
+							help={ __(
+								'Show input fields inline with the slider.',
+								'woo-gutenberg-products-block'
+							) }
 						/>
 					) }
 					<ToggleControl

From 8e7d42638afa0fae35188db5f6ce63f93f884683 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Tue, 9 Aug 2022 15:15:52 +0700
Subject: [PATCH 05/35] style the filter button

---
 assets/js/base/components/filter-submit-button/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/js/base/components/filter-submit-button/index.tsx b/assets/js/base/components/filter-submit-button/index.tsx
index 3dc739eb2d2..76e5cb92b6f 100644
--- a/assets/js/base/components/filter-submit-button/index.tsx
+++ b/assets/js/base/components/filter-submit-button/index.tsx
@@ -30,6 +30,7 @@ const FilterSubmitButton = ( {
 		<button
 			type="submit"
 			className={ classNames(
+				'wp-block-button__link',
 				'wc-block-filter-submit-button',
 				'wc-block-components-filter-submit-button',
 				className

From 66ba8f4218b71be6d7a1641a884277f968da8849 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Tue, 9 Aug 2022 16:48:06 +0700
Subject: [PATCH 06/35] style price input

---
 assets/js/base/components/price-slider/style.scss | 2 ++
 assets/js/blocks/price-filter/style.scss          | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index bbf259c7cfe..733bb7a8846 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -109,9 +109,11 @@
 	.wc-block-components-price-slider__amount {
 		margin: 0;
 		border-radius: 4px;
+		border-width: 1px;
 		width: auto;
 		max-width: 100px;
 		min-width: 0;
+		padding: $gap-smaller;
 
 		&.wc-block-components-price-slider__amount--min {
 			margin-right: 10px;
diff --git a/assets/js/blocks/price-filter/style.scss b/assets/js/blocks/price-filter/style.scss
index daf012103e1..03784801a34 100644
--- a/assets/js/blocks/price-filter/style.scss
+++ b/assets/js/blocks/price-filter/style.scss
@@ -1,4 +1,6 @@
 .wp-block-woocommerce-price-filter {
+	border-color: $gray-700;
+	border-radius: 4px;
 	border-style: none !important;
 }
 
@@ -17,6 +19,7 @@
 	border-radius: inherit;
 	border-color: inherit;
 
+	// Force inherting style is required for global style.
 	input {
 		border-radius: inherit !important;
 		border-color: inherit !important;

From 5eeb706f705102bca0f3339533de82feab6316cf Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Tue, 9 Aug 2022 17:29:48 +0700
Subject: [PATCH 07/35] wip: reset button

---
 .../js/base/components/price-slider/index.tsx | 29 +++++++++++++------
 .../base/components/price-slider/style.scss   | 22 ++++++++++++++
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index d1f31432c94..e869ed778c4 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -429,15 +429,26 @@ const PriceSlider = ( {
 						</div>
 					) }
 				{ showFilterButton && (
-					<FilterSubmitButton
-						className="wc-block-price-filter__button wc-block-components-price-slider__button"
-						disabled={ isLoading || ! hasValidConstraints }
-						onClick={ onSubmit }
-						screenReaderLabel={ __(
-							'Apply price filter',
-							'woo-gutenberg-products-block'
-						) }
-					/>
+					<div className="wc-block-price-filter__actions wc-block-components-price-slider__actions">
+						<button
+							className="wc-block-price-filter__button-reset wc-block-components-price-slider__button-reset"
+							onClick={ () => {
+								setMinPriceInput( minConstraint );
+								setMaxPriceInput( maxConstraint );
+							} }
+						>
+							{ __( 'Reset', 'woo-gutenberg-products-block' ) }
+						</button>
+						<FilterSubmitButton
+							className="wc-block-price-filter__button wc-block-components-price-slider__button"
+							disabled={ isLoading || ! hasValidConstraints }
+							onClick={ onSubmit }
+							screenReaderLabel={ __(
+								'Apply price filter',
+								'woo-gutenberg-products-block'
+							) }
+						/>
+					</div>
 				) }
 			</div>
 		</div>
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index 733bb7a8846..f408ac990ef 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -208,6 +208,28 @@
 	}
 }
 
+.wc-block-components-price-slider__actions {
+	align-items: center;
+	display: flex;
+	justify-content: flex-end;
+	margin-left: auto;
+}
+
+.wc-block-components-price-slider__button {
+	border: none;
+}
+
+.wc-block-components-price-slider__button-reset {
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	margin-right: $gap;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
 .rtl {
 	.wc-block-components-price-slider__range-input-progress {
 		--track-background: linear-gradient(to left, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;

From f6fca92102176801b540e14f0e62d2fdcf256cfa Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Wed, 10 Aug 2022 11:14:59 +0700
Subject: [PATCH 08/35] clicking on reset button will reset the price query

---
 assets/js/base/components/price-slider/index.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index e869ed778c4..5fe3d38094a 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -12,6 +12,7 @@ import {
 import classnames from 'classnames';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import { Currency, isObject } from '@woocommerce/types';
+import { useDebouncedCallback } from 'use-debounce';
 
 /**
  * Internal dependencies
@@ -274,6 +275,8 @@ const PriceSlider = ( {
 		[ onChange, stepValue, minPriceInput, maxPriceInput ]
 	);
 
+	const debouncedUpdateQuery = useDebouncedCallback( onSubmit, 600 );
+
 	const classes = classnames(
 		'wc-block-price-filter',
 		'wc-block-components-price-slider',
@@ -433,8 +436,8 @@ const PriceSlider = ( {
 						<button
 							className="wc-block-price-filter__button-reset wc-block-components-price-slider__button-reset"
 							onClick={ () => {
-								setMinPriceInput( minConstraint );
-								setMaxPriceInput( maxConstraint );
+								onChange( [ minConstraint, maxConstraint ] );
+								debouncedUpdateQuery();
 							} }
 						>
 							{ __( 'Reset', 'woo-gutenberg-products-block' ) }

From ee308b3c44598ef318c0ee97759fb77b48506d36 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Wed, 10 Aug 2022 11:55:10 +0700
Subject: [PATCH 09/35] support inline input fields

---
 .../js/base/components/price-slider/index.tsx | 218 +++++++++---------
 .../base/components/price-slider/style.scss   |  25 +-
 assets/js/blocks/price-filter/block.tsx       |   1 +
 3 files changed, 122 insertions(+), 122 deletions(-)

diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index 5fe3d38094a..6d755471460 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -63,6 +63,10 @@ export interface PriceSliderProps {
 	 * Whether to show input fields for the values or not.
 	 */
 	showInputFields?: boolean;
+	/**
+	 * Whether to show input fields inline with the slider or not.
+	 */
+	inlineInput?: boolean;
 	/**
 	 * What step values the slider uses.
 	 */
@@ -79,6 +83,7 @@ const PriceSlider = ( {
 	currency,
 	showInputFields = true,
 	showFilterButton = false,
+	inlineInput = false,
 	isLoading = false,
 	onSubmit = () => void 0,
 }: PriceSliderProps ): JSX.Element => {
@@ -304,115 +309,120 @@ const PriceSlider = ( {
 		maxPriceInput / 10 ** currency.minorUnit
 	);
 
+	const slider = (
+		<div
+			className="wc-block-price-filter__range-input-wrapper wc-block-components-price-slider__range-input-wrapper"
+			onMouseMove={ findClosestRange }
+			onFocus={ findClosestRange }
+		>
+			{ hasValidConstraints && (
+				<div aria-hidden={ showInputFields }>
+					<div
+						className="wc-block-price-filter__range-input-progress wc-block-components-price-slider__range-input-progress"
+						style={ progressStyles as React.CSSProperties }
+					/>
+					<input
+						type="range"
+						className="wc-block-price-filter__range-input wc-block-price-filter__range-input--min wc-block-components-price-slider__range-input wc-block-components-price-slider__range-input--min"
+						aria-label={ __(
+							'Filter products by minimum price',
+							'woo-gutenberg-products-block'
+						) }
+						aria-valuetext={ ariaReadableMinPrice }
+						value={
+							Number.isFinite( minPrice )
+								? minPrice
+								: minConstraint
+						}
+						onChange={ rangeInputOnChange }
+						step={ minRangeStep }
+						min={ minConstraint }
+						max={ maxConstraint }
+						ref={ minRange }
+						disabled={ isLoading }
+						tabIndex={ showInputFields ? -1 : 0 }
+					/>
+					<input
+						type="range"
+						className="wc-block-price-filter__range-input wc-block-price-filter__range-input--max wc-block-components-price-slider__range-input wc-block-components-price-slider__range-input--max"
+						aria-label={ __(
+							'Filter products by maximum price',
+							'woo-gutenberg-products-block'
+						) }
+						aria-valuetext={ ariaReadableMaxPrice }
+						value={
+							Number.isFinite( maxPrice )
+								? maxPrice
+								: maxConstraint
+						}
+						onChange={ rangeInputOnChange }
+						step={ maxRangeStep }
+						min={ minConstraint }
+						max={ maxConstraint }
+						ref={ maxRange }
+						disabled={ isLoading }
+						tabIndex={ showInputFields ? -1 : 0 }
+					/>
+				</div>
+			) }
+		</div>
+	);
+
 	return (
 		<div className={ classes }>
-			<div
-				className="wc-block-price-filter__range-input-wrapper wc-block-components-price-slider__range-input-wrapper"
-				onMouseMove={ findClosestRange }
-				onFocus={ findClosestRange }
-			>
-				{ hasValidConstraints && (
-					<div aria-hidden={ showInputFields }>
-						<div
-							className="wc-block-price-filter__range-input-progress wc-block-components-price-slider__range-input-progress"
-							style={ progressStyles as React.CSSProperties }
-						/>
-						<input
-							type="range"
-							className="wc-block-price-filter__range-input wc-block-price-filter__range-input--min wc-block-components-price-slider__range-input wc-block-components-price-slider__range-input--min"
-							aria-label={ __(
-								'Filter products by minimum price',
-								'woo-gutenberg-products-block'
-							) }
-							aria-valuetext={ ariaReadableMinPrice }
-							value={
-								Number.isFinite( minPrice )
-									? minPrice
-									: minConstraint
+			{ ( ! inlineInput || ! showInputFields ) && slider }
+			{ showInputFields && (
+				<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
+					<FormattedMonetaryAmount
+						currency={ currency }
+						displayType="input"
+						className="wc-block-price-filter__amount wc-block-price-filter__amount--min wc-block-form-text-input wc-block-components-price-slider__amount wc-block-components-price-slider__amount--min"
+						aria-label={ __(
+							'Filter products by minimum price',
+							'woo-gutenberg-products-block'
+						) }
+						allowNegative={ false }
+						isAllowed={ isValidMinValue( {
+							minConstraint,
+							minorUnit: currency.minorUnit,
+							currentMaxValue: maxPriceInput,
+						} ) }
+						onValueChange={ ( value ) => {
+							if ( value === minPriceInput ) {
+								return;
 							}
-							onChange={ rangeInputOnChange }
-							step={ minRangeStep }
-							min={ minConstraint }
-							max={ maxConstraint }
-							ref={ minRange }
-							disabled={ isLoading }
-							tabIndex={ showInputFields ? -1 : 0 }
-						/>
-						<input
-							type="range"
-							className="wc-block-price-filter__range-input wc-block-price-filter__range-input--max wc-block-components-price-slider__range-input wc-block-components-price-slider__range-input--max"
-							aria-label={ __(
-								'Filter products by maximum price',
-								'woo-gutenberg-products-block'
-							) }
-							aria-valuetext={ ariaReadableMaxPrice }
-							value={
-								Number.isFinite( maxPrice )
-									? maxPrice
-									: maxConstraint
+							setMinPriceInput( value );
+						} }
+						onBlur={ priceInputOnBlur }
+						disabled={ isLoading || ! hasValidConstraints }
+						value={ minPriceInput }
+					/>
+					{ inlineInput && slider }
+					<FormattedMonetaryAmount
+						currency={ currency }
+						displayType="input"
+						className="wc-block-price-filter__amount wc-block-price-filter__amount--max wc-block-form-text-input wc-block-components-price-slider__amount wc-block-components-price-slider__amount--max"
+						aria-label={ __(
+							'Filter products by maximum price',
+							'woo-gutenberg-products-block'
+						) }
+						isAllowed={ isValidMaxValue( {
+							maxConstraint,
+							minorUnit: currency.minorUnit,
+						} ) }
+						onValueChange={ ( value ) => {
+							if ( value === maxPriceInput ) {
+								return;
 							}
-							onChange={ rangeInputOnChange }
-							step={ maxRangeStep }
-							min={ minConstraint }
-							max={ maxConstraint }
-							ref={ maxRange }
-							disabled={ isLoading }
-							tabIndex={ showInputFields ? -1 : 0 }
-						/>
-					</div>
-				) }
-			</div>
+							setMaxPriceInput( value );
+						} }
+						onBlur={ priceInputOnBlur }
+						disabled={ isLoading || ! hasValidConstraints }
+						value={ maxPriceInput }
+					/>
+				</div>
+			) }
 			<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
-				{ showInputFields && (
-					<>
-						<FormattedMonetaryAmount
-							currency={ currency }
-							displayType="input"
-							className="wc-block-price-filter__amount wc-block-price-filter__amount--min wc-block-form-text-input wc-block-components-price-slider__amount wc-block-components-price-slider__amount--min"
-							aria-label={ __(
-								'Filter products by minimum price',
-								'woo-gutenberg-products-block'
-							) }
-							allowNegative={ false }
-							isAllowed={ isValidMinValue( {
-								minConstraint,
-								minorUnit: currency.minorUnit,
-								currentMaxValue: maxPriceInput,
-							} ) }
-							onValueChange={ ( value ) => {
-								if ( value === minPriceInput ) {
-									return;
-								}
-								setMinPriceInput( value );
-							} }
-							onBlur={ priceInputOnBlur }
-							disabled={ isLoading || ! hasValidConstraints }
-							value={ minPriceInput }
-						/>
-						<FormattedMonetaryAmount
-							currency={ currency }
-							displayType="input"
-							className="wc-block-price-filter__amount wc-block-price-filter__amount--max wc-block-form-text-input wc-block-components-price-slider__amount wc-block-components-price-slider__amount--max"
-							aria-label={ __(
-								'Filter products by maximum price',
-								'woo-gutenberg-products-block'
-							) }
-							isAllowed={ isValidMaxValue( {
-								maxConstraint,
-								minorUnit: currency.minorUnit,
-							} ) }
-							onValueChange={ ( value ) => {
-								if ( value === maxPriceInput ) {
-									return;
-								}
-								setMaxPriceInput( value );
-							} }
-							onBlur={ priceInputOnBlur }
-							disabled={ isLoading || ! hasValidConstraints }
-							value={ maxPriceInput }
-						/>
-					</>
-				) }
 				{ ! showInputFields &&
 					! isLoading &&
 					Number.isFinite( minPrice ) &&
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index f408ac990ef..72c60e31140 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -52,17 +52,6 @@
 .wc-block-components-price-slider {
 	margin-bottom: $gap-large;
 
-	&.wc-block-components-price-slider--has-filter-button {
-		.wc-block-components-price-slider__controls {
-			justify-content: flex-end;
-
-			.wc-block-components-price-slider__amount.wc-block-components-price-slider__amount--max {
-				margin-left: 0;
-				margin-right: 10px;
-			}
-		}
-	}
-
 	&.is-loading.is-disabled {
 		.wc-block-components-price-slider__range-input-wrapper,
 		.wc-block-components-price-slider__amount,
@@ -83,12 +72,13 @@
 
 .wc-block-components-price-slider__range-input-wrapper {
 	@include reset;
-	height: 9px;
-	clear: both;
-	position: relative;
-	box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.1);
 	background: #e1e1e1;
+	box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.1);
+	clear: both;
+	flex-grow: 1;
+	height: 9px;
 	margin: 15px 0;
+	position: relative;
 }
 
 .wc-block-components-price-slider__range-input-progress {
@@ -105,6 +95,8 @@
 
 .wc-block-components-price-slider__controls {
 	display: flex;
+	gap: $gap-smaller;
+	margin-top: $gap-large;
 
 	.wc-block-components-price-slider__amount {
 		margin: 0;
@@ -115,9 +107,6 @@
 		min-width: 0;
 		padding: $gap-smaller;
 
-		&.wc-block-components-price-slider__amount--min {
-			margin-right: 10px;
-		}
 		&.wc-block-components-price-slider__amount--max {
 			margin-left: auto;
 		}
diff --git a/assets/js/blocks/price-filter/block.tsx b/assets/js/blocks/price-filter/block.tsx
index cb75ad62689..87c5df5cb2d 100644
--- a/assets/js/blocks/price-filter/block.tsx
+++ b/assets/js/blocks/price-filter/block.tsx
@@ -318,6 +318,7 @@ const PriceFilterBlock = ( {
 					maxPrice={ maxPrice }
 					currency={ currency }
 					showInputFields={ attributes.showInputFields }
+					inlineInput={ attributes.inlineInput }
 					showFilterButton={ attributes.showFilterButton }
 					onChange={ onChange }
 					onSubmit={ () => onSubmit( minPrice, maxPrice ) }

From eb6d8fca3ff93c94743fff1526149a53366fad77 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Wed, 10 Aug 2022 12:06:33 +0700
Subject: [PATCH 10/35] price text styling update

---
 assets/js/base/components/price-slider/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index 72c60e31140..a50b1269d53 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -94,6 +94,7 @@
 }
 
 .wc-block-components-price-slider__controls {
+	align-items: center;
 	display: flex;
 	gap: $gap-smaller;
 	margin-top: $gap-large;

From 45d357d33c725c08021a32998ebe3f4d51e49f09 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Wed, 10 Aug 2022 12:06:48 +0700
Subject: [PATCH 11/35] fix reset button font size

---
 assets/js/base/components/price-slider/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index a50b1269d53..098acbfcfac 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -213,6 +213,7 @@
 	background: transparent;
 	border: none;
 	cursor: pointer;
+	font-size: inherit;
 	margin-right: $gap;
 
 	&:hover {

From eae70694e1864219053b725b543cb672c5066e31 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Wed, 10 Aug 2022 14:14:13 +0700
Subject: [PATCH 12/35] add loading placeholder to all elements

---
 .../components/loading-placeholder/index.tsx    | 17 +++++++++++++++++
 .../components/loading-placeholder/style.scss   |  4 ++++
 .../js/base/components/price-slider/index.tsx   | 16 ++++++++++++++++
 .../js/base/components/price-slider/style.scss  |  6 ++----
 4 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 assets/js/base/components/loading-placeholder/index.tsx
 create mode 100644 assets/js/base/components/loading-placeholder/style.scss

diff --git a/assets/js/base/components/loading-placeholder/index.tsx b/assets/js/base/components/loading-placeholder/index.tsx
new file mode 100644
index 00000000000..db90d4ac419
--- /dev/null
+++ b/assets/js/base/components/loading-placeholder/index.tsx
@@ -0,0 +1,17 @@
+interface Props {
+	isLoading: boolean;
+	width: string;
+	height: string;
+}
+
+const LoadingPlaceHolder = ( { isLoading, width, height }: Props ) => {
+	if ( ! isLoading ) return null;
+	return (
+		<div
+			className="wc-block-loading-placeholder"
+			style={ { width, height } }
+		/>
+	);
+};
+
+export default LoadingPlaceHolder;
diff --git a/assets/js/base/components/loading-placeholder/style.scss b/assets/js/base/components/loading-placeholder/style.scss
new file mode 100644
index 00000000000..98d7222f7a2
--- /dev/null
+++ b/assets/js/base/components/loading-placeholder/style.scss
@@ -0,0 +1,4 @@
+.wc-block-loading-placeholder {
+	@include placeholder();
+	display: block;
+}
diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index 6d755471460..7c4cf2bdbd2 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -21,6 +21,7 @@ import './style.scss';
 import { constrainRangeSliderValues } from './constrain-range-slider-values';
 import FilterSubmitButton from '../filter-submit-button';
 import { isValidMaxValue, isValidMinValue } from './utils';
+import LoadingPlaceHolder from '../loading-placeholder';
 
 export interface PriceSliderProps {
 	/**
@@ -373,6 +374,11 @@ const PriceSlider = ( {
 			{ ( ! inlineInput || ! showInputFields ) && slider }
 			{ showInputFields && (
 				<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
+					<LoadingPlaceHolder
+						isLoading={ isLoading }
+						width="120px"
+						height="34px"
+					/>
 					<FormattedMonetaryAmount
 						currency={ currency }
 						displayType="input"
@@ -398,6 +404,11 @@ const PriceSlider = ( {
 						value={ minPriceInput }
 					/>
 					{ inlineInput && slider }
+					<LoadingPlaceHolder
+						isLoading={ isLoading }
+						width="120px"
+						height="34px"
+					/>
 					<FormattedMonetaryAmount
 						currency={ currency }
 						displayType="input"
@@ -441,6 +452,11 @@ const PriceSlider = ( {
 							/>
 						</div>
 					) }
+				<LoadingPlaceHolder
+					isLoading={ isLoading && ! showInputFields }
+					width="200px"
+					height="25px"
+				/>
 				{ showFilterButton && (
 					<div className="wc-block-price-filter__actions wc-block-components-price-slider__actions">
 						<button
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index 098acbfcfac..15a58f8dd3e 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -55,6 +55,7 @@
 	&.is-loading.is-disabled {
 		.wc-block-components-price-slider__range-input-wrapper,
 		.wc-block-components-price-slider__amount,
+		.wc-block-components-price-slider__button-reset,
 		.wc-block-components-price-slider__button {
 			@include placeholder();
 			box-shadow: none;
@@ -97,6 +98,7 @@
 	align-items: center;
 	display: flex;
 	gap: $gap-smaller;
+	justify-content: space-between;
 	margin-top: $gap-large;
 
 	.wc-block-components-price-slider__amount {
@@ -107,10 +109,6 @@
 		max-width: 100px;
 		min-width: 0;
 		padding: $gap-smaller;
-
-		&.wc-block-components-price-slider__amount--max {
-			margin-left: auto;
-		}
 	}
 }
 .wc-block-components-price-slider__range-input {

From e84b219941ce9ecbde96ba6e11ab353428184354 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Wed, 10 Aug 2022 14:17:42 +0700
Subject: [PATCH 13/35] fix filter button style

---
 assets/js/base/components/filter-submit-button/style.scss | 1 +
 assets/js/base/components/price-slider/style.scss         | 4 ----
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/assets/js/base/components/filter-submit-button/style.scss b/assets/js/base/components/filter-submit-button/style.scss
index 5f35f8407db..8d05eb31ebf 100644
--- a/assets/js/base/components/filter-submit-button/style.scss
+++ b/assets/js/base/components/filter-submit-button/style.scss
@@ -1,4 +1,5 @@
 .wc-block-components-filter-submit-button {
+	border: none;
 	display: block;
 	margin-left: auto;
 	white-space: nowrap;
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index 15a58f8dd3e..dcbde5cedef 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -203,10 +203,6 @@
 	margin-left: auto;
 }
 
-.wc-block-components-price-slider__button {
-	border: none;
-}
-
 .wc-block-components-price-slider__button-reset {
 	background: transparent;
 	border: none;

From ead9deae3f756a13dd71fc24e26ee356a90849b6 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Wed, 10 Aug 2022 15:07:10 +0700
Subject: [PATCH 14/35] update range slider thumb and track style

---
 .../base/components/price-slider/style.scss   | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index dcbde5cedef..a5e61254f1d 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -2,17 +2,18 @@
 @mixin thumb {
 	background-color: transparent;
 	background-position: 0 0;
-	width: 28px;
-	height: 23px;
-	border: 0;
+	box-sizing: content-box;
+	width: 12px;
+	height: 12px;
+	border: 2px solid $gray-900;
+	border-radius: 100%;
 	padding: 0;
 	margin: 0;
 	vertical-align: top;
 	cursor: pointer;
 	z-index: 20;
 	pointer-events: auto;
-	background-image: url("data:image/svg+xml,%3Csvg width='56' height='46' viewBox='0 0 56 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M25.3176 9.9423L16.9013 3.7991C15.1953 2.5706 13.2618 1.9003 11.2146 2.0121H11.1009C6.21029 2.3471 2.11589 6.3681 2.00219 11.2827C1.88849 16.644 6.21019 21 11.6696 21H11.7833C13.603 21 15.4228 20.3298 16.9013 19.213L25.3176 12.958C26.2275 12.0645 26.2275 10.7242 25.3176 9.9423V9.9423Z' fill='white' stroke='%23757575'/%3E%3Cpath d='M13 7V16M10 7V16V7Z' stroke='%23B8B8B8'/%3E%3Cpath d='M25.3176 9.94227L16.9013 3.79907C15.1953 2.57057 13.2618 1.90027 11.2146 2.01207H11.1009C6.21029 2.34707 2.11589 6.36807 2.00219 11.2827C1.88849 16.644 6.21019 21 11.6696 21H11.7833C13.603 21 15.4228 20.3298 16.9013 19.213L25.3176 12.958C26.2275 12.0645 26.2275 10.7242 25.3176 9.94227V9.94227Z' fill='white' stroke='%23757575'/%3E%3Cpath d='M13 7V16M10 7V16V7Z' stroke='%23B8B8B8'/%3E%3Cpath d='M25.3176 32.9423L16.9013 26.7991C15.1953 25.5706 13.2618 24.9003 11.2146 25.0121H11.1009C6.21029 25.347 2.11589 29.368 2.00219 34.2827C1.88849 39.644 6.21019 44 11.6696 44H11.7833C13.603 44 15.4228 43.3298 16.9013 42.213L25.3176 35.958C26.2275 35.0645 26.2275 33.7242 25.3176 32.9423V32.9423Z' fill='%23F8F3F7' stroke='white' stroke-opacity='0.75' stroke-width='3'/%3E%3Cpath d='M25.3176 32.9423L16.9013 26.7991C15.1953 25.5706 13.2618 24.9003 11.2146 25.0121H11.1009C6.21029 25.347 2.11589 29.368 2.00219 34.2827C1.88849 39.644 6.21019 44 11.6696 44H11.7833C13.603 44 15.4228 43.3298 16.9013 42.213L25.3176 35.958C26.2275 35.0645 26.2275 33.7242 25.3176 32.9423V32.9423Z' stroke='%23757575'/%3E%3Cpath d='M13 30V39M10 30V39V30Z' stroke='%23757575'/%3E%3Cpath d='M30.6824 9.94227L39.0987 3.79907C40.8047 2.57057 42.7382 1.90027 44.7854 2.01207H44.8991C49.7897 2.34707 53.8841 6.36807 53.9978 11.2827C54.1115 16.644 49.7898 21 44.3304 21H44.2167C42.397 21 40.5772 20.3298 39.0987 19.213L30.6824 12.958C29.7725 12.0645 29.7725 10.7242 30.6824 9.94227V9.94227Z' fill='white' stroke='%23757575'/%3E%3Cpath d='M43 6.99997V16M46 6.99997V16V6.99997Z' stroke='%23B8B8B8'/%3E%3Cpath d='M30.6824 32.9423L39.0987 26.7991C40.8047 25.5706 42.7382 24.9003 44.7854 25.0121H44.8991C49.7897 25.347 53.8841 29.368 53.9978 34.2827C54.1115 39.644 49.7898 44 44.3304 44H44.2167C42.397 44 40.5772 43.3298 39.0987 42.213L30.6824 35.958C29.7725 35.0645 29.7725 33.7242 30.6824 32.9423V32.9423Z' fill='%23F8F3F7' stroke='white' stroke-opacity='0.75' stroke-width='3'/%3E%3Cpath d='M30.6824 32.9423L39.0987 26.7991C40.8047 25.5706 42.7382 24.9003 44.7854 25.0121H44.8991C49.7897 25.347 53.8841 29.368 53.9978 34.2827C54.1115 39.644 49.7898 44 44.3304 44H44.2167C42.397 44 40.5772 43.3298 39.0987 42.213L30.6824 35.958C29.7725 35.0645 29.7725 33.7242 30.6824 32.9423V32.9423Z' stroke='%23757575'/%3E%3Cpath d='M43 30V39M46 30V39V30Z' stroke='%23757575'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='56' height='46' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
-
+	background: $white;
 	transition: transform .2s ease-in-out;
 	-webkit-appearance: none;
 	-moz-appearance: none;
@@ -23,8 +24,7 @@
 	}
 }
 @mixin thumbFocus {
-	background-position-y: -23px;
-	transform: scale(1.1);
+	background: $gray-900;
 }
 /* stylelint-enable */
 @mixin track {
@@ -73,23 +73,23 @@
 
 .wc-block-components-price-slider__range-input-wrapper {
 	@include reset;
-	background: #e1e1e1;
-	box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.1);
+	background: $gray-300;
+	border-radius: 4px;
 	clear: both;
 	flex-grow: 1;
-	height: 9px;
+	height: 4px;
 	margin: 15px 0;
 	position: relative;
 }
 
 .wc-block-components-price-slider__range-input-progress {
-	height: 9px;
-	width: 100%;
-	position: absolute;
+	height: 4px;
 	left: 0;
+	position: absolute;
 	top: 0;
+	width: 100%;
 	--track-background: linear-gradient(to right, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
-	--range-color: #{$studio-woocommerce-purple-30};
+	--range-color: #{$gray-900};
 	/*rtl:ignore*/
 	background: var(--track-background);
 }
@@ -128,7 +128,7 @@
 	}
 	&::-webkit-slider-thumb {
 		@include thumb;
-		margin: -6px 0 0 0;
+		margin: -5px 0 0 0;
 	}
 	&::-webkit-slider-progress {
 		@include reset;
@@ -172,7 +172,7 @@
 		}
 		&::-moz-range-thumb {
 			background-position-x: left;
-			transform: translate(-2px, 4px);
+			transform: translate(-2px, 2px);
 		}
 		&::-ms-thumb {
 			background-position-x: left;
@@ -188,7 +188,7 @@
 		}
 		&::-moz-range-thumb {
 			background-position-x: right;
-			transform: translate(2px, 4px);
+			transform: translate(2px, 2px);
 		}
 		&::-ms-thumb {
 			background-position-x: right;

From de083463b4bbced3427086a10ffa360a0116c781 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Wed, 10 Aug 2022 16:28:41 +0700
Subject: [PATCH 15/35] fix loading placeholder for non empty query

---
 .../js/base/components/price-slider/index.tsx  | 18 ++++++++++--------
 .../js/base/components/price-slider/style.scss |  5 ++++-
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index 7c4cf2bdbd2..a46fac407f6 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -340,7 +340,7 @@ const PriceSlider = ( {
 						min={ minConstraint }
 						max={ maxConstraint }
 						ref={ minRange }
-						disabled={ isLoading }
+						disabled={ isLoading && ! hasValidConstraints }
 						tabIndex={ showInputFields ? -1 : 0 }
 					/>
 					<input
@@ -375,7 +375,7 @@ const PriceSlider = ( {
 			{ showInputFields && (
 				<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
 					<LoadingPlaceHolder
-						isLoading={ isLoading }
+						isLoading={ isLoading && ! hasValidConstraints }
 						width="120px"
 						height="34px"
 					/>
@@ -404,11 +404,6 @@ const PriceSlider = ( {
 						value={ minPriceInput }
 					/>
 					{ inlineInput && slider }
-					<LoadingPlaceHolder
-						isLoading={ isLoading }
-						width="120px"
-						height="34px"
-					/>
 					<FormattedMonetaryAmount
 						currency={ currency }
 						displayType="input"
@@ -431,6 +426,11 @@ const PriceSlider = ( {
 						disabled={ isLoading || ! hasValidConstraints }
 						value={ maxPriceInput }
 					/>
+					<LoadingPlaceHolder
+						isLoading={ isLoading && ! hasValidConstraints }
+						width="120px"
+						height="34px"
+					/>
 				</div>
 			) }
 			<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
@@ -453,7 +453,9 @@ const PriceSlider = ( {
 						</div>
 					) }
 				<LoadingPlaceHolder
-					isLoading={ isLoading && ! showInputFields }
+					isLoading={
+						isLoading && ! showInputFields && ! hasValidConstraints
+					}
 					width="200px"
 					height="25px"
 				/>
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index a5e61254f1d..c1e14dedf45 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -54,12 +54,15 @@
 
 	&.is-loading.is-disabled {
 		.wc-block-components-price-slider__range-input-wrapper,
-		.wc-block-components-price-slider__amount,
 		.wc-block-components-price-slider__button-reset,
 		.wc-block-components-price-slider__button {
 			@include placeholder();
 			box-shadow: none;
 		}
+
+		.wc-block-components-price-slider__amount {
+			display: none;
+		}
 	}
 
 	&.is-disabled:not(.is-loading) {

From dee7dc65b95e18718ea4da5c27e9af9613c94c15 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Wed, 10 Aug 2022 19:22:16 +0700
Subject: [PATCH 16/35] move reset button into FilterSubmitButton component

---
 .../components/filter-submit-button/index.tsx | 39 +++++++++++++------
 .../filter-submit-button/style.scss           | 19 +++++++++
 .../js/base/components/price-slider/index.tsx | 33 +++++++---------
 .../base/components/price-slider/style.scss   | 23 +----------
 4 files changed, 61 insertions(+), 53 deletions(-)

diff --git a/assets/js/base/components/filter-submit-button/index.tsx b/assets/js/base/components/filter-submit-button/index.tsx
index 76e5cb92b6f..e93e378d3a8 100644
--- a/assets/js/base/components/filter-submit-button/index.tsx
+++ b/assets/js/base/components/filter-submit-button/index.tsx
@@ -15,6 +15,7 @@ interface FilterSubmitButtonProps {
 	disabled?: boolean;
 	label?: string;
 	onClick: () => void;
+	onReset?: () => void;
 	screenReaderLabel?: string;
 }
 
@@ -24,22 +25,36 @@ const FilterSubmitButton = ( {
 	/* translators: Submit button text for filters. */
 	label = __( 'Go', 'woo-gutenberg-products-block' ),
 	onClick,
+	onReset,
 	screenReaderLabel = __( 'Apply filter', 'woo-gutenberg-products-block' ),
 }: FilterSubmitButtonProps ): JSX.Element => {
 	return (
-		<button
-			type="submit"
-			className={ classNames(
-				'wp-block-button__link',
-				'wc-block-filter-submit-button',
-				'wc-block-components-filter-submit-button',
-				className
+		<div className="wc-block-components-filter-buttons">
+			{ onReset !== undefined && (
+				<button
+					className="wc-block-components-filter-reset-button"
+					onClick={ onReset }
+				>
+					{ __( 'Reset', 'woo-gutenberg-products-block' ) }
+				</button>
 			) }
-			disabled={ disabled }
-			onClick={ onClick }
-		>
-			<Label label={ label } screenReaderLabel={ screenReaderLabel } />
-		</button>
+			<button
+				type="submit"
+				className={ classNames(
+					'wp-block-button__link',
+					'wc-block-filter-submit-button',
+					'wc-block-components-filter-submit-button',
+					className
+				) }
+				disabled={ disabled }
+				onClick={ onClick }
+			>
+				<Label
+					label={ label }
+					screenReaderLabel={ screenReaderLabel }
+				/>
+			</button>
+		</div>
 	);
 };
 
diff --git a/assets/js/base/components/filter-submit-button/style.scss b/assets/js/base/components/filter-submit-button/style.scss
index 8d05eb31ebf..822779f25f2 100644
--- a/assets/js/base/components/filter-submit-button/style.scss
+++ b/assets/js/base/components/filter-submit-button/style.scss
@@ -1,6 +1,25 @@
+.wc-block-components-filter-buttons {
+	align-items: center;
+	display: flex;
+	justify-content: flex-end;
+	margin-left: auto;
+}
+
 .wc-block-components-filter-submit-button {
 	border: none;
 	display: block;
 	margin-left: auto;
 	white-space: nowrap;
 }
+
+.wc-block-components-filter-reset-button {
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	font-size: inherit;
+	margin-right: $gap;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index a46fac407f6..5a462b9fa2a 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -460,26 +460,19 @@ const PriceSlider = ( {
 					height="25px"
 				/>
 				{ showFilterButton && (
-					<div className="wc-block-price-filter__actions wc-block-components-price-slider__actions">
-						<button
-							className="wc-block-price-filter__button-reset wc-block-components-price-slider__button-reset"
-							onClick={ () => {
-								onChange( [ minConstraint, maxConstraint ] );
-								debouncedUpdateQuery();
-							} }
-						>
-							{ __( 'Reset', 'woo-gutenberg-products-block' ) }
-						</button>
-						<FilterSubmitButton
-							className="wc-block-price-filter__button wc-block-components-price-slider__button"
-							disabled={ isLoading || ! hasValidConstraints }
-							onClick={ onSubmit }
-							screenReaderLabel={ __(
-								'Apply price filter',
-								'woo-gutenberg-products-block'
-							) }
-						/>
-					</div>
+					<FilterSubmitButton
+						className="wc-block-price-filter__button wc-block-components-price-slider__button"
+						disabled={ isLoading || ! hasValidConstraints }
+						onClick={ onSubmit }
+						onReset={ () => {
+							onChange( [ minConstraint, maxConstraint ] );
+							debouncedUpdateQuery();
+						} }
+						screenReaderLabel={ __(
+							'Apply price filter',
+							'woo-gutenberg-products-block'
+						) }
+					/>
 				) }
 			</div>
 		</div>
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index c1e14dedf45..52e56479be8 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -54,8 +54,8 @@
 
 	&.is-loading.is-disabled {
 		.wc-block-components-price-slider__range-input-wrapper,
-		.wc-block-components-price-slider__button-reset,
-		.wc-block-components-price-slider__button {
+		.wc-block-components-filter-reset-button,
+		.wc-block-components-filter-submit-button {
 			@include placeholder();
 			box-shadow: none;
 		}
@@ -199,25 +199,6 @@
 	}
 }
 
-.wc-block-components-price-slider__actions {
-	align-items: center;
-	display: flex;
-	justify-content: flex-end;
-	margin-left: auto;
-}
-
-.wc-block-components-price-slider__button-reset {
-	background: transparent;
-	border: none;
-	cursor: pointer;
-	font-size: inherit;
-	margin-right: $gap;
-
-	&:hover {
-		text-decoration: underline;
-	}
-}
-
 .rtl {
 	.wc-block-components-price-slider__range-input-progress {
 		--track-background: linear-gradient(to left, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;

From 98f08efdb8048b8f78c7476b774d1128c1d31295 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Thu, 11 Aug 2022 11:21:57 +0700
Subject: [PATCH 17/35] try: render placeholder serverside

---
 .../components/loading-placeholder/index.tsx  | 18 ++++--
 .../js/base/components/price-slider/index.tsx | 18 ------
 .../base/components/price-slider/style.scss   |  2 -
 .../PriceFilterLoadingPlaceholder.tsx         | 57 +++++++++++++++++++
 assets/js/blocks/price-filter/block.tsx       | 15 +++++
 assets/js/blocks/price-filter/index.tsx       |  8 +--
 6 files changed, 90 insertions(+), 28 deletions(-)
 create mode 100644 assets/js/blocks/price-filter/PriceFilterLoadingPlaceholder.tsx

diff --git a/assets/js/base/components/loading-placeholder/index.tsx b/assets/js/base/components/loading-placeholder/index.tsx
index db90d4ac419..147f87d6670 100644
--- a/assets/js/base/components/loading-placeholder/index.tsx
+++ b/assets/js/base/components/loading-placeholder/index.tsx
@@ -1,15 +1,25 @@
 interface Props {
-	isLoading: boolean;
-	width: string;
+	isLoading?: boolean;
+	width?: string;
 	height: string;
+	style?: Record< string, string | number >;
 }
 
-const LoadingPlaceHolder = ( { isLoading, width, height }: Props ) => {
+const LoadingPlaceHolder = ( {
+	isLoading = true,
+	width,
+	height,
+	style,
+}: Props ) => {
 	if ( ! isLoading ) return null;
 	return (
 		<div
 			className="wc-block-loading-placeholder"
-			style={ { width, height } }
+			style={ {
+				width,
+				height,
+				...style,
+			} }
 		/>
 	);
 };
diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index 5a462b9fa2a..0a8f7b45e20 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -21,7 +21,6 @@ import './style.scss';
 import { constrainRangeSliderValues } from './constrain-range-slider-values';
 import FilterSubmitButton from '../filter-submit-button';
 import { isValidMaxValue, isValidMinValue } from './utils';
-import LoadingPlaceHolder from '../loading-placeholder';
 
 export interface PriceSliderProps {
 	/**
@@ -374,11 +373,6 @@ const PriceSlider = ( {
 			{ ( ! inlineInput || ! showInputFields ) && slider }
 			{ showInputFields && (
 				<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
-					<LoadingPlaceHolder
-						isLoading={ isLoading && ! hasValidConstraints }
-						width="120px"
-						height="34px"
-					/>
 					<FormattedMonetaryAmount
 						currency={ currency }
 						displayType="input"
@@ -426,11 +420,6 @@ const PriceSlider = ( {
 						disabled={ isLoading || ! hasValidConstraints }
 						value={ maxPriceInput }
 					/>
-					<LoadingPlaceHolder
-						isLoading={ isLoading && ! hasValidConstraints }
-						width="120px"
-						height="34px"
-					/>
 				</div>
 			) }
 			<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
@@ -452,13 +441,6 @@ const PriceSlider = ( {
 							/>
 						</div>
 					) }
-				<LoadingPlaceHolder
-					isLoading={
-						isLoading && ! showInputFields && ! hasValidConstraints
-					}
-					width="200px"
-					height="25px"
-				/>
 				{ showFilterButton && (
 					<FilterSubmitButton
 						className="wc-block-price-filter__button wc-block-components-price-slider__button"
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index 52e56479be8..97ec3a3d80a 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -56,7 +56,6 @@
 		.wc-block-components-price-slider__range-input-wrapper,
 		.wc-block-components-filter-reset-button,
 		.wc-block-components-filter-submit-button {
-			@include placeholder();
 			box-shadow: none;
 		}
 
@@ -261,7 +260,6 @@
 	.wc-block-components-price-slider {
 		&.is-loading.is-disabled {
 			.wc-block-components-price-slider__range-input-wrapper {
-				@include placeholder();
 				box-shadow: none;
 			}
 		}
diff --git a/assets/js/blocks/price-filter/PriceFilterLoadingPlaceholder.tsx b/assets/js/blocks/price-filter/PriceFilterLoadingPlaceholder.tsx
new file mode 100644
index 00000000000..a354fa38d06
--- /dev/null
+++ b/assets/js/blocks/price-filter/PriceFilterLoadingPlaceholder.tsx
@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import LoadingPlaceHolder from '@woocommerce/base-components/loading-placeholder';
+
+interface Props {
+	showInputFields: boolean;
+	inlineInput: boolean;
+	showFilterButton: boolean;
+	isEditor?: boolean;
+}
+
+const PriceFilterLoadingPlaceholder = ( {
+	showInputFields,
+	inlineInput,
+	showFilterButton,
+	isEditor = false,
+}: Props ) => (
+	<>
+		{ ! isEditor && (
+			<LoadingPlaceHolder
+				height="35px"
+				width="200px"
+				style={ { marginBottom: '20px' } }
+			/>
+		) }
+
+		<div className="wc-block-price-slider">
+			<LoadingPlaceHolder
+				height="8px"
+				isLoading={ ! inlineInput || ! showInputFields }
+			/>
+			<div className="wc-block-components-price-slider__controls">
+				<LoadingPlaceHolder width="120px" height="34px" />
+				<LoadingPlaceHolder height="8px" isLoading={ inlineInput } />
+				<LoadingPlaceHolder width="120px" height="34px" />
+			</div>
+			<div className="wc-block-components-price-slider__controls">
+				<LoadingPlaceHolder
+					isLoading={ ! showInputFields }
+					width="200px"
+					height="25px"
+				/>
+				<LoadingPlaceHolder
+					isLoading={ showFilterButton }
+					width="100px"
+					height="50px"
+					style={ {
+						marginLeft: 'auto',
+					} }
+				/>
+			</div>
+		</div>
+	</>
+);
+
+export default PriceFilterLoadingPlaceholder;
diff --git a/assets/js/blocks/price-filter/block.tsx b/assets/js/blocks/price-filter/block.tsx
index 87c5df5cb2d..975e3c58f56 100644
--- a/assets/js/blocks/price-filter/block.tsx
+++ b/assets/js/blocks/price-filter/block.tsx
@@ -28,6 +28,7 @@ import {
 import usePriceConstraints from './use-price-constraints';
 import './style.scss';
 import { Attributes } from './types';
+import PriceFilterLoadingPlaceholder from './PriceFilterLoadingPlaceholder';
 
 /**
  * Formats filter values into a string for the URL parameters needed for filtering PHP templates.
@@ -300,6 +301,20 @@ const PriceFilterBlock = ( {
 		return null;
 	}
 
+	if (
+		isLoading &&
+		! ( isFinite( minConstraint ) && isFinite( maxConstraint ) )
+	) {
+		return (
+			<PriceFilterLoadingPlaceholder
+				showInputFields={ attributes.showInputFields }
+				inlineInput={ attributes.inlineInput }
+				showFilterButton={ attributes.showFilterButton }
+				isEditor={ isEditor }
+			/>
+		);
+	}
+
 	const TagName =
 		`h${ attributes.headingLevel }` as keyof JSX.IntrinsicElements;
 
diff --git a/assets/js/blocks/price-filter/index.tsx b/assets/js/blocks/price-filter/index.tsx
index 407c62b3d13..e33f60d77cb 100644
--- a/assets/js/blocks/price-filter/index.tsx
+++ b/assets/js/blocks/price-filter/index.tsx
@@ -14,6 +14,7 @@ import { useBlockProps } from '@wordpress/block-editor';
 import edit from './edit';
 import metadata from './block.json';
 import { blockAttributes } from './attributes';
+import PriceFilterLoadingPlaceholder from './PriceFilterLoadingPlaceholder';
 
 registerBlockType( metadata, {
 	title: __( 'Filter Products by Price', 'woo-gutenberg-products-block' ),
@@ -72,6 +73,7 @@ registerBlockType( metadata, {
 			className,
 			showInputFields,
 			showFilterButton,
+			inlineInput,
 			heading,
 			headingLevel,
 		} = attributes;
@@ -80,6 +82,7 @@ registerBlockType( metadata, {
 			'data-showfilterbutton': showFilterButton,
 			'data-heading': heading,
 			'data-heading-level': headingLevel,
+			'data-inline-input': inlineInput,
 		};
 		return (
 			<div
@@ -88,10 +91,7 @@ registerBlockType( metadata, {
 				} ) }
 				{ ...data }
 			>
-				<span
-					aria-hidden
-					className="wc-block-product-categories__placeholder"
-				/>
+				<PriceFilterLoadingPlaceholder { ...attributes } />
 			</div>
 		);
 	},

From b41f15d3bc69940657337accde200a8d0f4f4cac Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Thu, 11 Aug 2022 12:10:12 +0700
Subject: [PATCH 18/35] update filter button label

---
 .../components/filter-submit-button/index.tsx |  2 +-
 .../test/__snapshots__/block.js.snap          | 30 +++++++++++--------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/assets/js/base/components/filter-submit-button/index.tsx b/assets/js/base/components/filter-submit-button/index.tsx
index e93e378d3a8..271fc648d64 100644
--- a/assets/js/base/components/filter-submit-button/index.tsx
+++ b/assets/js/base/components/filter-submit-button/index.tsx
@@ -23,7 +23,7 @@ const FilterSubmitButton = ( {
 	className,
 	disabled,
 	/* translators: Submit button text for filters. */
-	label = __( 'Go', 'woo-gutenberg-products-block' ),
+	label = __( 'Apply', 'woo-gutenberg-products-block' ),
 	onClick,
 	onReset,
 	screenReaderLabel = __( 'Apply filter', 'woo-gutenberg-products-block' ),
diff --git a/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap b/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap
index 8f24b78b474..1e1fb5888de 100644
--- a/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap
+++ b/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap
@@ -94,21 +94,25 @@ exports[`Testing stock filter renders the stock filter block with the filter but
         </label>
       </li>
     </ul>
-    <button
-      class="wc-block-filter-submit-button wc-block-components-filter-submit-button wc-block-stock-filter__button"
-      type="submit"
+    <div
+      class="wc-block-components-filter-buttons"
     >
-      <span
-        aria-hidden="true"
+      <button
+        class="wp-block-button__link wc-block-filter-submit-button wc-block-components-filter-submit-button wc-block-stock-filter__button"
+        type="submit"
       >
-        Go
-      </span>
-      <span
-        class="screen-reader-text"
-      >
-        Apply filter
-      </span>
-    </button>
+        <span
+          aria-hidden="true"
+        >
+          Apply
+        </span>
+        <span
+          class="screen-reader-text"
+        >
+          Apply filter
+        </span>
+      </button>
+    </div>
   </div>
 </div>
 `;

From 7b4d9f198fbd6820e5fbf54560820740066bd692 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Thu, 11 Aug 2022 15:39:15 +0700
Subject: [PATCH 19/35] Revert "try: render placeholder serverside"

This reverts commit 98f08efdb8048b8f78c7476b774d1128c1d31295.
---
 .../components/loading-placeholder/index.tsx  | 18 ++----
 .../js/base/components/price-slider/index.tsx | 18 ++++++
 .../base/components/price-slider/style.scss   |  2 +
 .../PriceFilterLoadingPlaceholder.tsx         | 57 -------------------
 assets/js/blocks/price-filter/block.tsx       | 15 -----
 assets/js/blocks/price-filter/index.tsx       |  8 +--
 6 files changed, 28 insertions(+), 90 deletions(-)
 delete mode 100644 assets/js/blocks/price-filter/PriceFilterLoadingPlaceholder.tsx

diff --git a/assets/js/base/components/loading-placeholder/index.tsx b/assets/js/base/components/loading-placeholder/index.tsx
index 147f87d6670..db90d4ac419 100644
--- a/assets/js/base/components/loading-placeholder/index.tsx
+++ b/assets/js/base/components/loading-placeholder/index.tsx
@@ -1,25 +1,15 @@
 interface Props {
-	isLoading?: boolean;
-	width?: string;
+	isLoading: boolean;
+	width: string;
 	height: string;
-	style?: Record< string, string | number >;
 }
 
-const LoadingPlaceHolder = ( {
-	isLoading = true,
-	width,
-	height,
-	style,
-}: Props ) => {
+const LoadingPlaceHolder = ( { isLoading, width, height }: Props ) => {
 	if ( ! isLoading ) return null;
 	return (
 		<div
 			className="wc-block-loading-placeholder"
-			style={ {
-				width,
-				height,
-				...style,
-			} }
+			style={ { width, height } }
 		/>
 	);
 };
diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index 0a8f7b45e20..5a462b9fa2a 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -21,6 +21,7 @@ import './style.scss';
 import { constrainRangeSliderValues } from './constrain-range-slider-values';
 import FilterSubmitButton from '../filter-submit-button';
 import { isValidMaxValue, isValidMinValue } from './utils';
+import LoadingPlaceHolder from '../loading-placeholder';
 
 export interface PriceSliderProps {
 	/**
@@ -373,6 +374,11 @@ const PriceSlider = ( {
 			{ ( ! inlineInput || ! showInputFields ) && slider }
 			{ showInputFields && (
 				<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
+					<LoadingPlaceHolder
+						isLoading={ isLoading && ! hasValidConstraints }
+						width="120px"
+						height="34px"
+					/>
 					<FormattedMonetaryAmount
 						currency={ currency }
 						displayType="input"
@@ -420,6 +426,11 @@ const PriceSlider = ( {
 						disabled={ isLoading || ! hasValidConstraints }
 						value={ maxPriceInput }
 					/>
+					<LoadingPlaceHolder
+						isLoading={ isLoading && ! hasValidConstraints }
+						width="120px"
+						height="34px"
+					/>
 				</div>
 			) }
 			<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
@@ -441,6 +452,13 @@ const PriceSlider = ( {
 							/>
 						</div>
 					) }
+				<LoadingPlaceHolder
+					isLoading={
+						isLoading && ! showInputFields && ! hasValidConstraints
+					}
+					width="200px"
+					height="25px"
+				/>
 				{ showFilterButton && (
 					<FilterSubmitButton
 						className="wc-block-price-filter__button wc-block-components-price-slider__button"
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index 97ec3a3d80a..52e56479be8 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -56,6 +56,7 @@
 		.wc-block-components-price-slider__range-input-wrapper,
 		.wc-block-components-filter-reset-button,
 		.wc-block-components-filter-submit-button {
+			@include placeholder();
 			box-shadow: none;
 		}
 
@@ -260,6 +261,7 @@
 	.wc-block-components-price-slider {
 		&.is-loading.is-disabled {
 			.wc-block-components-price-slider__range-input-wrapper {
+				@include placeholder();
 				box-shadow: none;
 			}
 		}
diff --git a/assets/js/blocks/price-filter/PriceFilterLoadingPlaceholder.tsx b/assets/js/blocks/price-filter/PriceFilterLoadingPlaceholder.tsx
deleted file mode 100644
index a354fa38d06..00000000000
--- a/assets/js/blocks/price-filter/PriceFilterLoadingPlaceholder.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * External dependencies
- */
-import LoadingPlaceHolder from '@woocommerce/base-components/loading-placeholder';
-
-interface Props {
-	showInputFields: boolean;
-	inlineInput: boolean;
-	showFilterButton: boolean;
-	isEditor?: boolean;
-}
-
-const PriceFilterLoadingPlaceholder = ( {
-	showInputFields,
-	inlineInput,
-	showFilterButton,
-	isEditor = false,
-}: Props ) => (
-	<>
-		{ ! isEditor && (
-			<LoadingPlaceHolder
-				height="35px"
-				width="200px"
-				style={ { marginBottom: '20px' } }
-			/>
-		) }
-
-		<div className="wc-block-price-slider">
-			<LoadingPlaceHolder
-				height="8px"
-				isLoading={ ! inlineInput || ! showInputFields }
-			/>
-			<div className="wc-block-components-price-slider__controls">
-				<LoadingPlaceHolder width="120px" height="34px" />
-				<LoadingPlaceHolder height="8px" isLoading={ inlineInput } />
-				<LoadingPlaceHolder width="120px" height="34px" />
-			</div>
-			<div className="wc-block-components-price-slider__controls">
-				<LoadingPlaceHolder
-					isLoading={ ! showInputFields }
-					width="200px"
-					height="25px"
-				/>
-				<LoadingPlaceHolder
-					isLoading={ showFilterButton }
-					width="100px"
-					height="50px"
-					style={ {
-						marginLeft: 'auto',
-					} }
-				/>
-			</div>
-		</div>
-	</>
-);
-
-export default PriceFilterLoadingPlaceholder;
diff --git a/assets/js/blocks/price-filter/block.tsx b/assets/js/blocks/price-filter/block.tsx
index 975e3c58f56..87c5df5cb2d 100644
--- a/assets/js/blocks/price-filter/block.tsx
+++ b/assets/js/blocks/price-filter/block.tsx
@@ -28,7 +28,6 @@ import {
 import usePriceConstraints from './use-price-constraints';
 import './style.scss';
 import { Attributes } from './types';
-import PriceFilterLoadingPlaceholder from './PriceFilterLoadingPlaceholder';
 
 /**
  * Formats filter values into a string for the URL parameters needed for filtering PHP templates.
@@ -301,20 +300,6 @@ const PriceFilterBlock = ( {
 		return null;
 	}
 
-	if (
-		isLoading &&
-		! ( isFinite( minConstraint ) && isFinite( maxConstraint ) )
-	) {
-		return (
-			<PriceFilterLoadingPlaceholder
-				showInputFields={ attributes.showInputFields }
-				inlineInput={ attributes.inlineInput }
-				showFilterButton={ attributes.showFilterButton }
-				isEditor={ isEditor }
-			/>
-		);
-	}
-
 	const TagName =
 		`h${ attributes.headingLevel }` as keyof JSX.IntrinsicElements;
 
diff --git a/assets/js/blocks/price-filter/index.tsx b/assets/js/blocks/price-filter/index.tsx
index e33f60d77cb..407c62b3d13 100644
--- a/assets/js/blocks/price-filter/index.tsx
+++ b/assets/js/blocks/price-filter/index.tsx
@@ -14,7 +14,6 @@ import { useBlockProps } from '@wordpress/block-editor';
 import edit from './edit';
 import metadata from './block.json';
 import { blockAttributes } from './attributes';
-import PriceFilterLoadingPlaceholder from './PriceFilterLoadingPlaceholder';
 
 registerBlockType( metadata, {
 	title: __( 'Filter Products by Price', 'woo-gutenberg-products-block' ),
@@ -73,7 +72,6 @@ registerBlockType( metadata, {
 			className,
 			showInputFields,
 			showFilterButton,
-			inlineInput,
 			heading,
 			headingLevel,
 		} = attributes;
@@ -82,7 +80,6 @@ registerBlockType( metadata, {
 			'data-showfilterbutton': showFilterButton,
 			'data-heading': heading,
 			'data-heading-level': headingLevel,
-			'data-inline-input': inlineInput,
 		};
 		return (
 			<div
@@ -91,7 +88,10 @@ registerBlockType( metadata, {
 				} ) }
 				{ ...data }
 			>
-				<PriceFilterLoadingPlaceholder { ...attributes } />
+				<span
+					aria-hidden
+					className="wc-block-product-categories__placeholder"
+				/>
 			</div>
 		);
 	},

From 36559edfe50f4c3c2588a98b71e1ec798d70fe5b Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Thu, 11 Aug 2022 15:49:22 +0700
Subject: [PATCH 20/35] remove LoadingPlaceholder component

---
 .../components/loading-placeholder/index.tsx   | 17 -----------------
 .../components/loading-placeholder/style.scss  |  4 ----
 .../js/base/components/price-slider/index.tsx  | 18 ------------------
 3 files changed, 39 deletions(-)
 delete mode 100644 assets/js/base/components/loading-placeholder/index.tsx
 delete mode 100644 assets/js/base/components/loading-placeholder/style.scss

diff --git a/assets/js/base/components/loading-placeholder/index.tsx b/assets/js/base/components/loading-placeholder/index.tsx
deleted file mode 100644
index db90d4ac419..00000000000
--- a/assets/js/base/components/loading-placeholder/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-interface Props {
-	isLoading: boolean;
-	width: string;
-	height: string;
-}
-
-const LoadingPlaceHolder = ( { isLoading, width, height }: Props ) => {
-	if ( ! isLoading ) return null;
-	return (
-		<div
-			className="wc-block-loading-placeholder"
-			style={ { width, height } }
-		/>
-	);
-};
-
-export default LoadingPlaceHolder;
diff --git a/assets/js/base/components/loading-placeholder/style.scss b/assets/js/base/components/loading-placeholder/style.scss
deleted file mode 100644
index 98d7222f7a2..00000000000
--- a/assets/js/base/components/loading-placeholder/style.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.wc-block-loading-placeholder {
-	@include placeholder();
-	display: block;
-}
diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index 5a462b9fa2a..0a8f7b45e20 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -21,7 +21,6 @@ import './style.scss';
 import { constrainRangeSliderValues } from './constrain-range-slider-values';
 import FilterSubmitButton from '../filter-submit-button';
 import { isValidMaxValue, isValidMinValue } from './utils';
-import LoadingPlaceHolder from '../loading-placeholder';
 
 export interface PriceSliderProps {
 	/**
@@ -374,11 +373,6 @@ const PriceSlider = ( {
 			{ ( ! inlineInput || ! showInputFields ) && slider }
 			{ showInputFields && (
 				<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
-					<LoadingPlaceHolder
-						isLoading={ isLoading && ! hasValidConstraints }
-						width="120px"
-						height="34px"
-					/>
 					<FormattedMonetaryAmount
 						currency={ currency }
 						displayType="input"
@@ -426,11 +420,6 @@ const PriceSlider = ( {
 						disabled={ isLoading || ! hasValidConstraints }
 						value={ maxPriceInput }
 					/>
-					<LoadingPlaceHolder
-						isLoading={ isLoading && ! hasValidConstraints }
-						width="120px"
-						height="34px"
-					/>
 				</div>
 			) }
 			<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
@@ -452,13 +441,6 @@ const PriceSlider = ( {
 							/>
 						</div>
 					) }
-				<LoadingPlaceHolder
-					isLoading={
-						isLoading && ! showInputFields && ! hasValidConstraints
-					}
-					width="200px"
-					height="25px"
-				/>
 				{ showFilterButton && (
 					<FilterSubmitButton
 						className="wc-block-price-filter__button wc-block-components-price-slider__button"

From b348935f4d9cde7fdb6a8949367960e3d7ddcc77 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Thu, 11 Aug 2022 15:57:34 +0700
Subject: [PATCH 21/35] remove Price: prefix from the current displayed price
 range

---
 assets/js/base/components/price-slider/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index 0a8f7b45e20..78af63d7db2 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -428,8 +428,6 @@ const PriceSlider = ( {
 					Number.isFinite( minPrice ) &&
 					Number.isFinite( maxPrice ) && (
 						<div className="wc-block-price-filter__range-text wc-block-components-price-slider__range-text">
-							{ __( 'Price', 'woo-gutenberg-products-block' ) }
-							: &nbsp;
 							<FormattedMonetaryAmount
 								currency={ currency }
 								value={ minPrice }

From 2484b2d314a49d970a41a54fdf0c7bea28d4bffa Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Fri, 12 Aug 2022 12:20:50 +0700
Subject: [PATCH 22/35] update labels

---
 assets/js/blocks/price-filter/block.json | 2 +-
 assets/js/blocks/price-filter/edit.tsx   | 4 ++--
 assets/js/blocks/price-filter/index.tsx  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/js/blocks/price-filter/block.json b/assets/js/blocks/price-filter/block.json
index 4e8323204ad..9fec94d2849 100644
--- a/assets/js/blocks/price-filter/block.json
+++ b/assets/js/blocks/price-filter/block.json
@@ -2,7 +2,7 @@
 	"name": "woocommerce/price-filter",
 	"version": "1.0.0",
 	"title": "Filter Products by Price",
-	"description": "Allow customers to filter the products by choosing a lower or upper price limit. Works in combination with the All Products block.",
+	"description": "Allow customers to filter products by price range.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
 	"supports": {
diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx
index 2e260e937b7..09e20a359f0 100644
--- a/assets/js/blocks/price-filter/edit.tsx
+++ b/assets/js/blocks/price-filter/edit.tsx
@@ -53,7 +53,7 @@ export default function ( {
 				>
 					<ToggleGroupControl
 						label={ __(
-							'Price Range',
+							'Price Range Selector',
 							'woo-gutenberg-products-block'
 						) }
 						value={ showInputFields ? 'editable' : 'text' }
@@ -99,7 +99,7 @@ export default function ( {
 					) }
 					<ToggleControl
 						label={ __(
-							'Filter button',
+							"show 'Apply filters' button",
 							'woo-gutenberg-products-block'
 						) }
 						help={
diff --git a/assets/js/blocks/price-filter/index.tsx b/assets/js/blocks/price-filter/index.tsx
index 407c62b3d13..c61ce46a3bd 100644
--- a/assets/js/blocks/price-filter/index.tsx
+++ b/assets/js/blocks/price-filter/index.tsx
@@ -18,7 +18,7 @@ import { blockAttributes } from './attributes';
 registerBlockType( metadata, {
 	title: __( 'Filter Products by Price', 'woo-gutenberg-products-block' ),
 	description: __(
-		'Allow customers to filter the products by choosing a lower or upper price limit. Works in combination with the All Products block.',
+		'Allow customers to filter products by price range.',
 		'woo-gutenberg-products-block'
 	),
 	icon: {

From 4868acb2f7dc8665b94039b9d5ee688a1f570ee5 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Fri, 12 Aug 2022 14:02:51 +0700
Subject: [PATCH 23/35] extract reset button as a dedicated component

---
 .../components/filter-reset-button/index.tsx  | 43 +++++++++++++++++++
 .../components/filter-reset-button/style.scss | 14 ++++++
 .../components/filter-submit-button/index.tsx | 39 ++++++-----------
 .../filter-submit-button/style.scss           | 19 --------
 .../js/base/components/price-slider/index.tsx | 18 +++++---
 5 files changed, 82 insertions(+), 51 deletions(-)
 create mode 100644 assets/js/base/components/filter-reset-button/index.tsx
 create mode 100644 assets/js/base/components/filter-reset-button/style.scss

diff --git a/assets/js/base/components/filter-reset-button/index.tsx b/assets/js/base/components/filter-reset-button/index.tsx
new file mode 100644
index 00000000000..5f03fbc98d7
--- /dev/null
+++ b/assets/js/base/components/filter-reset-button/index.tsx
@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
+import Label from '@woocommerce/base-components/label';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+interface FilterResetButtonProps {
+	className?: string;
+	disabled?: boolean;
+	label?: string;
+	onClick: () => void;
+	screenReaderLabel?: string;
+}
+
+const FilterResetButton = ( {
+	className,
+	disabled,
+	/* translators: Reset button text for filters. */
+	label = __( 'Reset', 'woo-gutenberg-products-block' ),
+	onClick,
+	screenReaderLabel = __( 'Reset filter', 'woo-gutenberg-products-block' ),
+}: FilterResetButtonProps ): JSX.Element => {
+	return (
+		<button
+			className={ classNames(
+				'wc-block-components-filter-reset-button',
+				className
+			) }
+			onClick={ onClick }
+			disabled={ disabled }
+		>
+			<Label label={ label } screenReaderLabel={ screenReaderLabel } />
+		</button>
+	);
+};
+
+export default FilterResetButton;
diff --git a/assets/js/base/components/filter-reset-button/style.scss b/assets/js/base/components/filter-reset-button/style.scss
new file mode 100644
index 00000000000..3375f7c77e9
--- /dev/null
+++ b/assets/js/base/components/filter-reset-button/style.scss
@@ -0,0 +1,14 @@
+.wc-block-components-filter-reset-button {
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	font-size: inherit;
+
+	&:not([disabled]):hover {
+		text-decoration: underline;
+	}
+
+	&[disabled] {
+		cursor: not-allowed;
+	}
+}
diff --git a/assets/js/base/components/filter-submit-button/index.tsx b/assets/js/base/components/filter-submit-button/index.tsx
index 271fc648d64..4a320aa68e2 100644
--- a/assets/js/base/components/filter-submit-button/index.tsx
+++ b/assets/js/base/components/filter-submit-button/index.tsx
@@ -15,7 +15,6 @@ interface FilterSubmitButtonProps {
 	disabled?: boolean;
 	label?: string;
 	onClick: () => void;
-	onReset?: () => void;
 	screenReaderLabel?: string;
 }
 
@@ -25,36 +24,22 @@ const FilterSubmitButton = ( {
 	/* translators: Submit button text for filters. */
 	label = __( 'Apply', 'woo-gutenberg-products-block' ),
 	onClick,
-	onReset,
 	screenReaderLabel = __( 'Apply filter', 'woo-gutenberg-products-block' ),
 }: FilterSubmitButtonProps ): JSX.Element => {
 	return (
-		<div className="wc-block-components-filter-buttons">
-			{ onReset !== undefined && (
-				<button
-					className="wc-block-components-filter-reset-button"
-					onClick={ onReset }
-				>
-					{ __( 'Reset', 'woo-gutenberg-products-block' ) }
-				</button>
+		<button
+			type="submit"
+			className={ classNames(
+				'wp-block-button__link',
+				'wc-block-filter-submit-button',
+				'wc-block-components-filter-submit-button',
+				className
 			) }
-			<button
-				type="submit"
-				className={ classNames(
-					'wp-block-button__link',
-					'wc-block-filter-submit-button',
-					'wc-block-components-filter-submit-button',
-					className
-				) }
-				disabled={ disabled }
-				onClick={ onClick }
-			>
-				<Label
-					label={ label }
-					screenReaderLabel={ screenReaderLabel }
-				/>
-			</button>
-		</div>
+			disabled={ disabled }
+			onClick={ onClick }
+		>
+			<Label label={ label } screenReaderLabel={ screenReaderLabel } />
+		</button>
 	);
 };
 
diff --git a/assets/js/base/components/filter-submit-button/style.scss b/assets/js/base/components/filter-submit-button/style.scss
index 822779f25f2..8d05eb31ebf 100644
--- a/assets/js/base/components/filter-submit-button/style.scss
+++ b/assets/js/base/components/filter-submit-button/style.scss
@@ -1,25 +1,6 @@
-.wc-block-components-filter-buttons {
-	align-items: center;
-	display: flex;
-	justify-content: flex-end;
-	margin-left: auto;
-}
-
 .wc-block-components-filter-submit-button {
 	border: none;
 	display: block;
 	margin-left: auto;
 	white-space: nowrap;
 }
-
-.wc-block-components-filter-reset-button {
-	background: transparent;
-	border: none;
-	cursor: pointer;
-	font-size: inherit;
-	margin-right: $gap;
-
-	&:hover {
-		text-decoration: underline;
-	}
-}
diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index 78af63d7db2..daf166d06c1 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -21,6 +21,7 @@ import './style.scss';
 import { constrainRangeSliderValues } from './constrain-range-slider-values';
 import FilterSubmitButton from '../filter-submit-button';
 import { isValidMaxValue, isValidMinValue } from './utils';
+import FilterResetButton from '../filter-reset-button';
 
 export interface PriceSliderProps {
 	/**
@@ -439,15 +440,22 @@ const PriceSlider = ( {
 							/>
 						</div>
 					) }
+				<FilterResetButton
+					onClick={ () => {
+						onChange( [ minConstraint, maxConstraint ] );
+						debouncedUpdateQuery();
+					} }
+					screenReaderLabel={ __(
+						'Reset price filter',
+						'woo-gutenberg-products-block'
+					) }
+					disabled={ isLoading || ! hasValidConstraints }
+				/>
 				{ showFilterButton && (
 					<FilterSubmitButton
-						className="wc-block-price-filter__button wc-block-components-price-slider__button"
+						className="wc-block-components-price-slider__button"
 						disabled={ isLoading || ! hasValidConstraints }
 						onClick={ onSubmit }
-						onReset={ () => {
-							onChange( [ minConstraint, maxConstraint ] );
-							debouncedUpdateQuery();
-						} }
 						screenReaderLabel={ __(
 							'Apply price filter',
 							'woo-gutenberg-products-block'

From edb749f6138b3b7427913b3209617ac83301b0a1 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Fri, 12 Aug 2022 14:23:14 +0700
Subject: [PATCH 24/35] update price text section

---
 .../filter-submit-button/style.scss           |  1 -
 .../js/base/components/price-slider/index.tsx |  9 +++---
 .../base/components/price-slider/style.scss   | 15 ++++++++++
 assets/js/blocks/price-filter/edit.tsx        |  2 +-
 .../test/__snapshots__/block.js.snap          | 30 ++++++++-----------
 5 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/assets/js/base/components/filter-submit-button/style.scss b/assets/js/base/components/filter-submit-button/style.scss
index 8d05eb31ebf..be6d6046782 100644
--- a/assets/js/base/components/filter-submit-button/style.scss
+++ b/assets/js/base/components/filter-submit-button/style.scss
@@ -1,6 +1,5 @@
 .wc-block-components-filter-submit-button {
 	border: none;
 	display: block;
-	margin-left: auto;
 	white-space: nowrap;
 }
diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index daf166d06c1..6acd4122fe4 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -423,23 +423,24 @@ const PriceSlider = ( {
 					/>
 				</div>
 			) }
-			<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
+			<div className="wc-block-price-filter__range-text wc-block-components-price-slider__range-text">
 				{ ! showInputFields &&
 					! isLoading &&
 					Number.isFinite( minPrice ) &&
 					Number.isFinite( maxPrice ) && (
-						<div className="wc-block-price-filter__range-text wc-block-components-price-slider__range-text">
+						<>
 							<FormattedMonetaryAmount
 								currency={ currency }
 								value={ minPrice }
 							/>
-							&nbsp;&ndash;&nbsp;
 							<FormattedMonetaryAmount
 								currency={ currency }
 								value={ maxPrice }
 							/>
-						</div>
+						</>
 					) }
+			</div>
+			<div className="wc-block-components-price-slider__actions">
 				<FilterResetButton
 					onClick={ () => {
 						onChange( [ minConstraint, maxConstraint ] );
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index 52e56479be8..00223f0ca21 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -114,6 +114,21 @@
 		padding: $gap-smaller;
 	}
 }
+
+.wc-block-components-price-slider__range-text {
+	align-items: center;
+	display: flex;
+	justify-content: space-between;
+	margin: $gap 0;
+}
+
+.wc-block-components-price-slider__actions {
+	align-items: center;
+	display: flex;
+	gap: $gap-smaller;
+	justify-content: flex-end;
+}
+
 .wc-block-components-price-slider__range-input {
 	@include reset;
 	width: 100%;
diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx
index 09e20a359f0..be85f6dac26 100644
--- a/assets/js/blocks/price-filter/edit.tsx
+++ b/assets/js/blocks/price-filter/edit.tsx
@@ -99,7 +99,7 @@ export default function ( {
 					) }
 					<ToggleControl
 						label={ __(
-							"show 'Apply filters' button",
+							"Show 'Apply filters' button",
 							'woo-gutenberg-products-block'
 						) }
 						help={
diff --git a/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap b/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap
index 1e1fb5888de..cff704e558c 100644
--- a/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap
+++ b/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap
@@ -94,25 +94,21 @@ exports[`Testing stock filter renders the stock filter block with the filter but
         </label>
       </li>
     </ul>
-    <div
-      class="wc-block-components-filter-buttons"
+    <button
+      class="wp-block-button__link wc-block-filter-submit-button wc-block-components-filter-submit-button wc-block-stock-filter__button"
+      type="submit"
     >
-      <button
-        class="wp-block-button__link wc-block-filter-submit-button wc-block-components-filter-submit-button wc-block-stock-filter__button"
-        type="submit"
+      <span
+        aria-hidden="true"
       >
-        <span
-          aria-hidden="true"
-        >
-          Apply
-        </span>
-        <span
-          class="screen-reader-text"
-        >
-          Apply filter
-        </span>
-      </button>
-    </div>
+        Apply
+      </span>
+      <span
+        class="screen-reader-text"
+      >
+        Apply filter
+      </span>
+    </button>
   </div>
 </div>
 `;

From 42d2b829765db346cfb174c60752b5cb0525c497 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Fri, 12 Aug 2022 14:31:03 +0700
Subject: [PATCH 25/35] update reset button behavior

---
 .../js/base/components/price-slider/index.tsx | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index 6acd4122fe4..01b3ba3702f 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -441,17 +441,24 @@ const PriceSlider = ( {
 					) }
 			</div>
 			<div className="wc-block-components-price-slider__actions">
-				<FilterResetButton
-					onClick={ () => {
-						onChange( [ minConstraint, maxConstraint ] );
-						debouncedUpdateQuery();
-					} }
-					screenReaderLabel={ __(
-						'Reset price filter',
-						'woo-gutenberg-products-block'
-					) }
-					disabled={ isLoading || ! hasValidConstraints }
-				/>
+				{ ( showFilterButton ||
+					minPrice !== minConstraint ||
+					maxPrice !== maxConstraint ) && (
+					<FilterResetButton
+						onClick={ () => {
+							onChange( [ minConstraint, maxConstraint ] );
+							debouncedUpdateQuery();
+						} }
+						screenReaderLabel={ __(
+							'Reset price filter',
+							'woo-gutenberg-products-block'
+						) }
+						disabled={
+							minPrice === minConstraint &&
+							maxPrice === maxConstraint
+						}
+					/>
+				) }
 				{ showFilterButton && (
 					<FilterSubmitButton
 						className="wc-block-components-price-slider__button"

From d291e8cf1cf169ee44dfe5d05c10a461b0e57b7d Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Fri, 12 Aug 2022 14:32:33 +0700
Subject: [PATCH 26/35] avoid breaking filter submit button style for other
 filter blocks

---
 assets/js/base/components/filter-submit-button/style.scss | 1 +
 assets/js/base/components/price-slider/style.scss         | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/assets/js/base/components/filter-submit-button/style.scss b/assets/js/base/components/filter-submit-button/style.scss
index be6d6046782..8d05eb31ebf 100644
--- a/assets/js/base/components/filter-submit-button/style.scss
+++ b/assets/js/base/components/filter-submit-button/style.scss
@@ -1,5 +1,6 @@
 .wc-block-components-filter-submit-button {
 	border: none;
 	display: block;
+	margin-left: auto;
 	white-space: nowrap;
 }
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index 00223f0ca21..9493ac340f8 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -125,8 +125,12 @@
 .wc-block-components-price-slider__actions {
 	align-items: center;
 	display: flex;
-	gap: $gap-smaller;
+	gap: $gap;
 	justify-content: flex-end;
+
+	.wc-block-components-filter-submit-button {
+		margin-left: 0;
+	}
 }
 
 .wc-block-components-price-slider__range-input {

From 5f29d5a738fd1ed830430cd41a4d290c99bac3ea Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Fri, 12 Aug 2022 16:18:29 +0700
Subject: [PATCH 27/35] rename block to Filter by Price

---
 assets/js/blocks/price-filter/block.json                     | 2 +-
 assets/js/blocks/price-filter/edit.tsx                       | 5 +----
 assets/js/blocks/price-filter/index.tsx                      | 2 +-
 docs/designers/theming/all-products-and-filters.md           | 2 +-
 readme.txt                                                   | 2 +-
 .../__fixtures__/filter-products-by-price.fixture.json       | 2 +-
 tests/e2e/specs/backend/price-filter.test.js                 | 2 +-
 tests/e2e/specs/shopper/active-filters.test.ts               | 2 +-
 tests/e2e/specs/shopper/filter-products-by-price.test.ts     | 2 +-
 9 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/assets/js/blocks/price-filter/block.json b/assets/js/blocks/price-filter/block.json
index 9fec94d2849..2ffac1dc9fc 100644
--- a/assets/js/blocks/price-filter/block.json
+++ b/assets/js/blocks/price-filter/block.json
@@ -1,7 +1,7 @@
 {
 	"name": "woocommerce/price-filter",
 	"version": "1.0.0",
-	"title": "Filter Products by Price",
+	"title": "Filter by Price",
 	"description": "Allow customers to filter products by price range.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx
index be85f6dac26..9eb45edc5d8 100644
--- a/assets/js/blocks/price-filter/edit.tsx
+++ b/assets/js/blocks/price-filter/edit.tsx
@@ -144,10 +144,7 @@ export default function ( {
 		<Placeholder
 			className="wc-block-price-slider"
 			icon={ <Icon icon={ currencyDollar } /> }
-			label={ __(
-				'Filter Products by Price',
-				'woo-gutenberg-products-block'
-			) }
+			label={ __( 'Filter by Price', 'woo-gutenberg-products-block' ) }
 			instructions={ __(
 				'Display a slider to filter products in your store by price.',
 				'woo-gutenberg-products-block'
diff --git a/assets/js/blocks/price-filter/index.tsx b/assets/js/blocks/price-filter/index.tsx
index c61ce46a3bd..23551e049a0 100644
--- a/assets/js/blocks/price-filter/index.tsx
+++ b/assets/js/blocks/price-filter/index.tsx
@@ -16,7 +16,7 @@ import metadata from './block.json';
 import { blockAttributes } from './attributes';
 
 registerBlockType( metadata, {
-	title: __( 'Filter Products by Price', 'woo-gutenberg-products-block' ),
+	title: __( 'Filter by Price', 'woo-gutenberg-products-block' ),
 	description: __(
 		'Allow customers to filter products by price range.',
 		'woo-gutenberg-products-block'
diff --git a/docs/designers/theming/all-products-and-filters.md b/docs/designers/theming/all-products-and-filters.md
index c13f5efe641..222cbe403fc 100644
--- a/docs/designers/theming/all-products-and-filters.md
+++ b/docs/designers/theming/all-products-and-filters.md
@@ -2,7 +2,7 @@
 
 ## Price slider accent color
 
-The Filter Products by Price block includes a price slider which uses an accent color to show the selected range.
+The Filter by Price block includes a price slider which uses an accent color to show the selected range.
 
 ![Price filter screenshot](https://user-images.githubusercontent.com/3616980/96570001-2053f900-12ca-11eb-8a75-8a54f243bda3.png)
 
diff --git a/readme.txt b/readme.txt
index c834b932a30..b9fff04313b 100644
--- a/readme.txt
+++ b/readme.txt
@@ -34,7 +34,7 @@ Use this plugin if you want access to the bleeding edge of available blocks for
 - **All Reviews**
 - **Product Search**
 - **All Products**
-- **Filter Products by Price**
+- **Filter by Price**
 - **Filter Products by Attribute**
 - **Filter Products by Stock**
 - **Active Product Filters**
diff --git a/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json b/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json
index 3cd1ab1387c..d63544f4f19 100644
--- a/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json
+++ b/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json
@@ -1 +1 @@
-{"title":"Filter Products by Price Block","pageContent":"<!-- wp:woocommerce/price-filter -->\n<div class=\"wp-block-woocommerce-price-filter is-loading\" data-showinputfields=\"true\" data-showfilterbutton=\"false\" data-heading=\"Filter by price\" data-heading-level=\"3\"><span aria-hidden=\"true\" class=\"wc-block-product-categories__placeholder\"></span></div>\n<!-- /wp:woocommerce/price-filter -->"}
+{"title":"Filter by Price Block","pageContent":"<!-- wp:woocommerce/price-filter -->\n<div class=\"wp-block-woocommerce-price-filter is-loading\" data-showinputfields=\"true\" data-showfilterbutton=\"false\" data-heading=\"Filter by price\" data-heading-level=\"3\"><span aria-hidden=\"true\" class=\"wc-block-product-categories__placeholder\"></span></div>\n<!-- /wp:woocommerce/price-filter -->"}
diff --git a/tests/e2e/specs/backend/price-filter.test.js b/tests/e2e/specs/backend/price-filter.test.js
index 6acd0887d0e..4b775ca6723 100644
--- a/tests/e2e/specs/backend/price-filter.test.js
+++ b/tests/e2e/specs/backend/price-filter.test.js
@@ -17,7 +17,7 @@ import {
 import { insertBlockDontWaitForInsertClose } from '../../utils.js';
 
 const block = {
-	name: 'Filter Products by Price',
+	name: 'Filter by Price',
 	slug: 'woocommerce/price-filter',
 	class: '.wp-block-woocommerce-price-filter',
 };
diff --git a/tests/e2e/specs/shopper/active-filters.test.ts b/tests/e2e/specs/shopper/active-filters.test.ts
index e6b07dd3ded..ee9b2577ce5 100644
--- a/tests/e2e/specs/shopper/active-filters.test.ts
+++ b/tests/e2e/specs/shopper/active-filters.test.ts
@@ -59,7 +59,7 @@ const FILTER_CAPACITY_PROPERTY = '128gb';
 const { selectors } = block;
 
 const insertBlocks = async () => {
-	await insertBlock( 'Filter Products by Price' );
+	await insertBlock( 'Filter by Price' );
 	await insertBlock( 'Filter Products by Stock' );
 	await insertBlock( 'Filter Products by Attribute' );
 	await insertBlock( block.name );
diff --git a/tests/e2e/specs/shopper/filter-products-by-price.test.ts b/tests/e2e/specs/shopper/filter-products-by-price.test.ts
index 87062c4e5f7..3e0a8637385 100644
--- a/tests/e2e/specs/shopper/filter-products-by-price.test.ts
+++ b/tests/e2e/specs/shopper/filter-products-by-price.test.ts
@@ -24,7 +24,7 @@ import {
 import { clickLink } from '../../../utils';
 
 const block = {
-	name: 'Filter Products by Price',
+	name: 'Filter by Price',
 	slug: 'woocommerce/price-filter',
 	class: '.wc-block-price-filter',
 	selectors: {

From bc185d344a09252504f5b3ff0d02047700d91c2a Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Fri, 12 Aug 2022 18:02:42 +0700
Subject: [PATCH 28/35] fix e2e test

---
 .../js/base/components/price-slider/index.tsx | 35 +++++++++----------
 tests/e2e/specs/backend/price-filter.test.js  |  6 ++--
 .../shopper/filter-products-by-price.test.ts  |  3 +-
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index 01b3ba3702f..ee941326928 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -423,23 +423,22 @@ const PriceSlider = ( {
 					/>
 				</div>
 			) }
-			<div className="wc-block-price-filter__range-text wc-block-components-price-slider__range-text">
-				{ ! showInputFields &&
-					! isLoading &&
-					Number.isFinite( minPrice ) &&
-					Number.isFinite( maxPrice ) && (
-						<>
-							<FormattedMonetaryAmount
-								currency={ currency }
-								value={ minPrice }
-							/>
-							<FormattedMonetaryAmount
-								currency={ currency }
-								value={ maxPrice }
-							/>
-						</>
-					) }
-			</div>
+
+			{ ! showInputFields &&
+				! isLoading &&
+				Number.isFinite( minPrice ) &&
+				Number.isFinite( maxPrice ) && (
+					<div className="wc-block-price-filter__range-text wc-block-components-price-slider__range-text">
+						<FormattedMonetaryAmount
+							currency={ currency }
+							value={ minPrice }
+						/>
+						<FormattedMonetaryAmount
+							currency={ currency }
+							value={ maxPrice }
+						/>
+					</div>
+				) }
 			<div className="wc-block-components-price-slider__actions">
 				{ ( showFilterButton ||
 					minPrice !== minConstraint ||
@@ -461,7 +460,7 @@ const PriceSlider = ( {
 				) }
 				{ showFilterButton && (
 					<FilterSubmitButton
-						className="wc-block-components-price-slider__button"
+						className="wc-block-price-filter__button wc-block-components-price-slider__button"
 						disabled={ isLoading || ! hasValidConstraints }
 						onClick={ onSubmit }
 						screenReaderLabel={ __(
diff --git a/tests/e2e/specs/backend/price-filter.test.js b/tests/e2e/specs/backend/price-filter.test.js
index 4b775ca6723..2f26a88d3e8 100644
--- a/tests/e2e/specs/backend/price-filter.test.js
+++ b/tests/e2e/specs/backend/price-filter.test.js
@@ -91,15 +91,15 @@ describe( `${ block.name } Block`, () => {
 				);
 			} );
 
-			it( 'allows you to toggle go button', async () => {
+			it( 'allows you to toggle filter button', async () => {
 				await expect( page ).toClick( 'label', {
-					text: 'Filter button',
+					text: "Show 'Apply filters' button",
 				} );
 				await expect( page ).toMatchElement(
 					'button.wc-block-filter-submit-button.wc-block-price-filter__button'
 				);
 				await expect( page ).toClick( 'label', {
-					text: 'Filter button',
+					text: "Show 'Apply filters' button",
 				} );
 			} );
 		} );
diff --git a/tests/e2e/specs/shopper/filter-products-by-price.test.ts b/tests/e2e/specs/shopper/filter-products-by-price.test.ts
index 3e0a8637385..0add2ce3064 100644
--- a/tests/e2e/specs/shopper/filter-products-by-price.test.ts
+++ b/tests/e2e/specs/shopper/filter-products-by-price.test.ts
@@ -29,7 +29,8 @@ const block = {
 	class: '.wc-block-price-filter',
 	selectors: {
 		editor: {
-			filterButtonToggle: "//label[text()='Filter button']",
+			filterButtonToggle:
+				'//label[text()="Show \'Apply filters\' button"]',
 		},
 		frontend: {
 			priceMaxAmount: '.wc-block-price-filter__amount--max',

From 79fa2eaca743c6390ca3db86c27505cc9cffb670 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Mon, 15 Aug 2022 11:31:35 +0700
Subject: [PATCH 29/35] remove border support

---
 assets/js/blocks/price-filter/index.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/assets/js/blocks/price-filter/index.tsx b/assets/js/blocks/price-filter/index.tsx
index 23551e049a0..f6e7dc08aea 100644
--- a/assets/js/blocks/price-filter/index.tsx
+++ b/assets/js/blocks/price-filter/index.tsx
@@ -5,7 +5,6 @@ import { __ } from '@wordpress/i18n';
 import { createBlock, registerBlockType } from '@wordpress/blocks';
 import classNames from 'classnames';
 import { Icon, currencyDollar } from '@wordpress/icons';
-import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 import { useBlockProps } from '@wordpress/block-editor';
 
 /**
@@ -29,16 +28,6 @@ registerBlockType( metadata, {
 			/>
 		),
 	},
-	supports: {
-		...metadata.supports,
-		...( isFeaturePluginBuild() && {
-			__experimentalBorder: {
-				radius: true,
-				color: true,
-				width: false,
-			},
-		} ),
-	},
 	attributes: {
 		...metadata.attributes,
 		...blockAttributes,

From 61e3b375483549834b799dc8bbe189cb713fe89a Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Mon, 15 Aug 2022 11:59:26 +0700
Subject: [PATCH 30/35] adjust padding for elments

---
 assets/js/base/components/price-slider/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index 9493ac340f8..11960131c13 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -102,7 +102,7 @@
 	display: flex;
 	gap: $gap-smaller;
 	justify-content: space-between;
-	margin-top: $gap-large;
+	margin: $gap-large 0;
 
 	.wc-block-components-price-slider__amount {
 		margin: 0;
@@ -119,7 +119,7 @@
 	align-items: center;
 	display: flex;
 	justify-content: space-between;
-	margin: $gap 0;
+	margin: $gap-large 0;
 }
 
 .wc-block-components-price-slider__actions {

From 4972bc8c4186b847886daf19a1fffddef07fc939 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Mon, 15 Aug 2022 12:10:45 +0700
Subject: [PATCH 31/35] rename panel title

---
 assets/js/blocks/price-filter/edit.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx
index 9eb45edc5d8..4e2fbbb7187 100644
--- a/assets/js/blocks/price-filter/edit.tsx
+++ b/assets/js/blocks/price-filter/edit.tsx
@@ -46,10 +46,7 @@ export default function ( {
 		return (
 			<InspectorControls key="inspector">
 				<PanelBody
-					title={ __(
-						'Block Settings',
-						'woo-gutenberg-products-block'
-					) }
+					title={ __( 'Settings', 'woo-gutenberg-products-block' ) }
 				>
 					<ToggleGroupControl
 						label={ __(

From 28b419303c75ccb08f40947e1ead7545ff44636b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Tue, 16 Aug 2022 15:39:35 +0200
Subject: [PATCH 32/35] Make the inline option enabled by default and fix
 frontend rendering

---
 assets/js/base/components/price-slider/index.tsx | 2 +-
 assets/js/blocks/price-filter/block.json         | 2 +-
 assets/js/blocks/price-filter/frontend.ts        | 2 +-
 assets/js/blocks/price-filter/index.tsx          | 3 +++
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index ee941326928..391ccf8e58a 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -84,7 +84,7 @@ const PriceSlider = ( {
 	currency,
 	showInputFields = true,
 	showFilterButton = false,
-	inlineInput = false,
+	inlineInput = true,
 	isLoading = false,
 	onSubmit = () => void 0,
 }: PriceSliderProps ): JSX.Element => {
diff --git a/assets/js/blocks/price-filter/block.json b/assets/js/blocks/price-filter/block.json
index 2ffac1dc9fc..d22b929c524 100644
--- a/assets/js/blocks/price-filter/block.json
+++ b/assets/js/blocks/price-filter/block.json
@@ -29,7 +29,7 @@
 		},
 		"inlineInput": {
 			"type": "boolean",
-			"default": false 
+			"default": true
 		},
 		"showFilterButton": {
 			"type": "boolean",
diff --git a/assets/js/blocks/price-filter/frontend.ts b/assets/js/blocks/price-filter/frontend.ts
index ef69736b03d..99c82ff074d 100644
--- a/assets/js/blocks/price-filter/frontend.ts
+++ b/assets/js/blocks/price-filter/frontend.ts
@@ -14,7 +14,7 @@ const getProps = ( el: HTMLElement ) => {
 	return {
 		attributes: {
 			showInputFields: el.dataset.showinputfields === 'true',
-			inlineInput: el.dataset.inlineInput === 'true',
+			inlineInput: el.dataset.inlineinput === 'true',
 			showFilterButton: el.dataset.showfilterbutton === 'true',
 			heading: el.dataset.heading || blockAttributes.heading.default,
 			headingLevel: el.dataset.headingLevel
diff --git a/assets/js/blocks/price-filter/index.tsx b/assets/js/blocks/price-filter/index.tsx
index f6e7dc08aea..1edf6e34330 100644
--- a/assets/js/blocks/price-filter/index.tsx
+++ b/assets/js/blocks/price-filter/index.tsx
@@ -51,6 +51,7 @@ registerBlockType( metadata, {
 								'woo-gutenberg-products-block'
 							),
 						headingLevel: 3,
+						inlineInput: true,
 					} ),
 			},
 		],
@@ -63,12 +64,14 @@ registerBlockType( metadata, {
 			showFilterButton,
 			heading,
 			headingLevel,
+			inlineInput,
 		} = attributes;
 		const data = {
 			'data-showinputfields': showInputFields,
 			'data-showfilterbutton': showFilterButton,
 			'data-heading': heading,
 			'data-heading-level': headingLevel,
+			'data-inlineinput': inlineInput,
 		};
 		return (
 			<div

From e462a035015645dd970dfa55830753d4e1e2b653 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Tue, 16 Aug 2022 16:19:44 +0200
Subject: [PATCH 33/35] Make the `Price Range Selector` uppercase

---
 assets/js/blocks/price-filter/editor.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/assets/js/blocks/price-filter/editor.scss b/assets/js/blocks/price-filter/editor.scss
index a203fac89a6..238b9cd7404 100644
--- a/assets/js/blocks/price-filter/editor.scss
+++ b/assets/js/blocks/price-filter/editor.scss
@@ -23,6 +23,11 @@
 	}
 }
 
+.components-base-control__label {
+	text-transform: uppercase;
+	@include font-size(small);
+}
+
 .wc-block-price-slider {
 	.components-placeholder__instructions {
 		border-bottom: 1px solid #e0e2e6;

From fa041dd314ff7ff9183ea0a83cce002985c99a65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Tue, 16 Aug 2022 16:29:05 +0200
Subject: [PATCH 34/35] Show `Reset` button only when a selection has been made

---
 assets/js/base/components/filter-reset-button/index.tsx | 3 ---
 assets/js/base/components/price-slider/index.tsx        | 7 +------
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/assets/js/base/components/filter-reset-button/index.tsx b/assets/js/base/components/filter-reset-button/index.tsx
index 5f03fbc98d7..17bbb3434b3 100644
--- a/assets/js/base/components/filter-reset-button/index.tsx
+++ b/assets/js/base/components/filter-reset-button/index.tsx
@@ -12,7 +12,6 @@ import './style.scss';
 
 interface FilterResetButtonProps {
 	className?: string;
-	disabled?: boolean;
 	label?: string;
 	onClick: () => void;
 	screenReaderLabel?: string;
@@ -20,7 +19,6 @@ interface FilterResetButtonProps {
 
 const FilterResetButton = ( {
 	className,
-	disabled,
 	/* translators: Reset button text for filters. */
 	label = __( 'Reset', 'woo-gutenberg-products-block' ),
 	onClick,
@@ -33,7 +31,6 @@ const FilterResetButton = ( {
 				className
 			) }
 			onClick={ onClick }
-			disabled={ disabled }
 		>
 			<Label label={ label } screenReaderLabel={ screenReaderLabel } />
 		</button>
diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index 391ccf8e58a..372d46927a0 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -440,8 +440,7 @@ const PriceSlider = ( {
 					</div>
 				) }
 			<div className="wc-block-components-price-slider__actions">
-				{ ( showFilterButton ||
-					minPrice !== minConstraint ||
+				{ ( minPrice !== minConstraint ||
 					maxPrice !== maxConstraint ) && (
 					<FilterResetButton
 						onClick={ () => {
@@ -452,10 +451,6 @@ const PriceSlider = ( {
 							'Reset price filter',
 							'woo-gutenberg-products-block'
 						) }
-						disabled={
-							minPrice === minConstraint &&
-							maxPrice === maxConstraint
-						}
 					/>
 				) }
 				{ showFilterButton && (

From 12b425190379cca4d161d1123c34f4269e65f4eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Tue, 16 Aug 2022 17:40:37 +0200
Subject: [PATCH 35/35] Revert the `save` change to avoid the 'Block Recovery
 Prompt'

---
 assets/js/blocks/price-filter/frontend.ts | 2 +-
 assets/js/blocks/price-filter/index.tsx   | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/assets/js/blocks/price-filter/frontend.ts b/assets/js/blocks/price-filter/frontend.ts
index 99c82ff074d..6d38ed17078 100644
--- a/assets/js/blocks/price-filter/frontend.ts
+++ b/assets/js/blocks/price-filter/frontend.ts
@@ -14,7 +14,7 @@ const getProps = ( el: HTMLElement ) => {
 	return {
 		attributes: {
 			showInputFields: el.dataset.showinputfields === 'true',
-			inlineInput: el.dataset.inlineinput === 'true',
+			inlineInput: el.dataset.inlineInput !== 'false',
 			showFilterButton: el.dataset.showfilterbutton === 'true',
 			heading: el.dataset.heading || blockAttributes.heading.default,
 			headingLevel: el.dataset.headingLevel
diff --git a/assets/js/blocks/price-filter/index.tsx b/assets/js/blocks/price-filter/index.tsx
index 1edf6e34330..b8e5ded64db 100644
--- a/assets/js/blocks/price-filter/index.tsx
+++ b/assets/js/blocks/price-filter/index.tsx
@@ -64,14 +64,12 @@ registerBlockType( metadata, {
 			showFilterButton,
 			heading,
 			headingLevel,
-			inlineInput,
 		} = attributes;
 		const data = {
 			'data-showinputfields': showInputFields,
 			'data-showfilterbutton': showFilterButton,
 			'data-heading': heading,
 			'data-heading-level': headingLevel,
-			'data-inlineinput': inlineInput,
 		};
 		return (
 			<div