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>
This commit is contained in:
Alexandre Lara
GitHub
parent
be9b3ab4f0
commit
8163b83bf7
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 }>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -141,7 +141,6 @@ final class ProductFilterPrice extends AbstractBlock {
|
|||
) = $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 @@ final class ProductFilterPrice extends AbstractBlock {
|
|||
|
||||
$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="range"
|
||||
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="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 @@ final class ProductFilterPrice extends AbstractBlock {
|
|||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue