Price Filter block: enable global style #4965

Price Filter block: enable global style #4965

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.

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>
 	);
 }

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;

assets/js/blocks/price-filter/index.js

@@ -5,13 +5,16 @@ 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
  */
 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

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;
+	}
+}