Price Filter: Fix styling issue when Inline input fields is enabled (#…

…45197)

* Fix styling issue in the Editor when Inline input fields is enabled

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Fix styling issue on the Frontend when Inline input fields is enabled

* Fix css lint errors

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/price-filter/components/price-slider.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { useCollectionData } from '@woocommerce/base-context/hooks';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -14,7 +15,7 @@ import { getFormattedPrice } from '../utils';
  * reusing the EditProps type here.
  */
 export const PriceSlider = ( { attributes }: EditProps ) => {
-	const { showInputFields } = attributes;
+	const { inlineInput, showInputFields } = attributes;
 
 	const { results, isLoading } = useCollectionData( {
 		queryPrices: true,
@@ -52,8 +53,19 @@ export const PriceSlider = ( { attributes }: EditProps ) => {
 	);
 
 	return (
-		<div>
-			<div className="range">
+		<div
+			className={ classNames(
+				'wp-block-woocommerce-product-filter-price-content',
+				{
+					'wp-block-woocommerce-product-filter-price-content--inline':
+						inlineInput && showInputFields,
+				}
+			) }
+		>
+			<div className="wp-block-woocommerce-product-filter-price-content-left-input text">
+				{ priceMin }
+			</div>
+			<div className="wp-block-woocommerce-product-filter-price-content-price-range-slider range">
 				<div className="range-bar"></div>
 				<input
 					type="range"
@@ -72,8 +84,7 @@ export const PriceSlider = ( { attributes }: EditProps ) => {
 					onChange={ onChange }
 				/>
 			</div>
-			<div className="text">
-				{ priceMin }
+			<div className="wp-block-woocommerce-product-filter-price-content-right-input text">
 				{ priceMax }
 			</div>
 		</div>

plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/price-filter/edit.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { useBlockProps } from '@wordpress/block-editor';
-import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -12,13 +11,7 @@ import { PriceSlider } from './components/price-slider';
 import { Inspector } from './components/inspector';
 
 const Edit = ( props: EditProps ) => {
-	const { showInputFields, inlineInput } = props.attributes;
-
-	const blockProps = useBlockProps( {
-		className: classNames( {
-			'inline-input': inlineInput && showInputFields,
-		} ),
-	} );
+	const blockProps = useBlockProps();
 
 	return (
 		<div { ...blockProps }>

plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/price-filter/style.scss

@@ -51,7 +51,34 @@
 }
 
 .wp-block-woocommerce-product-filter-price {
+	.wp-block-woocommerce-product-filter-price-content {
+		display: grid;
+		grid-template-areas:
+			"price-slider price-slider price-slider"
+			"left-input   middle-input right-input";
+		grid-template-columns: auto 1fr auto;
+		column-gap: $gap-small;
+
+		&.wp-block-woocommerce-product-filter-price-content--inline {
+			grid-template-areas: "left-input price-slider right-input";
+			grid-template-columns: auto 1fr auto;
+		}
+	}
+
+	.wp-block-woocommerce-product-filter-price-content-price-range-slider {
+		grid-area: price-slider;
+	}
+
+	.wp-block-woocommerce-product-filter-price-content-left-input {
+		grid-area: left-input;
+	}
+
+	.wp-block-woocommerce-product-filter-price-content-right-input {
+		grid-area: right-input;
+	}
+
 	.range {
+		grid-area: "price-slider";
 		--low: 0%;
 		--high: 100%;
 		--range-color: currentColor;
@@ -183,12 +210,6 @@
 	}
 
 	.text {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin: 16px 0;
-		gap: 8px;
-
 		input[type="text"] {
 			padding: 8px;
 			margin: 0;
@@ -203,17 +224,4 @@
 		}
 	}
 
-	&.inline-input {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-
-		.text {
-			display: contents;
-		}
-
-		.text .min {
-			order: -1;
-		}
-	}
 }

plugins/woocommerce/changelog/45197-fix-44755-price-filter-styling-issue-when-inline-input-fields-is-enabled

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix styling issue for the Price Filter block preventing fields from appearing inline when the Inline input fields option is enabled

plugins/woocommerce/src/Blocks/BlockTypes/ProductFilterPrice.php

@@ -141,7 +141,6 @@ protected function render( $attributes, $content, $block ) {
 		) = $attributes;
 
 		$wrapper_attributes = array(
-			'class'               => $show_input_fields && $inline_input ? 'inline-input' : '',
 			'data-wc-interactive' => wp_json_encode( array( 'namespace' => $this->get_full_block_name() ) ),
 			'data-wc-context'     => wp_json_encode( $data ),
 			'data-has-filter'     => 'no',
@@ -195,13 +194,23 @@ class="max"
 
 		$wrapper_attributes['data-has-filter'] = 'yes';
 
+		$filter_price_content_classes = array(
+			'wp-block-woocommerce-product-filter-price-content',
+			$show_input_fields && $inline_input ? 'wp-block-woocommerce-product-filter-price-content--inline' : '',
+		);
+
 		ob_start();
 		?>
 			<div <?php echo get_block_wrapper_attributes( $wrapper_attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
 				<?php echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
-				<div class="filter-controls">
+				<div
+					class="<?php echo esc_attr( implode( ' ', $filter_price_content_classes ) ); ?>"
+				>
+					<div class="wp-block-woocommerce-product-filter-price-content-left-input text">
+						<?php echo $price_min; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+					</div>
 					<div
-						class="range"
+						class="wp-block-woocommerce-product-filter-price-content-price-range-slider range"
 						style="<?php echo esc_attr( $range_style ); ?>"
 						data-wc-bind--style="state.rangeStyle"
 					>
@@ -231,9 +240,8 @@ class="max"
 							data-wc-on--change="actions.updateProducts"
 						>
 					</div>
-					<div class="text">
+					<div class="wp-block-woocommerce-product-filter-price-content-right-input text">
 						<?php // $price_min and $price_max are escaped in the sprintf() calls above. ?>
-						<?php echo $price_min; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 						<?php echo $price_max; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 					</div>
 				</div>