Price Filter Block Design update

assets/js/base/components/filter-reset-button/index.tsx

@@ -12,15 +12,13 @@ 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,
@@ -33,7 +31,6 @@ const FilterResetButton = ( {
 				className
 			) }
 			onClick={ onClick }
-			disabled={ disabled }
 		>
 			<Label label={ label } screenReaderLabel={ screenReaderLabel } />
 		</button>

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 => {
@@ -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 && (

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

@@ -29,7 +29,7 @@
 		},
 		"inlineInput": {
 			"type": "boolean",
-			"default": false 
+			"default": true
 		},
 		"showFilterButton": {
 			"type": "boolean",

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;

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

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