From 7834060a20cd7f9c36d4f0d74fd5d688583a808d Mon Sep 17 00:00:00 2001
From: Luigi <gigitux@gmail.com>
Date: Thu, 13 Jan 2022 17:50:45 +0100
Subject: [PATCH] Price Filter block: enable global style #4965

Price Filter block: enable global style #4965
---
 assets/js/blocks/price-filter/block.js    |  1 +
 assets/js/blocks/price-filter/edit.js     | 19 +++++++----------
 assets/js/blocks/price-filter/editor.scss | 24 ++++++++++++++--------
 assets/js/blocks/price-filter/index.js    | 18 +++++++++++++++-
 assets/js/blocks/price-filter/style.scss  | 25 +++++++++++++++++++++++
 5 files changed, 65 insertions(+), 22 deletions(-)
 create mode 100644 assets/js/blocks/price-filter/style.scss

diff --git a/assets/js/blocks/price-filter/block.js b/assets/js/blocks/price-filter/block.js
index 36e8dc9204c..ade15338918 100644
--- a/assets/js/blocks/price-filter/block.js
+++ b/assets/js/blocks/price-filter/block.js
@@ -17,6 +17,7 @@ import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
  * Internal dependencies
  */
 import usePriceConstraints from './use-price-constraints.js';
+import './style.scss';
 
 /**
  * Component displaying a price filter.
diff --git a/assets/js/blocks/price-filter/edit.js b/assets/js/blocks/price-filter/edit.js
index 6b1ba2eb70c..2c7d4994bf7 100644
--- a/assets/js/blocks/price-filter/edit.js
+++ b/assets/js/blocks/price-filter/edit.js
@@ -2,8 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import {
 	Placeholder,
 	Disabled,
@@ -26,13 +25,14 @@ import './editor.scss';
 
 export default function ( { attributes, setAttributes } ) {
 	const {
-		className,
 		heading,
 		headingLevel,
 		showInputFields,
 		showFilterButton,
 	} = attributes;
 
+	const blockProps = useBlockProps();
+
 	const getInspectorControls = () => {
 		return (
 			<InspectorControls key="inspector">
@@ -152,16 +152,11 @@ export default function ( { attributes, setAttributes } ) {
 	);
 
 	return (
-		<>
+		<div { ...blockProps }>
 			{ blocksConfig.productCount === 0 ? (
 				noProductsPlaceholder()
 			) : (
-				<div
-					className={ classNames(
-						className,
-						'wp-block-woocommerce-price-filter'
-					) }
-				>
+				<>
 					{ getInspectorControls() }
 					<BlockTitle
 						className="wc-block-price-filter__title"
@@ -174,8 +169,8 @@ export default function ( { attributes, setAttributes } ) {
 					<Disabled>
 						<Block attributes={ attributes } isEditor={ true } />
 					</Disabled>
-				</div>
+				</>
 			) }
-		</>
+		</div>
 	);
 }
diff --git a/assets/js/blocks/price-filter/editor.scss b/assets/js/blocks/price-filter/editor.scss
index 958c666984a..44c62d27dea 100644
--- a/assets/js/blocks/price-filter/editor.scss
+++ b/assets/js/blocks/price-filter/editor.scss
@@ -1,14 +1,20 @@
-.components-disabled .wc-block-price-filter__range-input-wrapper .wc-block-price-filter__range-input {
-	&::-webkit-slider-thumb {
-		pointer-events: none;
-	}
-	&::-moz-range-thumb {
-		pointer-events: none;
-	}
-	&::-ms-thumb {
-		pointer-events: none;
+.wp-block-woocommerce-price-filter .components-disabled {
+	border-radius: inherit;
+	border-color: inherit;
+
+	.wc-block-price-filter__range-input-wrapper .wc-block-price-filter__range-input {
+		&::-webkit-slider-thumb {
+			pointer-events: none;
+		}
+		&::-moz-range-thumb {
+			pointer-events: none;
+		}
+		&::-ms-thumb {
+			pointer-events: none;
+		}
 	}
 }
+
 .wc-block-price-slider {
 	.components-placeholder__instructions {
 		border-bottom: 1px solid #e0e2e6;
diff --git a/assets/js/blocks/price-filter/index.js b/assets/js/blocks/price-filter/index.js
index 64e471bd90c..caf15e3c725 100644
--- a/assets/js/blocks/price-filter/index.js
+++ b/assets/js/blocks/price-filter/index.js
@@ -5,6 +5,8 @@ import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
 import classNames from 'classnames';
 import { Icon, bill } from '@woocommerce/icons';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -12,6 +14,7 @@ import { Icon, bill } from '@woocommerce/icons';
 import edit from './edit.js';
 
 registerBlockType( 'woocommerce/price-filter', {
+	apiVersion: 2,
 	title: __( 'Filter Products by Price', 'woo-gutenberg-products-block' ),
 	icon: {
 		src: (
@@ -30,6 +33,17 @@ registerBlockType( 'woocommerce/price-filter', {
 	supports: {
 		html: false,
 		multiple: false,
+		color: {
+			text: true,
+			background: false,
+		},
+		...( isFeaturePluginBuild() && {
+			__experimentalBorder: {
+				radius: true,
+				color: true,
+				width: false,
+			},
+		} ),
 	},
 	example: {},
 	attributes: {
@@ -70,7 +84,9 @@ registerBlockType( 'woocommerce/price-filter', {
 		};
 		return (
 			<div
-				className={ classNames( 'is-loading', className ) }
+				{ ...useBlockProps.save( {
+					className: classNames( 'is-loading', className ),
+				} ) }
 				{ ...data }
 			>
 				<span
diff --git a/assets/js/blocks/price-filter/style.scss b/assets/js/blocks/price-filter/style.scss
new file mode 100644
index 00000000000..daf012103e1
--- /dev/null
+++ b/assets/js/blocks/price-filter/style.scss
@@ -0,0 +1,25 @@
+.wp-block-woocommerce-price-filter {
+	border-style: none !important;
+}
+
+.wc-block-price-slider {
+	border-radius: inherit;
+	border-color: inherit;
+}
+
+.wc-block-price-filter {
+	border-radius: inherit;
+	border-color: inherit;
+}
+
+
+.wc-block-price-filter__controls {
+	border-radius: inherit;
+	border-color: inherit;
+
+	input {
+		border-radius: inherit !important;
+		border-color: inherit !important;
+		border-style: solid;
+	}
+}